Minard and Napolean's 1812 March + D3.js

Napolean's March

A D3.js recreation of Charles Minard's Napolean's 1812 March.

Data from Wilkinson's The Grammar of Graphics.

Several works provided inspiration; see Michael Friendly's Re-visions of Minard.

Note that this implementation uses several different data files. Included are both original JSON files and associated GeoJSON files. For the army size labels, the data has been massaged some to agree with the (edited) army movements (data from Mike Bostock's Protovis implementation). River data is from Natural Earth; admittedly, the river data is incomplete with portions of rivers missing. Currently, the country data is the entire world. This is unnecessary, as the scale factor is so high. Additionally, the resolution is low. An improvement would be a more limited and better set of country data.

The implementation only makes time explicit for Napolean's retreat, as in the original.

Concerning interaction, all layers support hover interaction to provide focus. Controls toggle whether a layer is displayed. By default, all layers are displayed.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Napolean's March</title>
		
		<link href='https://fonts.googleapis.com/css?family=Cabin:500' rel='stylesheet' type='text/css'>
		<link rel="stylesheet" type="text/css" href="reset.css">
		<link rel="stylesheet" type="text/css" href="style.css">
		
		<script type="text/javascript" src="d3.min.js"></script>
		
		<script type="text/javascript" src="script.js"></script>
	</head>
	<body>	
		<h1>Napolean's March</h1>
		<script type="text/javascript">

var map = Chart.geo(),
				temp = Chart.temp(),
				height = 500;

// Append a new figure to the DOM:
			figure = d3.select( 'body' )
				.append( 'figure' )
					.attr('class', 'chart');

// Get the figure width:
			width = parseInt( figure.style( 'width' ), 10 );

// Update the chart generator settings:
			map.width( width )
				.height( height );

// Generate a new chart:
			figure.call( map );

// Load the march data:
			d3.json('temperature.json', function( data ) {

// Append a new figure to the DOM:
				figure = d3.select( 'body' )
					.append( 'figure' )
						.attr('class', 'chart');

// Get the figure width:
				width = parseInt( figure.style( 'width' ), 10 );

// Update the chart generator settings:
				temp.width( width )
					.height( 200 )
					.yLabel( 'Temp in Celsius')
					.xLabel( 'Longitude')
					.x( function(d) { return d.lon; })
					.y( function(d) { return d.temp; })
					.label( function(d) { return d.date; });

// Generate a new chart:
				figure.datum( data )
					.call( temp );
			
			});

</script>
	</body>
</html>