Wednesday, August 2, 2017

How to create horizontal bar chart using d3js JavaScript charting library

I received lot of requests by many d3js beginners about "how to create a horizontal bar chart using d3js" along with sample code. I think I have not posted anything related to d3js after my last article. So almost after 2 months, I am writing this post on d3js. I have prepared a sample code to show the distance in meters covered by every participant in a running race. It's very simple example with distance in meters is on X-axis and participant's names are on Y-axis. Just for the change, I have moved my X-Axis to the top.

Sample code for creating horizontal bar chart in d3js



Step 1 - Append an empty DIV to body with id as "chart"
<!-- horizontal bar chart -->
<div id="chart">  </div>
Step 2 - Prepare JSON data
var data = [{
   "name": "Rohit",
   "value": 120
  }, {
   "name": "Sanket",
   "value": 116
  }, {
   "name": "Vivek",
   "value": 109
  }, {
   "name": "Richa",
   "value": 94
  }, {
   "name": "Ricky",
   "value": 90
  }, {
   "name": "soniya",
   "value": 84
  }, {
   "name": "Nilesh",
   "value": 107
  }, {
   "name": "Sweety",
   "value": 66
  }];
Note : This is the data which will be displayed in the chart, your values may change and you can update this JSON as per requirements.

Step 3 - Create self injecting method with two parameters to it - holder & data
You can also give some name to the method and pass the parameters. I am giving the explanation of the steps which I have used in my example so can do the changes in your code if you are comfortable. This method takes care of creating the x and y axis and drawing the rectangle etc.
(function(holder,data){
// code to generate chart goes here.
})("#chart", data);

If you are completely new to d3js and don't know about how to draw x and y axis using SVG then please refer to my first post. In this post, I am explaining the changes required for only the horizontal bar chart.

Step 4 - Once X and Y axis are ready, use below script to generate horizontal rectangles.
So once your axis is ready then you can add following code in order to generate bars on the chart. Basically, you will be generating rectangle elements using d3js methods. In this, we have to specify x-y coordinates, width, and height of each rectangle. Have a look at the below code and you will understand what is happening.
 svg.selectAll('.bar')
 .data(data)
 .enter().append('rect')
 .attr('class', 'bar barColor')
 .attr('x', function(d) { return x(d3.min(data, function(d) {return +d.value;})); })
 .attr('y', function(d) { return y(d.name); })
 .attr('width', function(d) { return x(d.value); })
 .attr('height', y.rangeBand());
You can check last 4 lines of above code, I am starting the rectangle from the starting point of the x axis which is nothing but the minimum of the d.value from data object. Similarly I am setting the height and width of the rectangle.

I hope this example code will help beginners to understand how svg bar element can be used to generate horizontal bar charts using d3.js. Best of luck.

No comments:

Post a Comment