Creating a line chart

Line chart is a common, basic chart type that is widely used in many fields. This chart consists of a series of data points connected by straight line segments. A line chart is also typically bordered by two perpendicular axes: the x axis and the y axis. In this recipe, we will take a look at how this basic chart can be implemented using D3 as a reusable JavaScript object that can be configured to display multiple data series on a different scale. Besides that, we will also show the technique of implementing a dynamic multi-data-series update with animation.

Getting ready

Open your local copy of the following file in your web browser:

https://github.com/NickQiZhu/d3-cookbook-v2/blob/master/src/chapter8/line-chart.html

It is highly recommended that you have the companion code example open while reading this recipe.

How to do it...

Let's take a look at the following code that implements this chart type; due the length of the recipe, we will only show the outline of the code...