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)

6733fa80340243088dff07c3c10d7137

Fork of React & D3 Vibecoding Starter

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

This example recreates Charles Minard’s classic 1812 Napoleon march chart, tracing army size against longitude for both the advance to Moscow and the retreat, with a temperature annotation at the coldest point. The D3.js v7 code uses `scaleLinear` for axes, `scaleOrdinal` for the advance/retreat color encoding, and `curveCatmullRom` line smoothing. A React wrapper in `app.jsx` uses a `ResizeObserver` to feed container dimensions into the D3 rendering pipeline, which builds axes, legend, and the line-and-circle marks. The data is loaded from a CSV via `d3.csv`.

AI-generated description