D3 animated bar chart

For creating bar chart you should have some knowledge of javascript and d3.

D3 is a javascript library used to create the visualization of data . It can handle many types of data format . Example JSON , CSV , XML , TSV and many more. It offers different type of charts such as bar, pie, line etc . You can learn more about d3 in its offical site or here .

For creating a bar chart, we need data(dummy data) . My data is in JSON format . It tells about how many time alphabets are using in a certain text .

[
{
"Letter": "A",
"Freq": 20
},
{
"Letter" : "B",
"Freq": 12
},
{
"Letter" : "C",
"Freq": 47
},
{
"Letter" : "D",
"Freq": 34
},
{
"Letter" : "E",
"Freq" : 54
},
{
"Letter" : "F",
"Freq" : 21
},
{
"Letter" : "G",
"Freq" : 57
},
{
"Letter" : "H",
"Freq" : 31
},
{
"Letter" : "I",
"Freq" : 17
},
{
"Letter" : "J",
"Freq" : 5
},
{
"Letter" : "K",
"Freq" : 23
},
{
"Letter" : "L",
"Freq" : 39
},
{
"Letter" : "M",
"Freq" : 29
},
{
"Letter" : "N",
"Freq" : 33
},
{
"Letter" : "O",
"Freq" : 18
},
{
"Letter" : "P",
"Freq" : 35
},
{
"Letter" : "Q",
"Freq" : 11
},
{
"Letter" : "R",
"Freq" : 45
},
{
"Letter" : "S",
"Freq" : 43
},
{
"Letter" : "T",
"Freq" : 28
},
{
"Letter" : "U",
"Freq" : 26
},
{
"Letter" : "V",
"Freq" : 30
},
{
"Letter" : "X",
"Freq" : 5
},
{
"Letter" : "Y",
"Freq" : 4
},
{
"Letter" : "Z",
"Freq" : 2
}
]

At first, create a HTML file i.e test.html you can give the name according to your choice. Now set DOM(Document Object Model) for HTML and add the CDN for D3 to load the d3 library in our test.html file. You can also download d3 library and then add it to your file.

Now we need to set the canvas for SVG and add the Scalable Vector Graphics (SVG) element to it . SVG is used to make dynamic graphics on HTML pages . SVG provides different shapes like lines, rectangles, circles, ellipses etc. Hence, designing visualizations with SVG gives you more flexibility and power in what you can achieve.

For appending the SVG, we are using select() function of d3 to select the body of HTML and then append SVG in the body. The attribute attr is used to add different attributes of SVG like what should be the height and width of SVG. Now if your run this HTML page on any desktop browser, you will see nothing but don’t worry if you inspect that web page, you will see a SVG element in Elements tab .

Now, we need to load the data into our HTML page. For this, we need to save above data in json format (data.json) .

Note:For this approach both data.json and test.html file should be placed in same directory (folder) .

For loading the data via d3, we need to create a server . Reason behind to create a server is, Chrome and other browsers does not normally allow XMLHttpRequest or fetch requests to local files. You may get an error that says something like:

Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https

fenix web server is a easy way to create a web server . The instructions are here .

Here is the code to load the data in to HTML page .

If you check your console tab from inspect elements, you will see the data. After loading the data, we are using a for loop to iterate through all the data and consoling it on the console tab, to check whether the data is loaded or not.

Console output

Now, we need to create two scales for x and y axis . x scale is going to be ordinal scale and y is going to be linear scale. We will give range to both x and y scale. For x, it would be 0 i.e origin to width and for y, it would be height to origin i.e 0 .

Next, we will be defining the axis for bar chart on the basis of the scale that we have created in the previous step . x-axis is going to be in the bottom of bar chart and y -axis on the left side of the chart .

After defining the range, we need to set the domain of the scale also . Actual reason to define range and domain is that , we can map our data with the scale that we created earlier . So that data will not cross the limit of the scales. We will set the domain from data itself . For setting x-axis domain, we will use map() function to get every letter from the data and for y-axis we will get the highest value from data with the help of max() function .

Now just add these x-axis and y-axis to our SVG by using the function call().

Reload your browser tab to see the changes .

Next step is to add the bar on the axis . Here we are getting the data and appending the rectangle with height and width according to the JSON data . SelectAll() function is playing a important role here . It is selecting all the bars which are created by the enter() function and it sets the different attributes for them like attribute x and y, for positioning the bars and the width and height attribute which is mentioned below are for setting the height and width of the bars.

If we reload our page then we can see bars on the web page on the SVG.

Basic bar chart

The basic bar is done but its not looking good. Let’s add some more attribute and CSS to it .

Update your axis and bar code like below

Add CSS also

And the result will look like :-)

You can stop your chart here but there is something missing here i.e the animation and tool-tip. Lets add these two things also .

If you don’t know what a tool-tip is you can check out d3 documentation . In short tool tip shows the value of a particular bar on mouse hover .

We are going to use CDN for tool-tip

CDN:- http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js

Note :- Add this CDN after adding the d3 cdn

After creating SVG, add this tip function to code and use mouseover and mouseout function on bar to call this tip function.

Adding tip function to SVG

Calling tip function on mouse hover

Now you can see tool tip in the output also:

output

Last thing is to add animation on the bars just update this code to your bars to get the animations

bars with animations

Jun 21, 2019 2:44 PM.webm

Finally, we created a bar chart with D3 and added animation and a tool-tip to it.

If you are having some issues to create the bar chart, you can find my code in Git-hub here