TP3_Correction

TP3 animation

This visualization animates the monthly stock prices of Microsoft, Amazon, and IBM from 2000 to 2010 using an animated line chart. It first draws each company’s price line progressively, then transforms the view into a horizon chart by stacking three colored area bands per symbol. The code relies on D3 v3’s `d3.svg.line`, `d3.svg.area`, `d3.time.scale`, `d3.nest`, and `d3.timer` to build the SVG animation, reading data from a CSV file.

89% match

TP3 animation

The visualization animates monthly stock prices for Microsoft, Amazon, and IBM from 2000 to 2010. It initially plots each company's price line individually, then transforms all three into a stacked horizon chart. The code uses d3.svg.line and d3.area generators with basis interpolation, d3.time.scale for the date axis, and d3.timer for the animation sequence. The final view uses d3.scale.ordinal colors and a clipPath to create the layered horizon effect. Data comes from the bundled dataset.csv file.

88% match

TP3 DataViz

This example animates a multi-series line chart showing the monthly closing prices of Microsoft, Amazon, and IBM from 2000 to 2010. It first draws the lines progressively, then transitions to a horizon chart, using stacked, semi-transparent bands to encode price magnitude. Built with D3 v3, it relies on `d3.svg.line`, `d3.svg.area`, `d3.time.scale`, and `d3.timer` for the animation, with data loaded from a CSV file via `d3.csv`. The final view clips each band with a `clipPath` and uses a color scale to differentiate the series.

87% match

TP3_v3.11

This visualization compares monthly stock price trends for Microsoft, Amazon, and IBM using layered area charts. It presents the data in three distinct modes: separated, stacked, and centered displays, allowing viewers to compare price movements across companies. The D3.js v4 code loads data from a CSV file, parses dates with `d3.timeParse`, and renders the areas as SVG paths using `d3.area` with basis curve interpolation. Animated transitions would cycle through the different display modes, though the visible code primarily sets up the static chart structures.

GGaret005

86% 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.

AAminaSGitHub

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.

AAminaSGitHub

tp2 dataviz

This example animates a multi-series line chart, plotting monthly stock prices for Microsoft, Amazon, and IBM from 2000 to 2010. It first draws each series as a dark, interpolated path in its own small multiples panel, highlighting the latest point with a colored circle. The animation then transitions each panel into a horizon chart, layering three clipped, stacked area fills to show the same data with greater vertical resolution. The code uses d3.svg.line and d3.svg.area generators, d3.time.scale for dates, and d3.select transitions to orchestrate the sequential reveal of lines and horizons.

EEnzoTheBrown

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.