Skip to main content
100%

StackedChart

✓ Published0🌍 Public
Aadilyalcin
Last edited Jul 8, 2014
Created on Jul 8, 2014

This interactive visualization displays four layers of synthetic time-series data, switching between stacked and grouped bar layouts through animated transitions. Users toggle between modes via radio buttons, with sequenced transitions preserving object constancy as bars morph between the two arrangements. The example uses D3 v3 with SVG rendering, employing `d3.layout.stack` for stacking, ordinal and linear scales for positioning, and chained `transition()` calls with staggered delays to animate rectangle positions, widths, and heights. Colors derive from a linear scale spanning blue-gray tones, while data generation uses a bump function inspired by Lee Byron’s streamgraph test data.

AI-generated description

Switch between stacked and grouped layouts using sequenced transitions! Animations preserve object constancy and allow the user to follow the data across views. Animation design by Heer and Robertson. Colors and data generation inspired by Byron and Wattenberg.

Similar vizzes