Six views of the same dataset: 5,444 bilateral trade flows between 198 countries, from the CEPII Gravity dataset (2020). Each rendering treats the $16.5 trillion in global trade volume as a different kind of physical phenomenon: particle streams, bundled arcs, vortex hubs, chord relationships.
| File | Title | Technique |
|---|---|---|
index.html |
All Roads | Canvas particle flow field — particles stream directionally, distance from source controls color intensity |
curl.html |
Curl | Curl noise particles — trade routes become turbulent fluid fields |
vortex.html |
Vortex | Major trade hubs as vortex spirals — particles orbit and arc between nodes |
bundling.html |
Bundling | Hierarchical edge bundling on a radial layout — arcs group by continent before branching to partners |
chord.html |
Chord | Chord diagram with quadratic curves — ribbon width encodes bilateral trade volume |
routes.html |
Routes | Geographic route visualization — flows drawn as arcs on a world layout |
- Source: CEPII Gravity V202211
- Year: 2020
- Countries: 198
- Trade flows: 5,444 bilateral pairs
- Total volume: $16.5 trillion
- File:
trade-data-real.js(28,616 lines, shared by all six views)
Country nodes are colored by continent: Europe red, Asia amber, Africa green, Americas purple.
- Hover over a country node to highlight its trade connections
- Particle density and trail settings are adjustable via the info panel
- Click the info button (top right) for dataset details and navigation links
All six files are pure Canvas 2D, no external visualization library. Particle systems use a semi-transparent rect overlay for trail effects rather than a full canvas clear each frame:
ctx.fillStyle = 'rgba(10, 14, 26, 0.05)';
ctx.fillRect(0, 0, w, h);The flow field in index.html uses a 20px grid with directional vectors computed from trade route angles. Each particle follows the field gradient, creating emergent stream patterns without explicit path drawing.
Background: #0a0e1a (deep navy). Font: Open Sans for titles, JetBrains Mono for data values.