DEV Community

Saba beigi
Saba beigi

Posted on • Updated on

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

Top comments (0)