Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of React & D3 Vibecoding Starter

Public visualization

Viewing a saved revision (read-only)

7f242bd33aeb4b4fbefa90e3f86cab07

Fork of React & D3 Vibecoding Starter

0 stars0🌍 Public
NNita
Last edited Jun 17, 2025
Created on Jun 17, 2025

This interactive visualization recreates Charles Minard's classic 1869 flow map of Napoleon's 1812 Russian campaign, showing the diminishing size of the Grande Armée through advancing and retreating troop paths with width proportional to surviving soldiers. The React-based application embeds campaign data as constants and renders an SVG map with city markers, rivers, and temperature annotations during the retreat. D3.js v7 provides the area generator with Catmull-Rom curves for troop flows, scales, axes, and tooltip interactions, while React manages the component lifecycle and responsive dimensions through a ResizeObserver hook. The visualization also includes a chronological timeline of key campaign events.

AI-generated description