Animation Charts

Bring data to life with motion that reveals change over time. Animated charts show transitions between states, making it easy to follow individual elements as they rise, fall, or flow through a system. Use these when static charts would require multiple frames or when the story is about movement itself.

Bar Race

Animate ranked bars as they compete over time periods. Bar race charts show how rankings shift: bars grow and shrink while reordering to maintain rank order. They create engaging narratives from longitudinal data—watch countries climb GDP rankings, products gain market share, or athletes swap positions in cumulative standings.

Configuration

Parameter	Type	Default	Description
type	string	-	'bar-race'
x	string	required	Category/item field
y	string	required	Value field
time	string	required	Time period field
topN	number	10	Number of bars to show
duration	number	500	Animation duration (ms)
colorScheme	string	'schemeCategory10'	Color palette

Basic Example

View Source

type: bar-race
engine: d3
x: country
y: population
time: year
title: Population by Country
topN: 5
duration: 750
width: 550
height: 400
data:
  source: '[{"country": "China", "population": 1200, "year": "2020"}, {"country": "India", "population": 1100, "year": "2020"}, {"country": "USA", "population": 330, "year": "2020"}, {"country": "Brazil", "population": 210, "year": "2020"}, {"country": "Russia", "population": 145, "year": "2020"}, {"country": "China", "population": 1250, "year": "2021"}, {"country": "India", "population": 1150, "year": "2021"}, {"country": "USA", "population": 332, "year": "2021"}, {"country": "Brazil", "population": 212, "year": "2021"}, {"country": "Russia", "population": 144, "year": "2021"}, {"country": "China", "population": 1280, "year": "2022"}, {"country": "India", "population": 1200, "year": "2022"}, {"country": "USA", "population": 335, "year": "2022"}, {"country": "Brazil", "population": 215, "year": "2022"}, {"country": "Russia", "population": 143, "year": "2022"}]'

Streamgraph

Stack area layers around a shifting baseline that minimizes visual noise. Streamgraphs create organic, flowing shapes that emphasize the ebb and flow of categorical data over time. The wiggling baseline trades precise readability for aesthetic impact, making streamgraphs ideal for showing general trends in music genres, topic popularity, or market composition.

Configuration

Parameter	Type	Default	Description
type	string	-	'streamgraph'
x	string	required	Time/x-axis field
y	string	required	Value field
color	string	required	Category field for stacking
offset	string	'wiggle'	Stack offset method
colorScheme	string	'schemeCategory10'	Color palette

Offset Methods

• wiggle - Minimize weighted wiggle (default)
• silhouette - Center around zero
• expand - Normalize to 100%
• none - Zero baseline

Basic Example

View Source

type: streamgraph
engine: d3
x: month
y: listens
color: genre
title: Music Listening Over Time
offset: wiggle
width: 550
height: 350
data:
  source: '[{"month": "Jan", "listens": 120, "genre": "Pop"}, {"month": "Jan", "listens": 80, "genre": "Rock"}, {"month": "Jan", "listens": 60, "genre": "Jazz"}, {"month": "Feb", "listens": 140, "genre": "Pop"}, {"month": "Feb", "listens": 85, "genre": "Rock"}, {"month": "Feb", "listens": 55, "genre": "Jazz"}, {"month": "Mar", "listens": 130, "genre": "Pop"}, {"month": "Mar", "listens": 95, "genre": "Rock"}, {"month": "Mar", "listens": 70, "genre": "Jazz"}, {"month": "Apr", "listens": 150, "genre": "Pop"}, {"month": "Apr", "listens": 90, "genre": "Rock"}, {"month": "Apr", "listens": 65, "genre": "Jazz"}]'

Normalized

View Source

type: streamgraph
engine: d3
x: month
y: sales
color: product
offset: expand
title: Market Share Over Time
colorScheme: schemeTableau10
width: 550
height: 350
data:
  source: '[{"month": "Q1", "sales": 100, "product": "Alpha"}, {"month": "Q1", "sales": 80, "product": "Beta"}, {"month": "Q1", "sales": 60, "product": "Gamma"}, {"month": "Q2", "sales": 120, "product": "Alpha"}, {"month": "Q2", "sales": 70, "product": "Beta"}, {"month": "Q2", "sales": 75, "product": "Gamma"}, {"month": "Q3", "sales": 110, "product": "Alpha"}, {"month": "Q3", "sales": 90, "product": "Beta"}, {"month": "Q3", "sales": 80, "product": "Gamma"}, {"month": "Q4", "sales": 130, "product": "Alpha"}, {"month": "Q4", "sales": 85, "product": "Beta"}, {"month": "Q4", "sales": 95, "product": "Gamma"}]'

---

Type Aliases

Primary	Aliases
bar-race	racing-bar, animation/bar-race
streamgraph	stream, animation/streamgraph