Multi-line graph 1 with v5: Lines
This example shows monthly stock prices for Microsoft, Amazon, and IBM as separate lines on a shared time axis. It demonstrates how to group data by symbol using `d3.nest` and render each group as a distinct path with the `d3.line` generator. The SVG output includes axes created with `d3.axisBottom` and `d3.axisLeft`, while scales are defined via `d3.scaleTime` and `d3.scaleLinear`. The stock data originates from Mike Bostock’s small multiples example, and the chart uses d3.v5.
AI-generated descriptionThis is a derivative of the simple d3.js graph in v5 used as an example in the book D3 Tips and Tricks v5. 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.