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.
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.