Multiple lines

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

TP3 multiple line

This visualization displays monthly stock prices for Microsoft, Amazon, and IBM from January 2000 to March 2010, using a small multiple layout with one chart per company. Each chart contains a gray area path and a line path rendered as SVG, with the y-axis scaled independently to each stock’s maximum price. The code uses d3.csv to load the dataset, d3.nest to group by symbol, and d3.time.scale, d3.svg.area, and d3.svg.line to construct the charts. Data comes from a local CSV file.

LLRobergeon

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

Test

This line chart shows the monthly stock prices of Microsoft, Amazon, and IBM from January 2000 to March 2010, with each company’s price trend drawn as a separate colored line. The visualization uses the D3.js library (version 3.5.17) to parse dates, scale the axes, and render the SVG paths. Data is loaded from a CSV file, then grouped by symbol using `d3.nest()`, with the lines drawn using `d3.svg.line()` and the axes created via `d3.svg.axis()`. The color scale is generated dynamically with `d3.scale.category10()`.

Rrvdv

Tp3_DV_Rendu2

This visualization compares monthly stock prices for Microsoft, Amazon, and IBM from 2000 to 2010. It displays multiple small multiples, each showing a company’s price trend as a smooth line chart, with the data loaded from a CSV file. Using D3 v3, the code groups data by symbol via `d3.nest`, sorts companies by maximum price, and animates the drawing of each line progressively with a timer. An area fill, rendered via `d3.svg.area`, is added beneath each line, and the axis and scaling are computed dynamically per company.

AAminaSGitHub

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

Multi-line graph 2: Colours

This multi-line graph displays stock price changes over time for Microsoft, Amazon, and IBM, with each line distinguished by a unique color. The visualization uses the D3.js library (version 3.5) to parse CSV data, scale time and price ranges, and render SVG paths. It applies a categorical color scale via `d3.scale.category10` and assigns colors dynamically to each symbol group from the nested data. The example focuses solely on demonstrating color differentiation among multiple lines, without legends or interactive toggling.

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.