etape3

100%

✓ Published0🌍 Public

Last edited Nov 29, 2017

Created on Nov 29, 2017

This example animates a small multiples chart of monthly stock prices for three companies, transitioning from individual line charts into a stacked area chart. The visualization sorts symbols by their maximum price and uses D3’s nest layout to group data by symbol, with a timer driving the initial drawing of lines. It then applies D3’s stack layout, area, and line generators with basis interpolation to overlay and offset the series, while SVG transitions remove the per-symbol transforms and adjust stroke opacity.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

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

85% match

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

83% 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

83% match

Loading thumbnail…

StackedAreaChartStep3

This example animates a stacked area chart showing monthly stock prices for Microsoft, Amazon, and IBM from 2000 to 2010. The visualization first draws individual price lines by symbol, then transitions to layered areas that stack cumulatively using the `d3.layout.stack` API. It utilizes D3 v3 with SVG rendering and a `d3.timer` for animation, while color-coded areas represent each company. The data comes from a CSV file parsed with `d3.csv` and date formatting via `d3.time.format`.

AAminaSGitHub

82% match

Loading thumbnail…

etape4

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.

NNaamaNaa

82% match

Loading thumbnail…

smallmultiplesStep2

This example shows stock price trends for multiple companies as small multiples, with each symbol rendered as an individual sparkline in its own panel. The visualization uses D3 v3 to load CSV data, nest it by company, and draw both line and area paths. The animation is driven by a `d3.timer` that reveals the data progressively. The code uses `d3.svg.line`, `d3.svg.area`, and `d3.time.scale` to map dates and prices, with each panel scaled independently to its own maximum price.

AAminaSGitHub

81% match

Loading thumbnail…

05_D3 Stock show

This example animates a small multi-line stock chart, showing three fictional symbols (AIC, Mada, VIZ) over time. The animation initially draws each line progressively, then transitions into a “horizon” view, where each series is stacked and colored to show its magnitude and direction. The code uses d3.csv to load the data, d3.nest to group by symbol, and d3.svg.line and d3.svg.area to define the shapes. Animated transitions are driven by d3.timer and the transition method, with SVG elements for rendering.

AAbdul Salam Almadani

80% match

Loading thumbnail…

TP3

This example shows a stacked bar chart of average monthly stock prices for four companies over eleven years, with a click interaction that toggles between stacked and grouped modes. The bars animate smoothly between the two layouts using chained `transition` calls. It uses D3 v4’s `d3.nest()` to aggregate the CSV data, `d3.stack()` for stacking, and `d3.scaleBand`/`d3.scaleLinear` for positioning. The SVG rectangles transition their `x`, `y`, `width`, and `height` attributes over time.

AAlxClt

80% match