Recipes — Rosling Bubble Chart — Semiotic

Home · Getting Started · Charts · Features · Playground

This page requires JavaScript for interactive chart demos.

AI / Machine-readable docs: llms.txt · llms-full.txt · CLAUDE.md · schema.json · API Reference · Examples

View on GitHub · npx semiotic-ai for CLI access

Machine-readable page content

Canonical: https://semiotic.nteract.io/recipes/rosling-bubble-chart

Rosling Bubble Chart

Recipe

semioticreact

Hans Rosling's animated bubble charts are among the most celebrated data presentations ever made. But research consistently shows that the animation itself wasn't what made them work — Rosling's narration was. He directed attention, provided context, and created a story arc. Without him, viewers track 2-3 bubbles and miss everything else.

This recipe reproduces the value of Rosling's presentation using Semiotic's annotation system directly on the chart — no live narrator required. Each step layers three annotation types on a single BubbleChart: country labels, editorial callout cards, and historical trail paths with year markers.

Preview

1950: The Great Divide

In 1950, the world looks like two clusters. Rich countries in the upper-right live long and earn well. Everyone else is in the lower-left — poor and dying young. This is the ‘us and them’ Hans Rosling wanted to demolish.

1950

Why Animation Isn't Enough

Robertson et al. (2008, IEEE InfoVis) found that participants were more accurate with small multiples than animation for trend analysis. Animation was rated as more "fun" but produced worse analytical performance. Tversky, Morrison & Betrancourt (2002) found that animation rarely improves understanding — and when it does, the benefit comes from interactivity, not motion.

The core problem is change blindness: with 200 bubbles moving simultaneously, viewers can track at most 3-4 objects (Simons & Chabris, 1999). Everything else is lost. Rosling solved this by telling you exactly where to look — "Watch Bangladesh!" — turning an attention-overwhelmed animation into a guided experience.

Anatomy

Everything lives on a single BubbleChart. The recipe layers four Semiotic features to replace what Rosling did with his voice:

Widget annotations for country labels — type: "widget" annotations anchored to each bubble's data coordinates. These are the country names that appear next to highlighted bubbles, styled with the continent color and a textShadow halo for readability. Rosling pointed and said a name; the annotation does the same.
Callout card annotations (editorial notes) — A second layer of type: "widget" annotations that render styled <div> cards with interpretation ("Life exp. +18 yrs / GDP barely moved"). These are the key insight Rosling would deliver verbally at each pause — now persistent and re-readable.
Trail paths via canvasPreRenderers — When countries are highlighted, a dashed line traces their historical path through GDP/life-expectancy space, drawn on the canvas layer under the bubbles. Small dots mark each decade. This converts ephemeral temporal data into a persistent spatial mark — the single most valuable analytical feature in Gapminder.
Trail year markers — A third layer of widget annotations places tiny year labels at each historical position along the trail, so readers can see exactly when each shift happened without scrubbing.

The narration card above the chart and the pointStyle function (which dims non-highlighted bubbles to 12% opacity) complete the picture. Together, these five elements do what Rosling did with his voice, laser pointer, and dramatic pauses.

What Rosling Actually Did

Rosling's presentations followed a precise rhetorical structure:

