Bar Chart using D3.js
Published: 2022-05-18 04:28:16


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gm8xw1efu8lazil0pavf.png)D3 (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:

``` html
<script type="module">

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

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

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

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

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

</script>
```
You can also use the standalone D3 microlibraries. For example, d3-selection:

``` html
<script type="module">

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

const div = selectAll("div");

</script>
```
first create 3 folder with namse: index.html, index.css,index.js
then open index.html and write this codes:

``` html
<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>
```
then open index.css and copy this codes:

``` css
.bar-chart {
    background-color: #C7D9D9;
    }
    
.bar {
     fill: #115D8C;
     }
```
and finally copy this codes in index.js:

``` javascript
 // 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 +")";
    });

```
the result will be this:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/227y1ue7ih4fwu1st7mo.png)
 
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:

``` javascript
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);
  })

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

``` javascript
// 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);

```
and the result will be:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2is88d3xwe0wki4x2jvj.png)