Skip to main content
SimilarExport ZIP
100%

D3 Show Reel

✓ Published0🌍 Public
NNpfn
Last edited Nov 27, 2017
Created on Nov 27, 2017

The D3 Show Reel cycles through ten chart types—lines, horizons, areas, stacked areas, streamgraph, overlapping areas, grouped bars, stacked bars, bars, and donut—using seamless transitions. It renders real monthly stock closing prices for Microsoft, Amazon, and IBM over ten years as animated SVG paths and shapes. The code uses d3.svg.line, d3.svg.area, d3.nest, d3.time.scale, and d3.timer to coordinate the morphing sequences, with color scales and clip paths for the horizon chart.

AI-generated description

The first 15 seconds of the D3 show reel. See full video at http://vimeo.com/29862153. Includes seamless transitions between the following visualization types:

  • lines
  • horizons
  • areas
  • stacked areas
  • streamgraph
  • overlapping areas
  • grouped bars
  • stacked bars
  • bars
  • donut

Admittedly, these aren’t the most useful visualizations; their purpose is not to inform but to demonstrate D3’s capability for producing dynamic visualizations with custom transitions. They do show real data (the monthly closing price for ten years’ worth of stock data), but I didn’t include axes for date or price. See the axis component for a better example. Also, the stacked visualizations aren’t especially meaningful, unless you imagine owning a portfolio with equal parts AAPL, AMZN, IBM and MSFT. Similarly, the bars and donuts represent the average price (or sum) during this time period.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/1256572'>D3 Show Reel</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

D3 Show Reel

The D3 Show Reel is a self-running visualization that cycles through ten chart types—lines, horizons, areas, stacked areas, streamgraph, overlapping areas, grouped bars, stacked bars, bars, and donut—using seamless animated transitions. Built with D3 v3 and rendered as SVG, it visualizes ten years of monthly stock closing prices for AAPL, AMZN, IBM, and MSFT, though axes are omitted to emphasize form over function. The piece demonstrates D3’s capacity for dynamic transitions and custom interpolation, moving from multi-line charts to horizons, stacked areas, and finally bars and a donut. Each transition is choreographed with a 2.5-second duration and 1-second delay, and the visualization is animated using a timer. Data is loaded from a CSV and nested by symbol. The author notes that while the data is real, the purpose is to showcase D3’s flexibility rather than meaningful analysis. The code is licensed under GPL-3.0.

EEssohanamKouyou
95% match
Loading thumbnail…

D3 Show Reel3

This example demonstrates D3’s ability to animate seamless transitions between ten chart types—lines, horizons, areas, stacked areas, streamgraph, overlapping areas, grouped and stacked bars, bars, and donut—using ten years of monthly closing stock prices for MSFT, AMZN, IBM, and AAPL. It renders as an SVG with timed transitions, leveraging `d3.svg.line`, `d3.svg.area`, `d3.scale.linear`, `d3.time.scale`, and `d3.nest` to reorganize and redraw the data. The code uses `setTimeout` to sequence each visualization, with axes omitted for clarity and the focus on morphing geometries rather than informing precise values.

EEssohanamKouyou
94% match
Loading thumbnail…

D3 Show Reel

This D3 show reel demonstrates a sequence of animated transitions between seven chart types—lines, horizons, areas, stacked areas, streamgraphs, overlapping areas, grouped bars, stacked bars, bars, and donuts—using ten years of monthly stock closing prices for AAPL, AMZN, IBM, and MSFT. The visualization cycles through each type with a 1.5-second transition, using SVG paths and smooth interpolation to morph between line charts, area charts, bar charts, and donut charts. Data is real but deliberately unadorned with axes or meaningful aggregation, prioritizing fluid motion over information content. The example highlights D3’s flexibility in building custom, dynamic transitions with minimal code.

JJoymangulJensen
93% match
Loading thumbnail…

D3 Show Reel

The D3 Show Reel demonstrates a sequence of animated transitions between ten visualization types—including line charts, stacked areas, streamgraphs, grouped bars, and a donut—using monthly stock closing prices for four tech companies over ten years. Built with D3 v3, the example leverages `d3.svg.line` and `d3.svg.area` generators, along with `d3.time.scale` for date scaling and `d3.nest` for grouping data by symbol. Each transition morphs the existing SVG elements with `transition()` calls, animating attributes like `d`, `fill-opacity`, and `transform` over 1.5-second durations. The result is a polished, dynamic showcase of D3’s flexibility for custom, data-driven motion graphics.

Mmbostock
93% 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
79% match
Loading thumbnail…

[animated charts] stocks from dataset

This animated visualization cycles through five chart types—area, empty area, multiple line, stacked, and stream—to display monthly stock prices for Microsoft, Amazon, and IBM from a CSV dataset. The sequence begins with a single area chart, then empties it to an outline, followed by a multi-line chart, a stacked area chart, and finally a streamgraph. Built with D3 v4, the code uses `d3.area`, `d3.nest`, and `d3.scaleOrdinal` to structure and render the data as SVG paths, with a `transition().duration()` driving the sequential playback.

NNpfn
79% 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
79% match
Loading thumbnail…

TP3_Correction

This example presents a sequence of animated stock-price charts for Microsoft, Amazon, and IBM, cycling between area, multi-line, stacked, and streamgraph views. Built with D3 v4, it loads monthly price data from a CSV and uses `d3.nest()` to group values by company symbol, with `d3.area()` and `d3.line()` for the drawn shapes. An SVG canvas renders all charts, with timed transitions (`transition.duration`) and color-coded series via `d3.scaleOrdinal`. The animation loops automatically, highlighting how the same data can be reshaped dynamically across different visual encodings.

BBarbierJeremy
79% match