How to create a simple Bar chart using D3.js? Part 1

For many classes I have sat wondering why should I learn to use D3.js when I can create a simple bar chart in Tableau within seconds. However, after reading a couple of articles online and also a few blogposts from this course I got intrigued and wanted to write on my understanding of the creation of a bar chart using D3.js.

D3.js as we all know is a Javascript library which helps visualize data using HTML, SVG and CSS.

All of us are aware of HTML and CSS. So, what is this SVG after all? SVG is an XML based vector image format with support for interactivity and animation. SVG allows three types of graphic objects:

• Vector graphic shapes such as outlines (boundary for your bar graph) consisting of straight lines and curves
• Bitmap images
• Text

These graphical objects can be grouped, styled and transformed into previously rendered objects. SVG is like your paint tool which draws your chart based on the measurements you give and axis and boundary defined by you.  You can include interactivity with your SVG as well and bring in animation to your chart through javascript that accesses the SVG DOM (document object model) Document_Object_Model.

So to first start your bar graph, you need an svg element to plot it and render it with the available data.

<svg id=”visualisation” width=”1000″ height=”500″></svg>

This code defines the svg element’s border or a small box with the mentioned height and width.

Next step is to create the x and the y axis of your chart for which you need a fixed range and domain for both the axis.

Domain – defines the maximum and minimum value of the data set displayed on the graph

Range – amount of the domain that the svg will be covering.

How will you fix the domain and the range? What sets that minimum and maximum value? The axis needs to scale according to your data and we need to take this into consideration while setting the values for the domain and the range.

For this example, I am using the following dataset:

var lineData = [{ x: 1, y: 5}, {  x: 20, y: 20 }, { x: 40,  y: 10 }, {  x: 60, y: 40 }, {  x: 80, y: 5}, { x: 100,  y: 60 }];

Now that the SVG is defined next step is to define a margin because each HTML element is considered as box on any web page. It consists of margin, border, padding and content. The width and height of the entire bar chart should also be set initially.

var vis = d3.select(‘#visualisation’), WIDTH = 1000, HEIGHT = 500, MARGINS = { top: 20,  right: 20,  bottom: 20, left: 50 },

<!— The x-range and the y-range represent the domain of the x- axis and the y-axis.

The range value takes into consideration the left and the right margin.

The next step would be to tie the domain to the data set using d3. Max() and d3.min() methods. –>

xRange = d3.scale.linear().range([MARGINS.left, WIDTH – MARGINS.right]).domain([d3.min(lineData, function(d) {

return d.x;

}), d3.max(lineData, function(d) {

return d.x;

})]),

yRange = d3.scale.linear().range([HEIGHT – MARGINS.top, MARGINS.bottom]).domain([d3.min(lineData, function(d) {

return d.y;

}), d3.max(lineData, function(d) {

return d.y;

})]),

<! – – Both the axis are appended to the SVG element by use of the append function – ->

xAxis = d3.svg.axis() .scale(xRange)  .tickSize(5) .tickSubdivide(true),

<! – the Y axis needs to be oriented towards the left hence orient function is used. – ->

yAxis = d3.svg.axis().scale(yRange) .tickSize(5) .orient(‘left’).tickSubdivide(true);

Both the axes have been transformed keeping the defined margin in view so that the axis do not touch the SVG margin. I will be continuing this post next week to add the lines of the bar chart and also CSS styling element. Hope this post encourages you all to try a simple chart on D3.js.

Reference : https://www.sitepoint.com/creating-simple-line-bar-charts-using-d3-js/