etape4

100%

✓ Published0🌍 Public

Last edited Nov 29, 2017

Created on Nov 29, 2017

This example shows monthly stock prices for MSFT, AMZN, and IBM from 2000 to 2010, animating from individual line charts into overlapping horizon graphs. The visualization uses D3.js v3 to parse CSV data, nest it by symbol, and render SVG paths with transitions. It employs d3.svg.line, d3.svg.area, and d3.time.scale to draw the series, while d3.nest and d3.timer drive the sequential animation of data drawing and chart transformation.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

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.

NNaamaNaa

94% match

Loading thumbnail…

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.

NNaamaNaa

93% match

Loading thumbnail…

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.

NNaamaNaa

89% match

Loading thumbnail…

renduFinalTp3

NNaamaNaa

89% match

Loading thumbnail…

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.

AAminaSGitHub

89% match

Loading thumbnail…

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

88% match

Loading thumbnail…

P2

This example animates the monthly stock prices of Microsoft, Amazon, and IBM from 2000 to 2010. It first draws each symbol’s price as a separate line chart, then morphs the lines into horizon charts by stacking and clipping translucent area fills. The code uses D3 v3 with SVG, `d3.svg.line` and `d3.svg.area` for geometry, and `d3.timer` for the animation. The dataset is loaded from a local CSV via `d3.csv`. Each symbol’s line and circle are repositioned frame-by-frame, then transitions shift the glyphs to the right edge while revealing the horizon bands.

SStephenMaturrin

88% match

Loading thumbnail…

renduFinalTp3

This example animates a multi-series line chart of monthly stock prices for Microsoft, Amazon, and IBM from 2000 to 2010. The visualization first draws each company’s price history as a separate line, then transitions into a stacked area chart. Using D3.js v3 and SVG, it employs `d3.svg.line`, `d3.svg.area`, `d3.layout.stack`, and `d3.timer` to orchestrate the sequential animation, with data loaded from a CSV file via `d3.csv`.

NNaamaNaa

88% match