DEV Community

Saba beigi
Saba beigi

Posted on • Edited on

4 2

Bar Chart using D3.js

Image descriptionD3 (or D3.js) is a JavaScript library for visualizing data using web standards. D3 helps you bring data to life using SVG, Canvas and HTML. D3 combines powerful visualization and interaction techniques with a data-driven approach to DOM manipulation, giving you the full capabilities of modern browsers and the freedom to design the right visual interface for your data.
f you use npm, npm install d3. You can also download the latest release on GitHub. For vanilla HTML in modern browsers, import D3 from Skypack:

<script type="module">

import * as d3 from "https://cdn.skypack.dev/d3@7";

const div = d3.selectAll("div");

</script>
Enter fullscreen mode Exit fullscreen mode

For legacy environments, you can load D3’s UMD bundle from an npm-based CDN such as jsDelivr; a d3 global is exported:

<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
<script>

const div = d3.selectAll("div");

</script>
Enter fullscreen mode Exit fullscreen mode

You can also use the standalone D3 microlibraries. For example, d3-selection:

<script type="module">

import {selectAll} from "https://cdn.skypack.dev/d3-selection@3";

const div = selectAll("div");

</script>
Enter fullscreen mode Exit fullscreen mode

first create 3 folder with namse: index.html, index.css,index.js
then open index.html and write this codes:

<html>
    <head>
        <link rel="stylesheet" href="index.css">
        <title>Learn D3.js</title>
    </head>
    <body>
        <h1>Bar Chart using D3.js</h1>

        <svg class="bar-chart"></svg>

        <script src="https://d3js.org/d3.v4.min.js"></script>
        <script src="index.js"></script>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

then open index.css and copy this codes:

.bar-chart {
    background-color: #C7D9D9;
    }

.bar {
     fill: #115D8C;
     }
Enter fullscreen mode Exit fullscreen mode

and finally copy this codes in index.js:

 // javascript
var dataset = [80, 100, 56, 120, 180, 30, 40, 120, 160];

var svgWidth = 500, svgHeight = 300, barPadding = 5;
var barWidth = (svgWidth / dataset.length);


var svg = d3.select('svg')
    .attr("width", svgWidth)
    .attr("height", svgHeight);

var barChart = svg.selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("y", function(d) {
         return svgHeight - d 
    })
    .attr("height", function(d) { 
        return d; 
    })
    .attr("width", barWidth - barPadding)
    .attr("transform", function (d, i) {
        var translate = [barWidth * i, 0]; 
        return "translate("+ translate +")";
    });

Enter fullscreen mode Exit fullscreen mode

the result will be this:
Image description

what if the dataset number were so small?
we have a very tiny bar chart with is look like a liner chart.in this position we should use scale:

var yScale = d3
  .scaleLinear()
  .domain([0, d3.max(dataset)])
  .range([0, svgHeight]);
var barChart = svg
  .selectAll("rect")
  .data(dataset)
  .enter()
  .append("rect")
  .attr("y", function (d) {
    return svgHeight - yScale(d);
  })
  .attr("height", function (d) {
    return yScale(d);
  })

Enter fullscreen mode Exit fullscreen mode


javascript
for bar chart axis, d3 give us 4 metod:
d3.axisTop()
d3.axisRight()
d3.axisBottom()
d3.axisLeft()

// javascript

var data = [80, 100, 56, 120, 180, 30, 40, 120, 160];

var svgWidth = 500,
  svgHeight = 300;

var svg = d3.select("svg").attr("width", svgWidth).attr("height", svgHeight);

var xScale = d3
  .scaleLinear()
  .domain([0, d3.max(data)])
  .range([0, svgWidth]);

var yScale = d3
  .scaleLinear()
  .domain([0, d3.max(data)])
  .range([svgHeight, 0]);

var x_axis = d3.axisBottom().scale(xScale);

var y_axis = d3.axisLeft().scale(yScale);

svg.append("g").attr("transform", "translate(50, 10)").call(y_axis);

var xAxisTranslate = svgHeight - 20;

svg
  .append("g")
  .attr("transform", "translate(50, " + xAxisTranslate + ")")
  .call(x_axis);

Enter fullscreen mode Exit fullscreen mode

and the result will be:

Image description

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up