100%

Fork of React & D3 Vibecoding Starter

✓ Published0🌍 Public

Last edited Jun 17, 2025

Created on Jun 17, 2025

Forked from React & D3 Vibecoding Starter

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

Napoleon's March to Moscow Visualization

This visualization depicts Napoleon's march to Moscow in 1812, showing the gradual decline in troop numbers during both advance and retreat phases.

The data is based on Charles Minard's famous visualization, which is considered one of the best statistical graphics ever created.

Key features:

Longitude on the x-axis
Troop count on the y-axis
Color-coding for advance and retreat phases
Temperature annotation for the retreat phase

The visualization shows how Napoleon's army was reduced from 422,000 to just 10,000 men during the campaign, with temperatures dropping to -30°C during the retreat.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of React & D3 Vibecoding Starter

This interactive data visualization recreates Minard's famous map of Napoleon's 1812 Russian campaign, showing the army's advance and retreat as colored paths whose thickness scales with troop count. A separate temperature chart aligns below the map by longitude, displaying readings with dates, while city labels mark key locations. Built with React and D3.js (v7), the code uses `d3.scaleLinear` and `d3.scaleSqrt` for coordinates and line width, `d3.line` for path generation, and `d3.csv` to load troop, temperature, and city data from CSV files.

NNita

91% match

Loading thumbnail…

Fork of React & D3 Vibecoding Starter

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.

NNita

89% match

Loading thumbnail…

Fork of React & D3 Vibecoding Starter

This example shows a simple bar chart of letter frequencies from a small CSV dataset. The chart uses a React component with hooks and a ResizeObserver for responsive dimensions. D3’s scaleBand and scaleLinear create the scales, while axisBottom and axisLeft render axes with gridlines. Clicking a bar toggles a selected state, changing its fill and opacity through transitions. The code integrates D3 selections with React state management, using modular rendering functions for the SVG, title, bars, and data loading.

NNita

82% match

Loading thumbnail…

Fork of React & D3 Vibecoding Starter

This example shows a bar chart of letter frequencies from a small CSV dataset. A React component manages the chart's container and state, while D3 v7 functions handle the core rendering: `scaleBand` and `scaleLinear` create the axes, `axisBottom` and `axisLeft` draw them, and `renderBarElements` builds the interactive bars. Clicking a bar toggles its selection, changing its fill color and the opacity of others. The chart is responsive, using a `ResizeObserver` to update dimensions.

NNita

82% match

Loading thumbnail…

Ancient Visualizations

This visualization recreates Minard's classic map of Napoleon's 1812 march to Moscow, showing army size through path width, advance and retreat directions in tan and blue, and a temperature chart during the retreat. The React app loads CSV data via `d3.csv` and renders an SVG using scales from `d3.scaleLinear` and line generators from `d3.line`. City markers, a legend, and temperature annotations support the narrative of troop attrition.

NNita

82% match

Loading thumbnail…

Fork of React & D3 Vibecoding Starter

A fork of the React & D3 v7 vibecoding starter shows a bar chart of the letter-to-count mapping in a CSV. It loads the data via D3's `csv`, renders bars, axes, and a title using React state and a `ResizeObserver` to size the SVG. Clicking a bar toggles its selection, highlighting it with a darker fill and dimming others.

Nnishanththouta16@gmail.com

81% match

Loading thumbnail…

Fork of React & D3 Vibecoding Starter

This example shows an interactive bar chart of letter frequencies loaded from a CSV file. D3 v7 parses the data with `d3.csv`, while React manages the component state and a `ResizeObserver` tracks container dimensions. Clicking a bar toggles its highlight by updating React state, which re-renders the SVG with adjusted fill and opacity. Axes are created with `d3.axisBottom` and `d3.axisLeft`, and scales using `d3.scaleBand` and `d3.scaleLinear`.

Ssravya7136@gmail.com

81% match

Loading thumbnail…

Fork of React & D3 Vibecoding Starter

This example shows an interactive bar chart of letter frequencies, where clicking a bar highlights it and dims the others. It renders a D3.js v7 visualization inside a React 19 component by creating an SVG with `d3.scaleBand` and `d3.scaleLinear`, drawing bars and axes, and updating fill colors and opacity via `setState`. Data comes from a CSV file loaded with `d3.csv`. The chart resizes responsively using a `ResizeObserver` via the custom `useDimensions` hook.

SSudharsana R

81% match