Multi-line graph 1: Lines
This example shows a multi-line graph comparing the monthly stock prices of Microsoft, Amazon, and IBM from 2000 to 2010. The code uses D3.js v3, specifically the `d3.nest` function to group the CSV data by company symbol, then draws a separate SVG `path` for each group via `d3.svg.line`. Time and linear scales define the axes, with dates parsed using `d3.time.format`. The graph is rendered as SVG with steelblue lines, and the stock data originates from Mike Bostock's small multiples example.
AI-generated descriptionThis is a derivative of the simple d3.js graph used as an example in the book D3 Tips and Tricks. The stock data was sourced from Mike Bostock's small multiples example.
It is the first graph in a series that is building a multi-line graph that incorperates an automatically developed legend and a system that can toggle the lines off and on as desired.
This version is demonstrating the use of the d3.nest function to group the data to allow the different lines to be drawn.
The graph should be taken in context with the text of the book which can be downloaded for free from Leanpub.