How I created a Bar Chart using D3.js data visualization library

A Simple Bar Chart

Yesterday I planned to learn something new and it struck me that someone mentioned about doing D3 js projects in a FreeCodeCamp Gitter Chatroom

I have always wanted to learn some visualization related stuff and data viz libraries and play with them, but kept postponing them due to my laziness. So, this time I was determined to do something and code it out, especially after seeing a small inspiring video.

The goal was to complete this FreeCodeCamp challenge/project and the end result of the project should have features similar to this CodePen pen :

https://codepen.io/karuppiah7890/full/pwxjQZ/

I started digging more about D3.js library ( D3 — Data Driven Documents) by checking out their site, documentation, gallery and a lot of stuff. Some good reference links for a beginner would be :

1. D3 GitHub Wiki : It’s like the index of all links, and there are links to even some Wiki translations in case you prefer your native language rather than English
2. Tutorials : Provides links to good articles to understand and get started with D3.js , there are also links to blogs, books, courses, videos etc!
3. Gallery : Has links to an ocean of examples!
4. API Reference : If you dig API docs, then you can dive right in here

Now, the above is all good for reference purposes. But when you want to learn and create something, you can’t simply go through all stuff randomly. In that case, you will simply keep roaming around the Web by clicking links and just reading and seeing nice code examples. But it does no good until you get your hands dirty and code!

Takeaway : Don’t just read it! Do it!

So, for my goal, I had to create a Bar chart based on the sample US Gross Domestic Product data which is present as a JSON . Also, the user should be able to hover over the bar chart and see the data through tooltips.

I started searching for bar chart examples in the gallery web page using Ctrl+F and found these two simple examples among a few

1. Bar Chart : A simple bar chart
2. Adding tooltip to Bar Chart : Bar chart with tooltip feature

Now, I saw the code in these examples and of course, I couldn’t understand everything. So, now I started digging the tutorials and surprisingly, the first three points in the Tutorials page helped me towards my goal!

These are the links that the three points lead to :

1. Introduction : You would have already read the intro, so feel free to skip this
2. Simple Bar Chart Video Tutorial : A good tutorial to get your hands dirty. But don’t expect to understand everything at the first time, and it’s fine not to. This is not the only go-to tutorial for learning D3.js
3. Let’s make a Bar Chart tutorial Part 1 , Part 2 , Part 3 by Mike Bostock (one of the key developers of D3.js !) : This series will be quite good and will give you some clarity better than the second tutorial I just mentioned. Again, you might not understand everything in the examples and it’s completely fine. And oh, some example code might have little old code (version 3), the latest code(version 4 is the latest D3.js version) can be obtained by checking out the complete code links at the end of the articles or by searching the API docs

After the above tutorials, you are on your own. Keep juggling with the code in the 3 parts in Mike’s tutorial series. That’s what I did for most of my time. If you feel you need to check out other tutorials, may be for more clarity, go ahead, but don’t go on a back to back tutorial marathon! A better thing to do would be to check the API docs to understand the functions used in the examples, that’s what I did, because you can’t always find feature specific tutorials that you are looking for, but you do find API docs. So, read docs, this will give you experience in reading docs, and will help you get rid of the tutorials and the tutorial marathon. Also, if the docs aren’t good or beginner friendly, please make changes to it or report issues. In the case of D3 API Docs, they are present in GitHub in the form of Readme or GitHub Wiki. You can improve the Readme by creating GitHub issues and through Pull Requests. For GitHub Wiki, it depends. In some repositories, it is accessible and editable by all, just like Wikipedia. So you can edit and improve them directly. In others, only collaborators can edit, so just create an issue regarding the edit :)

Takeaway : Get used to reading API docs and improve them if possible !

I started a Pen in my CodePen account to try out everything and to get the complete project done in CodePen itself. And half the time things didn’t work. I had to tweak lots of stuff to make things appear in my output one by one. I still have lots to learn about SVG and D3 is all about using SVG, though it’s not limited to it. Like you could even use a bunch of divs to represent your bars in the bar chart.

