explication multi-lignes

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.

87% 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`.

87% match

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`.

87% 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`.

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

Multi-line graph 3 with v5: Legend

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`.

Multiple lines

This visualization displays the monthly stock prices of Microsoft, Amazon, and IBM from 2000 to 2010 as multiple colored lines on a single chart. The chart uses a time-scaled x-axis and a linear y-axis for price, with each company’s line labeled directly. Built with D3 v4, the code loads data from a CSV, nests it by stock symbol, and renders using SVG paths. It also includes commented-out attempts at streamgraphs and area charts.

CCharlesGaydon

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.