Bar Graph using Node.Js and D3

Why am I publishing this?

Recently, I had to work on a feature to plot our project related metrics on a bar chart and publish it as an email to a set of users. Since the application was already running on Node.js, I was looking for a library that I can use with Node.js that can generate bar graphs on the backend and most articles I read pointed me to D3.js. While community support for D3.js by itself is great, I really did not find much online help or documentation regarding how I can integrate Node.js with D3.js. I stumbled upon a npm package d3-node that was helpful.

You can download the entire repo from here.

Here are the steps that I followed to generate a bar graph using Node.js and D3.js.

The first step is to import the following required methods and functions into the javascript file that you are working on. While d3 and d3-node are required to generate the bar chart itself, fs is required to create a svg file and sharp is needed to convert the svg into an image (.png) file.

Packages to be imported into your javascript file.

Next step is to create a d3-node object and use that to create a svg element. Here, I am passing in the width and height of the svg element. This can be any magic number and you can play around with margins to identify what works best for you.

Create svg element of desired height and width using d3-node object.

Attaching sample dataset that would integrate automatically with this code.

Sample data set.

Next step is to define X and Y scales and define their range. The scale band is used for X-axis because it has a distinct band. You can proceed with or without the padding method based on whether or not you need some space between each bars. The max method is a nice way to identify the maximum value on the y-scale. I have kept the maximum value on y-scale as 30% higher than the actual maximum value so that there will be some space above the tallest bar where you can add titles or legends per your requirement.

Create x and y scales and define their range.

The first part of the next gist is to set a strict background color to your chart. When I first exported a bar chart using this code, the background of the bar chart was black which was synchronous to my OS theme. So setting a strict BG will make the chart look uniform irrespective of the user’s OS theme.

The second part is to add a title to the bar chart. We can add a text element to the SVG to add a title.

The third part is to add a group element to our SVG. The axes and bars will be added to this group element. The transform attribute is added to add some margin.

Title and background color for the chart.

Next step will add a x-axis to the SVG. The axisBottom method of d3 can be used to create the x-axis and the x-scale that we created in the earlier steps can be passed as an input to this method. To add a description to the axis, a text element can appended to the SVG. The x and y attributes can be modified to position the text description per your need. You can simply NOT add a text element if you don’t need a description.

Adding x-axis with a description text.

Next step is to create a Y-axis. The axisLeft method of d3 can be used to create the axis. The tickFormat method can be used, if there is a need to format the ticks. In the below example, it adds a ‘$’ to the ticks on y-axis.

Adding y-axis with a description text.

Next step is to add the bars to the SVG. First step to create a bar is to append a rectangle element. The attributes x and y will define the position of each bar. The width of the bars will be determined by the scaleBand method. The x-scale returns a bandwidth using the range and padding that we provided to it.

Creating the bars using the rectangle element.

At this point, we have generated a bar chart using d3 in node.js. The next step is to get the SVG and create a PNG from it. The d3node package has the svgString method which can be used to obtain the SVG in string format. If all you need is a SVG, you can return the output of svgString and get done with it.

Just in case you want to generate an image, I have used a node package called Sharp. In the below example, I have created a SVG file and then converted it into a PNG file. But the library provides a lot more useful methods which can be found in their documentation here.

Get SVG and convert it to PNG

Let’s see how the bar chart looks on complete execution of the code.

Final image of the bar chart.

I want to thank Tutorials Teacher which helped me to understand the basics required to generate charts using d3.