Multi-line graph 4 with v4: Toggle

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.

94% match

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.

Multi-line graph 1 with v4: Lines

This example shows a multi-line graph comparing the monthly stock prices of Microsoft, Amazon, and IBM from 2000 to 2010. It uses D3 v4 with SVG rendering, parsing dates with `d3.timeParse` and nesting the CSV data by symbol via `d3.nest` to draw a separate line for each company. The lines are styled with a steel blue stroke, and both axes are generated using `d3.axisBottom` and `d3.axisLeft`. The data originates from a CSV file, and the code demonstrates grouping data to create multiple line series.

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.

Multi-line graph 2 with v4: Colours

A multi-line graph displays stock prices over time for Microsoft, Amazon, and IBM, with each company’s series drawn in a distinct color from a categorical palette. The visualization uses the D3 v4 library, parsing dates with `d3.timeParse` and rendering lines as SVG paths via `d3.line`. Data is loaded from a CSV file, grouped by symbol with `d3.nest`, and colored using `d3.scaleOrdinal` with the `d3.schemeCategory10` palette. The chart includes a time-based x-axis and linear y-axis, with the line colors assigned dynamically to distinguish each stock series.

Multi-line graph 2 with v6: Colours

This chart displays monthly stock prices for Microsoft, Amazon, and IBM from 2000 to 2010 using a multi-line graph, with each company's price trend distinguished by a unique color from the `d3.schemeCategory10` palette. The data is loaded from a CSV file using `d3.csv()`, then parsed and grouped by symbol with `d3.group()`. Lines are drawn as SVG paths via `d3.line()`, with colors assigned dynamically from a `d3.scaleOrdinal` color scale based on each group's index, while axes are rendered using `d3.axisBottom` and `d3.axisLeft`.

92% match

Multi-line graph 1 with v7: Lines

This multi-line graph displays monthly stock prices for Microsoft, Amazon, and IBM from 2000 to 2010, with each company represented by a separate line. The visualization uses D3 v7’s `d3.group` function to nest data by symbol, then draws each line using the `d3.line` path generator. Data is loaded from a CSV file via `d3.csv`, with dates parsed using `d3.timeParse` and scales set with `d3.scaleTime` and `d3.scaleLinear`. Axes are rendered as SVG elements using `d3.axisBottom` and `d3.axisLeft`.

92% match

Multi-line graph 1 with v6: Lines

This visualization shows monthly stock prices for Microsoft, Amazon, and IBM from 2000 to 2010 as a multi-line graph. Using D3 v6, it loads CSV data and groups the entries by company symbol with `d3.group` to draw each series as a separate SVG path. The chart employs `d3.scaleTime`, `d3.scaleLinear`, and `d3.line` for axes and line generation, with `d3.extent` fixing the domain. Axis rendering uses `d3.axisBottom` and `d3.axisLeft`.