How to create a Simple D3.js Bar Chart? 2 Steps Only

Data Scientist works on data. They analyze the data and find useful information from it. And you already know visualizations like charts, graphs e.t.c makes very easy for them to do faster data analysis. There are many data visualization tools available. Some are free for personal use and some are paid. But here In this post, I will use the open source Javascript Library for creating a chart. You will know how to create a Simple D3.js Bar Chart. This tutorial is for the beginners who want to know an overview of D3.js.

Steps By Step Guide For Creating Simple D3.js Bar Chart.

Simple D3.js Bar Chart featured image

Step 1: Create an HTML page

In this step, you will set up an HTML file. It consists of D3.js File. You can download the D3.js File from their server. But I will use the CDN version of the D3.js. Make sure that you run the HTML file from localhost as running locally without server may result to an error due to not downloading from CDN link.

Below is the initial Setup for the HTML Page.

<html>
 <head>
  <link rel="stylesheet" href="index.css">
 </head>
 <body>
  <svg></svg>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script></script>
 </body>
</html>

Let’s take a look at the above code. I have added the SVG tag for the DOM. I have also included the D3.Js script from their server. When you run the HTML file you will not see anything. Let’s Add some style to the SVG tag.

Step 2: Define the Dimensions for the SVG

First, you will define the width and height of the SVG. As the graphs and charts are inside the SVG File. Let’s say 600×400 pixel. Add the following code before the script tag.

var svg_width = 600;
var svg_height = 400;
var svg = d3.select('svg')
.attr("width", svg_width)
.attr("height", svg_height)
.attr("class","bar-chart" );

The statement .attr(“class”,”bar-chart” ) will declare the class name for the SVG. The above statement will define the width, height, and class for the SVG tag. When you open the HTML File, you will see nothing as color will be white. Let’s add some CSS to the class bar-chart. I created a separate syle.css file for writing this code.

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

Now let’s draw the bar chart inside the SVG box you have created. To do this you defined some datasets and define dimensions for the bar chart.

Add the following code inside the Script tag.

var dataset = [10, 50, 100, 140, 120, 20, 0, 170, 180];
var barPadding = 5;
var barWidth = (svg_width / dataset.length);
var barChart = svg.selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("y", function(d) {
        return svg_width - d
    })
    .attr("height", function(d) {
        return d;
    })
    .attr("width", barWidth - barPadding)
    .attr("transform", function (d, i) {
         var translate = [barWidth * i, 0];
         return "translate("+ translate +")";
    });

Let’s understand what are the statements doing inside the d3.js Simple Bar Chart Javascript code.

1.selectAll()

This method will contain a single parameter that is an attribute or id of the HTML element. Here I use “rect” inside the parameter. Therefore the statement svg.selectAll(“rect”) will return null as the rectangle element is not inside the HTML code. It will return values after we append it to the dataset.

2. data()

It allows you to choose the dataset for example data(dataset) will allow you to choose the data points. You will use it to define the height of the bar chart.

3. enter()

It will choose all the elements inside the datasets you define using data() method.

4. append()

This accepts the attributes parameter. Like in the above example append(‘rec’) will create <rec></rec> attributes for all the data points. The datasets have size 9, therefore the number of rec attributes will be 9. However after the append() method, when you refresh the browser you will not see any chart. It is because you have not set the x and y-axis.

.attr("y", function(d) { return svg_width - d })
The above statement will define the attribute y that will work on the dataset. It has a function(d). The parameter d acts as dataset values. Now inside the function, you can do anything using the data.

5. transform()

.attr("transform", function (d, i) {
var translate = [barWidth * i, 0];
return "translate("+ translate +")";
})

It will do the transformation on the data and index of the data points and do the transformation of the chart along the x-axis. Its purpose is to fit the bar chart in the proper area of SVG.

Hope you have now learned the steps to create a Simple D3.js Bar Chart. If you have any problem in running the code. Then you can contact us. If you like the post you can like our Data Science Learner Page.