Setup: Establish a misconception ("You think of it as 'us and them'")
Complication: Show data that seems to confirm it (1950 clusters)
Turning point: "But then watch what happens..." (China's health leap, HIV crisis)
Resolution: Present-day reality that contradicts the opening (clusters dissolved)

Crucially, he paused constantly. He never let the animation play straight through. Each pause was a moment to provide context, highlight a country, or foreshadow what was coming. The step-through controls in this recipe give readers the same editorial pacing — and the callout annotations deliver the interpretation he would have spoken aloud.

Customization

What	Where	How
Narration steps	`STEPS` array	Add/edit steps with `year`, `highlight`, `callouts`, `narration`
Callout content	`step.callouts`	Each callout has `country`, `label`, `dx`/`dy` offset
Trail appearance	`canvasPreRenderers`	Change dash pattern, line width, dot radius, or add gradient coloring
Countries & data	`RAW` array	Add more countries/years. Use real Gapminder data for production.
Continent colors	`CONTINENT_COLORS`	Map of continent name to hex color
Dim opacity	`pointStyle`	Change `0.12` to adjust non-highlighted bubble fade
Log scale	`frameProps.xScaleType`	Rosling used log income — change to `"linear"` for linear GDP
Playback speed	`setInterval` duration	Change `3500` ms per step (longer = more reading time)

Extending This Pattern

Push API for smooth transitions: Instead of swapping data per step, use ref.current.pushMany() with animate to smoothly tween bubbles between positions. Add pointIdAccessor="country" so the chart tracks identity across frames.
LinkedCharts + ContextLayout: Put the main bubble chart in the primary panel and a sparkline showing one country's GDP or life-expectancy trend in the context panel. Cross-link them with linkedHover.
onObservation: Capture hover events to dynamically update the narration panel with country-specific facts — bringing the interactive dimension closer to Rosling's responsive commentary.

The deeper lesson from Rosling: the chart is not the story. The chart is a stage. Annotations, highlighting, narration, and pacing are the performance. Semiotic gives you the stage and the spotlight — you provide the script.

Bubble Chart — size-encoded scatterplot
Scatterplot — simpler point chart
Linked Charts — coordinated views
Minard's Map — another narrative visualization recipe

Source Code

Abbreviated for readability — data arrays and steps are truncated. See the full runnable source in docs/src/examples/recipes/.

JSX

1 import React, { useState, useEffect, useRef, useMemo, useCallback } from "react"
2 import { BubbleChart, CategoryColorProvider } from "semiotic"
3 
4 // ── Data (8 countries x 8 decades) ──────────────────────────────────
5 const RAW = [
6  { country: "United States", continent: "Americas", year: 1950, gdp: 15000, life: 68, pop: 152 },
7  { country: "China", continent: "Asia", year: 1950, gdp: 450, life: 41, pop: 552 },
8  // ... see full source for all 64 rows
9 ]
10 
11 const CONTINENT_COLORS = {
12  "Americas": "#5DA5DA", "Asia": "#F15854",
13  "Africa": "#B276B2", "Europe": "#FAA43A",
14 }
15 
16 // Each step: year, highlights, narration text, and callout annotations
17 const STEPS = [
18  {
19  year: 1950, highlight: [],
20  title: "1950: The Great Divide",
21  narration: "Rich countries upper-right, everyone else lower-left...",
22  callouts: [
23  { country: "Sweden", label: "Rich, long-lived", dx: -10, dy: -30 },
24  { country: "Nigeria", label: "Poor, short-lived", dx: 10, dy: 20 },
25  ],
26  },
27  // ... 7 steps total (see full source)
28 ]
29 
30 function buildTrail(country, upToYear) {
31  return RAW.filter(d => d.country === country && d.year <= upToYear)
32 }
33 
34 export default function RoslingBubbleChart({ width = 800 }) {
35  const [stepIdx, setStepIdx] = useState(0)
36  const [playing, setPlaying] = useState(false)
37  const step = STEPS[stepIdx]
38  const currentData = RAW.filter(d => d.year === step.year)
39 
40  // Three layers of annotations on a single chart:
41  const annotations = useMemo(() => {
42  const result = []
43 
44  // 1. Country name labels (widget annotations at data coordinates)
45  for (const d of currentData) {
46  if (step.highlight.length === 0 || step.highlight.includes(d.country)) {
47  result.push({
48  type: "widget", gdp: d.gdp, life: d.life, dx: 15, dy: -6,
49  content: <span style={{ fontSize: 11, fontWeight: 600,
50  color: CONTINENT_COLORS[d.continent] }}>{d.country}</span>
51  })
52  }
53  }
54 
55  // 2. Callout cards (editorial notes anchored to bubbles)
56  for (const c of (step.callouts || [])) {
57  const d = currentData.find(r => r.country === c.country)
58  if (!d) continue
59  result.push({
60  type: "widget", gdp: d.gdp, life: d.life, dx: c.dx, dy: c.dy,
61  content: (
62  <div style={{
63  background: "var(--surface-2)", border: "1px solid var(--surface-3)",
64  borderRadius: 4, padding: "4px 8px", fontSize: 10, whiteSpace: "pre-line",
65  color: "var(--text-primary)", boxShadow: "0 1px 4px rgba(0,0,0,0.15)",
66  }}>{c.label}</div>
67  ),
68  })
69  }
70 
71  // 3. Trail year markers (small dots with year labels along the path)
72  for (const country of step.highlight) {
73  const trail = buildTrail(country, step.year)
74  for (const d of trail) {
75  if (d.year === step.year) continue
76  result.push({
77  type: "widget", gdp: d.gdp, life: d.life, dx: 0, dy: -10,
78  content: <span style={{ fontSize: 8, color: "var(--text-secondary)" }}>{d.year}</span>
79  })
80  }
81  }
82  return result
83  }, [currentData, step])
84 
85  // Trail lines drawn via canvasPreRenderers (dashed path through GDP/life space)
86  const canvasPreRenderers = useMemo(() => {
87  if (step.highlight.length === 0) return undefined
88  return [(ctx, nodes, scales) => {
89  if (!scales?.xScale || !scales?.yScale) return
90  for (const country of step.highlight) {
91  const trail = buildTrail(country, step.year)
92  if (trail.length < 2) continue
93  const color = CONTINENT_COLORS[trail[0].continent]
94  ctx.beginPath()
95  ctx.moveTo(scales.x(trail[0].gdp), scales.y(trail[0].life))
96  for (let i = 1; i < trail.length; i++)
97  ctx.lineTo(scales.x(trail[i].gdp), scales.y(trail[i].life))
98  ctx.strokeStyle = color; ctx.lineWidth = 2
99  ctx.globalAlpha = 0.4; ctx.setLineDash([4, 3]); ctx.stroke()
100  ctx.setLineDash([])
101  // Small dots at each historical position
102  for (let i = 0; i < trail.length - 1; i++) {
103  ctx.beginPath()
104  ctx.arc(scales.x(trail[i].gdp), scales.y(trail[i].life), 3, 0, Math.PI * 2)
105  ctx.fillStyle = color; ctx.globalAlpha = 0.5; ctx.fill()
106  }
107  }
108  }]
109  }, [step])
110 
111  // Dim non-highlighted bubbles
112  const pointStyle = (d) => ({
113  fill: CONTINENT_COLORS[d.continent],
114  fillOpacity: step.highlight.length === 0 || step.highlight.includes(d.country)
115  ? 0.75 : 0.12,
116  stroke: (step.highlight.length === 0 || step.highlight.includes(d.country))
117  ? "var(--surface-0)" : "transparent",
118  })
119 
120  return (
121  <div>
122  {/* Step controls + narration card + BubbleChart with all annotations */}
123  <CategoryColorProvider colors={CONTINENT_COLORS}>
124  <BubbleChart
125  data={currentData} xAccessor="gdp" yAccessor="life" sizeBy="pop"
126  sizeRange={[6, 50]} colorBy="continent" showLegend
127  xLabel="GDP per Capita (PPP)" yLabel="Life Expectancy"
128  width={width} height={500}
129  annotations={annotations}
130  frameProps={{ pointStyle, xScaleType: "log",
131  xExtent: [300, 70000], yExtent: [30, 90],
132  ...(canvasPreRenderers && { canvasPreRenderers }) }}
133  />
134  </CategoryColorProvider>
135  </div>
136  )
137 }