Skip to main content
SimilarExport ZIP
100%

D3 Show Reel

✓ Published0🌍 Public
AAjayyy
Last edited Jul 28, 2019
Created on Jul 28, 2019

This visualization demonstrates D3’s ability to create smooth, animated transitions between ten different chart types—lines, horizons, areas, stacked areas, streamgraphs, overlapping areas, grouped bars, stacked bars, bars, and a donut—using real monthly stock prices for MSFT, AMZN, IBM, and AAPL. The data is drawn from a CSV file and rendered as SVG. The code relies on D3 v4 primitives such as `d3.line`, `d3.area`, `d3.scaleTime`, `d3.scaleLinear`, `d3.nest`, and `d3.timer` to orchestrate the seamless morphing effects. No axes are included, emphasizing form over function.

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>

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

gpl-3.0 Licensed

Similar vizzes

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

D3 Show Reel

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.

NNpfn
94% match
Loading thumbnail…

D3 Show Reel

This example animates ten years of monthly stock closing prices for four tech companies, seamlessly transitioning through a series of chart types—lines, horizons, areas, stacked areas, streamgraphs, overlapping areas, grouped bars, stacked bars, bars, and a donut. It uses D3 v3 with SVG and custom transitions, driven by `d3.svg.line`, `d3.svg.area`, and `d3.timer`. The data comes from a CSV file, and the visualization demonstrates D3’s ability to morph between representations without axes, prioritizing motion over information.

AAjayyy
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…

P3

This example animates monthly stock prices for Microsoft, Amazon, and IBM, initially drawing lines by progressively revealing data points, then transitioning into filled area charts. The visualization uses the D3.js v3 library with SVG rendering, employing the `d3.svg.line` and `d3.svg.area` generators for line and area paths, and `d3.time.scale` and `d3.scale.linear` for axes. The animation leverages `d3.timer` to incrementally update the line, followed by clipping and transitions that convert the lines into stacked horizon charts.

SStephenMaturrin
81% 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
81% match