Skip to main content
SimilarExport ZIP
100%

D3 Show Reel

✓ Published0🌍 Public
JJoymangulJensen
Last edited Nov 28, 2017
Created on Nov 28, 2017

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.

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

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…

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

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

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

MasteringD3-Resusable-ProD3js-2.3E

This example demonstrates a reusable bar code chart, a temporal visualization of daily stock-mention data for companies like AAPL and MSFT, alongside a table showing name, today’s mentions, and mentions-per-hour. It applies the ProD3.js pattern and Mike Bostock’s reusable chart principles, using d3.scaleTime for the date axis and d3.scaleOrdinal with d3.schemeCategory10 for coloring. The SVG renders animated bar lines per data row within an HTML table via a foreignObject, with D3 v5 managing scales, axes, and dispatcher events.

JJimMaltby
76% 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
75% match