Multi-line graph 4 with v7: Toggle

100%

Multi-line graph 4 with v7: Toggle

✓ Published0🌍 Public

Last edited Jun 19, 2021

Created on Jun 19, 2021

This interactive multi-line chart displays monthly stock prices for three companies (MSFT, AMZN, IBM) from January 2000 to March 2010. Users can click legend labels to toggle individual lines on and off, with a smooth opacity transition revealing or hiding each series. The visualization uses d3.csv to load data, d3.group to organize by symbol, d3.scaleOrdinal with d3.schemeCategory10 for colors, d3.line for paths, and d3.axisBottom/axisLeft for axes. Clicking triggers d3.select and transition().duration(100) to animate opacity changes.

AI-generated description

This is used as an example in the book D3 Tips and Tricks v7. The stock data was sourced from Mike Bostock's small multiples example.

It is the fourth 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 ability to toggle the lines off and on by clicking on the appropriate legend text.

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

mit Licensed

Similar vizzes

Loading thumbnail…

Multi-line graph 4 with v4: Toggle

This interactive multi-line chart displays monthly stock prices for three companies (MSFT, AMZN, IBM) from 2000 onward, with a clickable legend that toggles each line’s visibility. Using D3 v4, the code parses CSV data with `d3.csv`, nests records by symbol, and renders SVG paths via `d3.line` and `d3.scaleTime`/`d3.scaleLinear`. Clicking a legend text triggers a 100ms `transition` on the corresponding line’s opacity, dynamically showing or hiding it. The legend colors are assigned with `d3.scaleOrdinal` and `d3.schemeCategory10`.

Dd3noob

95% match

Loading thumbnail…

Multi-line graph 4: Toggle

This multi-line chart displays monthly stock prices for Microsoft, Amazon, and IBM from 2000 to 2010, sourced from a CSV file. The graph automatically generates a color-coded legend, and clicking a legend label toggles the corresponding line’s opacity via a smooth CSS transition. Built with the D3.js library, it uses `d3.time.scale` for the time axis, `d3.svg.line` for plotting, and `d3.nest()` to group data by company symbol, with linear scaling for the price axis.

Dd3noob

93% 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

Loading thumbnail…

Multi-line graph 4 with v6: Toggle

A multi-line graph displays monthly stock prices for Microsoft, Amazon, and IBM. D3.js v6 is used to parse CSV data, scale the time and price domains, and render the SVG lines with distinct colors. Clicking a legend label toggles the corresponding line’s opacity via a transition, hiding or showing that company’s data. The example uses `d3.csv`, `d3.timeParse`, `d3.line`, and `d3.scaleOrdinal`.

Dd3noob

92% 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

91% match

Loading thumbnail…

Multi-line graph 4 with v4: Toggle

This multi-line graph displays monthly stock prices for Microsoft, Amazon, and IBM from January 2000 to March 2010, with each company's price trend drawn as a separate colored line. The chart uses D3.js v3 with SVG rendering, parsing dates from a CSV file and applying a time-scaled x-axis. The code nests the data by stock symbol using `d3.nest()`, assigns each line a color from `d3.scale.category10()`, and draws the paths with `d3.svg.line()`.

DDarienLiang

91% match

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

90% 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

90% match