Old school D3 from simpler times

All examples By author By category About

kgryte

Full window Github gist

Nightingale and the Crimean War + D3.js

Nightingale and the Crimean War

D3.js visualizations of data from Florence Nightingale's "A contribution to the sanitary history of the British army during the late war with Russia".

Several works served as inspiration:

Mike Bostock's protovis implementations: polar area diagram, stacked area chart, grouped bar chart, and line chart
Mike Bostock's stacked bar chart using D3.js.
Understanding Uncertainty's flash implementation

Note that the data used by Bostock is not correct, as documented elsewhere.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Nightingale and the Crimean War</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 class="clearfix">

<script type="text/javascript">
			var line = Chart.line(),
				stackedArea = Chart.stackedArea(),
				stackedBar = Chart.stackedBar(),
				groupedBar = Chart.groupedBar(),
				multiplePie = Chart.multiplePie(),
				multipleDonut = Chart.multipleDonut(),
				height = 400,
				format = d3.time.format('%m/%Y'),
				causes = ['other', 'wounds', 'disease'],
				xLabel = 'April 1854 - March 1856',
				yLabel = 'Annual Rate of Mortality per 1000',
				yTicks = 5,
				dataLayers;

// Add a title:
			d3.select('body').append('h2')
				.attr('class', 'title')
				.html( 'Diagrams <span class="small">of the</span> Causes <span class="small">of</span> Mortality <span class="small">in the</span> Army <span class="small">of the</span> East');

// Load the JSON data:
			d3.json( 'data.json', function( data ) {
				// Data from: https://ocp.hul.harvard.edu/dl/contagion/010164675

// Format the date and rework the data:
				var scalar;
				data.forEach( function(d) { 
					d.date = format.parse(d.date);
					
					// Calculate the average annual mortality, as done by Nightingale:
					// https://understandinguncertainty.org/node/214 
					scalar = 1000*12 / d.army_size;
					d.disease = d.disease * scalar;
					d.wounds  = d.wounds  * scalar;
					d.other   = d.other   * scalar;
				} );

// Format the data in terms of layers (by cause):
				dataLayers = causes.map( function(cause) {
					return data.map( function(d) {
						return {
							'x': d.date,
							'y': d[cause],
							'label': cause
						};
					});
				});

// STACKED BAR CHART //

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

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

// Update the chart generator settings:
				stackedBar.legend( causes )
					.width( width )
					.height( height )
					.xDomain( dataLayers[0].map( function(d) { return d.x; } ) )
					.xScale( d3.scale.ordinal() )
					.xLabel( xLabel )
					.yTicks( yTicks )
					.yLabel( yLabel );

// Bind the data and generate a new chart:
				figure.datum( dataLayers )
					.call( stackedBar );

// GROUPED BAR CHART //

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

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

// Update the chart generator settings:
				groupedBar.legend( causes )
					.width( width )
					.height( height )
					.xDomain( dataLayers[0].map( function(d) { return d.x; } ) )
					.xScale( d3.scale.ordinal() )
					.xLabel( xLabel )
					.yTicks( yTicks )
					.yLabel( yLabel );

// Bind the data and generate a new chart:
				figure.datum( dataLayers )
					.call( groupedBar );

// STACKED AREA CHART //

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

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

// Update the chart generator settings:
				stackedArea.legend( causes )
					.width( width )
					.height( height )
					.xScale( d3.time.scale() )
					.xLabel( xLabel )
					.yTicks( yTicks )
					.yLabel( yLabel );

// Bind the data and generate a new chart:
				figure.datum( dataLayers )
					.call( stackedArea );

// LINE CHART //

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

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

// Update the chart generator settings:
				line.legend( causes )
					.width( width )
					.height( height )
					.xScale( d3.time.scale() )
					.xLabel( xLabel )
					.yTicks( yTicks )
					.yLabel( yLabel );

// Bind the data and generate a new chart:
				figure.datum( dataLayers )
					.call( line );

// MULTIPLE PIES //

// Prepare the data:
				var _data = data.map( function(d) {
					var sum = d.disease + d.wounds + d.other,
						radius = Math.sqrt(sum / Math.PI);
					return {
						'labels': ['disease', 'wounds', 'other'],
						'r': radius,
						'x': d3.time.format('%b')(d.date),
						'values': [d.disease, d.wounds, d.other]
					};
				});

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

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

// Update the chart generator settings:
				multiplePie.legend( ['disease', 'wounds', 'other'] )
					.width( width )
					.height( 600 )
					.xLabel( xLabel )
					.rDomain( [0, d3.max( _data, function(d) { return d.r; })] );

// Bind the data and generate a new chart:
				figure.datum( _data )
					.call( multiplePie );

// MULTIPLE DONUTS //

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

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

// Update the chart generator settings:
				multipleDonut.legend( ['disease', 'wounds', 'other'] )
					.width( width )
					.height( 600 )
					.xLabel( xLabel )
					.rDomain( [0, d3.max( _data, function(d) { return d.r; })] );

// Bind the data and generate a new chart:
				figure.datum( _data )
					.call( multipleDonut );	
					
			});

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