Charles Joseph Minard's 1869 flow map of Napoleon's Russian campaign is one of the most-cited visualizations in the history of statistical graphics. Tufte called it "the best statistical graphic ever drawn." It packs six variables into a single image: the path of the army, the direction of march, the size of the army at each point, the location of each town, temperature on the retreat, and time. The chart is what data visualization can be when every line on the page is doing structural work.
This entry is a faithful recreation in Semiotic using theFlowMap component with a tile basemap and animated particles, cross-linked with aConnectedScatterplot of temperature vs. casualties. The point of recreating Minard isn't nostalgia: doing it forces you to use every composition primitive Semiotic ships (linked hover, shared categories, geo + XY in the same view, particle systems for direction-on-static-paths) which is exactly the bundle most real dashboards need.
Why this matters
Minard's map argues that "data visualization" isn't about chart types but rather about chart strategies. The encoding doesn't fight the data. The composition isn't "a map plus a line chart"; it's a single graphic where the geographic shape carries the spatial story and the temperature strip carries the punchline. When you compose Semiotic charts viaLinkedCharts andCategoryColorProvider, you're reaching for the same trick: two charts sharing a coordinate system and a categorical encoding so they read as one composition.
Preview
Anatomy
The recipe layers four Semiotic features:
- FlowMap + tiles use flow edges with
strokeWidth proportional to troop survivors (Minard's signature encoding), rendered over an OpenStreetMap basemap via tileURL. - Particles uses
showParticles to animate dots flowing along each route segment, giving the static map a sense of movement and direction. - ConnectedScatterplot presents Minard's original (and to be clear orientalist) claim that it was the weather that defeated Napoleon and not the Russians. The retreat temperature/casualty relationship is rendered as a connected scatterplot (viridis-colored by order). The 4:1 aspect ratio echoes Minard's original strip chart below the map.
- LinkedCharts means that hovering on a flow segment on the map highlights the corresponding city in the scatterplot, and vice versa.
Customization
| What | Where | How |
|---|
| Flow thickness | edgeWidthRange | Set [min, max] pixel width (default: [1, 8]) |
| Advance/retreat colors | CategoryColorProvider | Change the colors map (default: tan + black) |
| Particle speed | particleStyle.speedMultiplier | Higher = faster flow animation |
| Tile provider | tileURL | Replace with Stadia, CartoDB, or custom tile server |
| Scatterplot height | chartHeight | Change the ratio (default: width * 0.22) |
| Cross-highlight fields | linkedHover.fields | Change which fields link the two charts |
How it works
FlowMap converts node coordinates + flow edges into projected line segments on a Mercator tile basemap. The lineStyle function in frameProps mapssurvivors to strokeWidth, reproducing Minard's proportional-width encoding.
showParticles enables the geo particle system, which spawns dots that travel along each polyline path. Particle color inherits from the line stroke when set to"source".
The ConnectedScatterplot below plots retreat cities ordered by stage, with temperature on the x-axis and surviving troops on the y-axis. Viridis coloring encodes the progression from Moscow (purple) to Kowno (yellow).
Both charts share the "city-hl" selection via LinkedCharts. Hovering either chart highlights matching data in the other.
Streaming version
The same campaign data can be plotted progressively using StreamGeoFrame andConnectedScatterplot. Each step adds a march segment to the map using the push API. The retreat scatterplot appears once the army turns back from Moscow.
Use Play for automatic playback (600 ms per segment), Stepto advance one segment at a time, or Reset to start over. The map uses bounded lines and points props that grow with each step, while the scatterplot accumulates retreat data points as they are revealed.