Now with the tutorials and API docs, I created basic bar charts using some static data. But I wanted to download some data and then represent that data as a bar chart for my project. The examples were showing how to use d3.tsv() to load a Tab Separtated Values file. But my data was present in a JSON file. After some searching I found d3.json() method which can be used to download and get JSON files

This was just one thing. There were some more hurdles to cross. I saw some code and it had this thing called “domain” and “range” for some code related to specifying the height or width of the bars. If you are already looking at the code while reading this article, I am sure you would have noticed them before even tackling the file downloading issue. The thing with visualizations is — you need to know some math. What kind of math ? Some basic geometry and functions. In mathematics, functions with single independent variable x and single dependent variable y (in layman terms, single input x and single output y) , domain of a function means — all the possible values for x and range means — all the possible values for y corresponding to the values of x (the values in the domain).

D3 uses this concept of domain and range, for scaling purposes. For example, let’s say you want to create a bar chart (horizontal bars) where bars are representing percentage values and the maximum value that is possible is 100% and the total width of the bar chart is 100px. So, to represent 40%, you could provide a width of 40px for the bar, and for 60% you could provide a width of 60px. Makes sense ? But now, what if the total width of the bar chart is changed to 200px ? Now you represent 40% using 80px, and 60% using 120px. And what if the maximum possible value for the percentage is 200% ? Does it ring any bells ? So, you have to fit your bars inside the total width and height of the chart. This is the problem of scaling. In D3 you can handle this using some functions D3 provides for scaling. Like, they provide a linear scale, time scale etc. These functions help you map your values to the total width and height of the chart. For example, in the above case of horizontal bars, if the possible values you want to represent are from 0% to 100% and the total width of the chart is 200px, you tell the D3 scale function that the domain (the percentage values) is 0–100 and the range (width) is 0–200. And it provides you a function based on math, which you can use later to know the width of the bar given a percentage and then draw the bar. So, when you give it the value 100 (the percentage), it will return 200 (the width). And for this project, I needed a linear scale for drawing my bars.

That is one thing to note in D3. And there are some more Math related things and D3 functions to learn depending on what type of data you want to represent in your web page.

After getting my code to work to display the data in the JSON using vertical bars (which are quite different from implementing horizontal bars), I started working on the axes using D3’s functions for axis. I understood more about domains and ranges in scaling, during the process. And I needed a time scale function for representing the time (year) axis in my chart. Also, it was interesting to know how to put the ticks — marks on the axis to show the values. I also put text for naming the axes but it didn’t work due to some small bugs which I overlooked since I didn’t understand axes properly. I fixed it later, after some thinking.

After all this, I worked on tooltips today by checking these links :

1. Adding tooltip to Bar Chart
2. d3-tip library used in the above example (works only with D3 v3)
3. Another d3-tip library — this one works with D3 v4 the latest version as of this writing. An example of it’s usage, similar to the first example — http://bl.ocks.org/davegotz/bd54b56723c154d25eedde6504d30ad7

After all the code I did as mentioned above, now the bar chart looks like this :

https://codepen.io/karuppiah7890/full/RgeweG/

But the tooltips appear only at the top of the bars for me, because the d3-tip library works like that. Looks like the next step would be to write my own logic for the tooltip instead of using a library! And that’s how the project challenge CodePen is also implemented and it uses an old version of D3 (Shh. Ikr. I peeked at the code just now after wondering for long about “How that cool tooltip was implemented — with or without library?”. But then, don’t peek into the code with zero code at hand. That’s bad :P )

Go create your bar chart or any other chart of your choice using D3.js ! And oh, did you know D3.js can also be used to draw graphs too?! My next post may be about drawing graphs using D3 and other libraries too ;)

If you think this post was useful, please click ❤️ to recommend it to others for reading :)