Test

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

90% match

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.

88% match

Independent scale multi-line graph

This interactive chart displays monthly stock prices for Microsoft, Amazon, and IBM from January 2000 to March 2010, with each line normalized to its own independent y-axis scale. This allows viewers to compare the shapes and relative trends of each company’s price movements without being distorted by differing absolute price ranges. Built with D3 v4 in SVG, the visualization uses `d3.nest()` to group data by symbol and `d3.scaleLinear()` to assign each line its own vertical domain. Clicking a legend label toggles the corresponding line’s opacity via a `transition()`, while `d3.axisBottom()` renders the shared time axis. Data originates from a CSV file.

Dd3noob

88% match

Tp3_DV_Rendu4

This visualization shows monthly stock prices for MSFT, AMZN, and IBM from 2000 to 2010, using layered area charts to compare trends across companies. Each symbol is displayed in its own horizontal band, with semi-transparent filled areas colored by company. The code uses D3 v3’s `d3.svg.area()`, `d3.svg.line()`, and `d3.time.scale()` to draw the SVG paths, while `d3.nest()` groups the CSV data by symbol. The chart sorts symbols by maximum price and applies basis interpolation for smooth curves.

TP2

This visualization shows monthly stock prices for Microsoft, Amazon, and IBM from 2000 to 2010 using multi-line time series. The data comes from a CSV file parsed with the `d3.dsvFormat` API. Each stock’s price trend is drawn as a colored line using `d3.line` with a basis curve, within an SVG rendered by D3 v4. The chart includes axes generated by `d3.axisBottom` and `d3.axisLeft`, plus a legend built with `d3.scaleOrdinal` and category colors. The code also computes per-symbol maximum and total prices via `d3.max` and `d3.sum`, though these values are not directly displayed.

LLRobergeon

Tp3_DV_Rendu5

This visualization compares the monthly stock prices of Microsoft, Amazon, and IBM from 2000 to 2010, showing both individual time series and a stacked area chart. The animation transitions through three views: individual line charts, horizon-style areas for each symbol, and finally a stacked layout. The code uses D3 v3 with SVG rendering, employing d3.svg.line, d3.svg.area, and d3.layout.stack for the layouts, while d3.time.scale handles the date axis. Data comes from a CSV file grouped by stock symbol via d3.nest.

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_DV_Rendu3

This interactive visualization displays the historical stock prices of Microsoft, Amazon, and IBM from January 2000 to March 2010. It uses a combination of individual line charts and a stacked area chart to compare the price trends and relative magnitudes across the three companies. The visualization is rendered as an SVG using D3 version 3, with animated transitions that convert between the line and stacked area representations. The code leverages D3’s time and linear scales, category color palette, and layout stack API to process and display the data from the provided CSV file.