Multi-line graph 3 with v5: Legend

100%

Multi-line graph 3 with v5: Legend

✓ Published0🌍 Public

Last edited Sep 15, 2020

Created on Sep 15, 2020

This example shows a multi-line chart tracking monthly stock prices for three companies (MSFT, AMZN, IBM) from 2000 to 2010, with a color-coded legend placed below the x-axis. Using D3 v5, it nests the CSV data by symbol, draws each series as an SVG path, and assigns colors via `d3.scaleOrdinal` with `d3.schemeCategory10`. The legend labels are dynamically positioned and colored to match each line, and axes are generated with `d3.axisBottom` and `d3.axisLeft`.

AI-generated description

This 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 third 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 addition of a legend to the graph.

The graph should be taken in context with the text of the book which can be downloaded for free from Leanpub.

forked from <a href='http://bl.ocks.org/d3noob/'>d3noob</a>'s block: <a href='http://bl.ocks.org/d3noob/7bf95c7ac092db2fe31a979b926b91b8'>Multi-line graph 3 with v5: Legend</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Multi-line graph 3 with v6: Legend

A multi-line graph displays monthly stock prices for MSFT, AMZN, and IBM from 2000 to 2010, with each series colored distinctly via a categorical scale. The visualization uses D3 v6 APIs such as `d3.csv`, `d3.timeParse`, `d3.scaleTime`, `d3.scaleLinear`, and `d3.line`, rendering to SVG. A legend is automatically generated beneath the chart, spacing labels evenly and matching each company's line color, with data sourced from Mike Bostock's small multiples example.

Dd3noob

95% match

Loading thumbnail…

Multi-line graph 3 with v5: Legend

This interactive multi-line chart displays monthly stock prices for Microsoft, Amazon, and IBM from January 2000 to March 2010, with each series distinguished by a color from the Category 10 palette. Built with d3.v5, it renders lines as SVG paths and includes a legend beneath the plot, where each company name is color-coded to match its line. The dataset, sourced from Mike Bostock’s small multiples example, is grouped by symbol using d3.nest(), with scales defined by d3.scaleTime and d3.scaleLinear for the axes.

Dd3noob

94% match

Loading thumbnail…

Multi-line graph 3 with v7: Legend

This multi-line graph shows monthly stock price changes for Microsoft, Amazon, and IBM from 2000 to 2010, with a categorical legend labeling each company’s colored line. Using d3.v7, the code parses dates with `d3.timeParse`, groups the CSV data by symbol via `d3.group`, and applies a `d3.scaleOrdinal` color scheme. Each path is drawn with `d3.line` and `d3.scaleTime` and `d3.scaleLinear` axes, while legend text is positioned evenly along the bottom using computed spacing.

Dd3noob

94% match

Loading thumbnail…

Multi-line graph 3: Legend

Three stock price time series are plotted as separate colored lines, with a legend beneath the x-axis identifying each series by its symbol (MSFT, AMZN, IBM). The SVG chart is built with D3.js, using `d3.nest` to group monthly CSV data by symbol and a categorical color scale to assign line and legend colors. Axes are generated with `d3.svg.axis`, and data spans January 2000 through March 2010.

Dd3noob

93% match

Loading thumbnail…

Multi-line graph 3 with v4: Legend

This example displays multiple stock price time series in a single SVG line chart, using D3 v4 to plot data for Microsoft, Amazon, and IBM from January 2000 through March 2010. The visualization distinguishes each company’s line with a categorical color from `d3.schemeCategory10` and adds an automatically generated legend, positioning text labels evenly across the chart’s width. The data, loaded from a CSV file, is parsed with `d3.timeParse` and nested by symbol using `d3.nest` to create separate lines. Axes are rendered with `d3.axisBottom` and `d3.axisLeft`, while scales are defined via `d3.scaleTime` and `d3.scaleLinear`.

Dd3noob

93% match

Loading thumbnail…

Multi-line graph 2 with v7: Colours

This chart displays monthly stock prices for three companies (MSFT, AMZN, IBM) from 2000 to 2010, using multiple colored lines to represent each symbol. The visualization uses D3.js v7 to read a CSV file, parse dates with `d3.timeParse`, and group data by symbol using `d3.group`. Lines are drawn with `d3.line` and colored via `d3.scaleOrdinal` with the `schemeCategory10` palette. The graph includes time-series axes created with `d3.axisBottom` and `d3.axisLeft`, rendering everything as SVG elements.

Dd3noob

92% match

Loading thumbnail…

Multi-line graph 2 with v5: Colours

This example displays monthly stock prices for Microsoft, Amazon, and IBM as a multi-line graph, with each line assigned a distinct color from the d3.schemeCategory10 scale. The code uses d3.csv to load the data, d3.nest to group entries by symbol, and d3.line with d3.scaleTime and d3.scaleLinear to render the paths. The SVG canvas is built with D3 v5, and axes are added via d3.axisBottom and d3.axisLeft. It is the second in a series demonstrating multi-line graph techniques.

Dd3noob

92% match

Loading thumbnail…

Multi-line graph 4 with v5: Toggle

This multi-line chart displays monthly stock prices for Microsoft, Amazon, and IBM from 2000 to 2010, with each series distinguished by a color-coded legend. Clicking a legend label toggles the visibility of its corresponding line, which fades in or out via a transition. Built with D3 v5, the visualization uses `d3.nest()` to group data by symbol, `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.line()` for paths. The underlying data comes from a local CSV file.

Dd3noob

92% match