In the previous part of this series, we saw how to get started with creating a multi-line chart using the D3.js JavaScript library. In this tutorial, we'll take it to the next level by making the multi-line chart respond to data dynamically, and we'll add some more features as the tutorial progresses.

Getting Started

Let's get started by cloning the first part of the tutorial from GitHub.

git clone https://github.com/jay3dec/MultiLineChart_D3.git

Navigate to MultiLineChart_D3 and browse index.html, and you should have a multi-line graph based on the sample data.

Setting the Domain Dynamically

In the previous tutorial, when we created xScale and yScale using Range and Domain, we hard-coded the minimum and maximum for the domain. To make our graph more flexible, we need to read the minimum and maximum values for the domain dynamically from the data source.

D3.js provides the d3.min and d3.max methods to get the minimum and maximum values from an array respectively. We'll make use of these functions to get the minimum and maximum values for the domain.

We can get the minimum value from an array as shown:

d3.min(data, function(d) {
return d.value;
})

Similarly, in order to get the maximum value:

d3.max(data, function(d) {
return d.value;
})

Simply replace the minimum and maximum values in the xScale domain as shown:

Save all the changes and browse index.html. Now you should have the graph working well, as it was earlier. The only difference is that it's picking up the domain maximum and minimum values dynamically.

Creating the Line Chart Dynamically

Keeping a single JSON object for the sample would make it easier to parse the data and plot it on the chart. So combine the two pieces of sample data into a single JSON data string as shown below:

Now we'll modify our code to make our graph scale dynamically as per the sample data set and its values.

Next we'll split and organize the data based on Client so that we can draw a line graph for each Client in the data. D3 provides a method called d3.nest which helps to arrange data based on a particular key field. We'll use d3.nest to sort out the data based on Client as shown:

Save the changes and try to browse index.html. You should be able to see the multi-line chart as shown:

Let's also add some random colors to the graph lines. In order to add random colors, we'll be using the d3.hsl method. Modify the stroke attribute of the line graph as shown below to get random colors for the lines.

While iterating the dataGroup, we'll add the legends for the corresponding line graphs. Adding legends is quite simple. First, define the legend space based on the number of Clients or line graphs we'll be drawing:

lSpace = WIDTH/dataGroup.length;

Add a text to svg element with x and y coordinates while iterating the dataGroup after the line creation as shown:

We have adjusted the legend spacing (lSpace) based on the number of legends we have to show, so that all the legends are equally spaced from each other. We have divided the legend by 2 so that it's center aligned in its space and will be so as it progresses forward, as we add (i * lSpace) to upcoming legends.

Save all the changes and try to browse index.html and you should see the legends below the X axis.

Let's add a bit of styling on the legends to make them look bold. Add the following CSS to index.html:

Save the changes and try to browse index.html. Try clicking on the legends and the display of the corresponding line graph should toggle.

Conclusion

In this tutorial, we saw how to make our multi-line chart dynamic. We also saw how to create D3.js events. For detailed information on various other D3.js methods and APIs, have a look at the official documentation.