renduFinalTp3

renduFinalTp3

This visualization animates monthly stock prices for Microsoft, Amazon, and IBM from 2000 to 2010, displaying each company’s price history as a separate small-multiple line chart. After an initial stroke-drawing animation, the view transitions into a horizon chart layout, using stacked, color-coded areas to compress the vertical scale. The code relies on D3 v3’s `d3.svg.line`, `d3.svg.area`, `d3.nest`, and `d3.timer` to process the CSV data and orchestrate the SVG transitions between the two chart types.

96% match

renduFinalTp3

96% match

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

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.

AAminaSGitHub

etape2

The visualization displays monthly stock prices for Microsoft, Amazon, and IBM from 2000 to 2010, with each company’s price series separated into its own horizontal band. Animated SVG line charts draw progressively over time, while filled areas underneath each line use color to distinguish the symbols. The code uses d3.csv, d3.nest, d3.svg.line, d3.svg.area, and d3.timer to parse the data, group by symbol, and animate the rendering.

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.

LLRobergeon

etape3

This example shows monthly stock prices for Microsoft, Amazon, and IBM from 2000 to 2010 as animated, stacked area charts. Each symbol is rendered in its own horizontal band, with a dark line tracing the price over time. The code uses d3.csv to load data, d3.nest to group by symbol, and d3.svg.area and d3.svg.line with basis interpolation to draw the shapes. A d3.timer drives the sequential reveal of data points, while d3.layout.stack computes the stacked offsets.

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.

LLRobergeon