Line chart are built thanks to the
d3.line() helper function. I strongly advise to have a look to the basics of this function before trying to build your first chart. First example here is the most basic line plot you can do. Next one shows how to display several groups, and how to use small multiple to avoid the spaghetti chart.
Learn how to represent several groups on the line plot. This requires to group the data using the d3.nest function.
Learn how to apply the small multiple technique on line plot. It allows to avoid the spaghetti plot where lines become unreadable.
Three examples showing how to switch from one data series to another with smooth transition. Three situations are described. 1/ series are stored in different input file. 2/ series are stored in the same dataset, each in a different columns (wide format). 3/ same dataset, same column: long or tidy format.
1/ Transition between
Add a button that allows to go from one dataset to another with a smooth transition. Useful to understand how to build a
2/ Transition between
column of input
Dropdown button controls which columns of the dataset is displayed on the chart.
Interactivity can also be useful to zoom on a part of the chart or highlight a specific set of the chart