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.
AI-generated descriptionThe 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>