The World a Pyre

Hover over each bubble to see a total. The data is from the Wikipedia page below.

In this period, the colonial powers ruled various countries in Asia and Africa. The totals for these onetime colonies are overwhelmingly civilian deaths, with the colonizing power's deaths accounted for in the "mother" country. Thus, you can observe in this graph very high civilian casualties in the Asia-Pacific theater of war and the proportionally gigantic amount of death that the colonized populations suffered compared to those who controlled them.

From Wikipedia

World War II was the deadliest military conflict in history in absolute terms of total casualties. Over 60 million people were killed, which was about 3% of the 1940 world population (est. 2.3 billion). The tables below give a detailed country-by-country count of human losses. World War II fatality statistics vary, with estimates of total deaths ranging from 50 million to more than 80 million. The higher figure of over 80 million includes deaths from war-related disease and famine. Civilians killed totalled 50 to 55 million, including 19 to 28 million from war-related disease and famine. Total combat deaths: from 21 to 25 million, including deaths in captivity of about 5 million prisoners of war.

Recent historical scholarship has shed new light on the topic of Second World War casualties. Research in Russia since the collapse of the Soviet Union has caused a revision of estimates of Soviet WW2 fatalities. According to Russian government figures, USSR losses within postwar borders now stand at 26.6 million. In August 2009 the Polish Institute of National Remembrance (IPN) researchers estimated Poland's dead at between 5.6 and 5.8 million. Historian Rüdiger Overmans of the German Armed Forces Military History Research Office published a study in 2000 that estimated the German military dead and missing at 5.3 million, including 900,000 men conscripted from outside of Germany's 1937 borders, in Austria, and in east-central Europe. The People's Republic of China puts its war dead at 20 million, while the Japanese government puts its casualties due to the war at 3.1 million.

Featured on graphme

Built with blockbuilder.org

forked from nbremer's block: Gooey effect - Data visualization showcase

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		
		
		<link href='https://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
		<link href='https://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
	
		<style>
			body {
				font-family: 'Open Sans', sans-serif;
				text-align: center;
				font-weight: 300;
			}
			
		  	.title {
		    	font-size: 30px;
		    	color: #4F4F4F;
		  	}

.subtitle {
		    	font-size: 14px;
		    	color: #AAAAAA;
				padding-bottom: 15px;
		  	}

.geo-path {
				stroke: white;
				stroke-width: 0.5px;
				stroke-opacity: 1;
				fill: #C0AA91;
				fill-opacity: 1;
			}

.cities,  .cityCover{
				fill: #cc0000;
			}

.label {
				font-size: 18px;
				text-anchor: middle;
				fill: #707070;
				font-family: 'Poiret One', cursive;
				font-weight: 400;
			}
        .d3-tip {
  font-family: "Helvetica Neue";
  line-height: 1;
  font-weight: bold;
  padding: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
  pointer-events: none;
}
/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.8);
  position: absolute;
  pointer-events: none;
}
/* Northward tooltips */
.d3-tip.n:after {
  content: "\25BC";
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
  text-align: center;
}
/* Eastward tooltips */
.d3-tip.e:after {
  content: "\25C0";
  margin: -4px 0 0 0;
  top: 50%;
  left: -8px;
}
/* Southward tooltips */
.d3-tip.s:after {
  content: "\25B2";
  margin: 0 0 1px 0;
  top: -8px;
  left: 0;
  text-align: center;
}
/* Westward tooltips */
.d3-tip.w:after {
  content: "\25B6";
  margin: -4px 0 0 -1px;
  top: 50%;
  left: 100%;
}
		</style>
	
		
		
		<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.6.3/d3-tip.min.js"></script>
	</head>	
	<body>

<div class="title">WWII Military & Civilian Dead</div>
		<div class="subtitle">in countries with deaths > 80,000</div>		
		<div id="chart"></div>
		
		<script src="countriesMap.js"></script>
		<script src="deaths.js"></script>
		<script language="javascript" type="text/javascript">

///////////////////////////////////////////////////////////////////////////
			//////////////////// Set up and initiate svg containers ///////////////////
			///////////////////////////////////////////////////////////////////////////	
var format = d3.format(".2s");
      var tip = d3.tip()
  .attr('class', 'd3-tip')
  .direction('s')
  .html(function(d) {
    return "<p><strong>" + d.country + "</strong></p><p>" + format(d.deaths) + " dead</p>";
  });
			var margin  = {
				top: 100,
				right: 0,
				bottom: 0,
				left: 0
			};
			var width = 960 - margin.left - margin.right,
				height = 600 - margin.top - margin.bottom;
						
			//SVG container
			var svg = d3.select('#chart')
				.append("svg")
				.attr("width", width + margin.left + margin.right)
				.attr("height", height + margin.top + margin.bottom)
				.append("g").call(tip)
				.attr("transform", "translate(" + (margin.left) + "," + (margin.top) + ")");

///////////////////////////////////////////////////////////////////////////
			///////////////////////////// Create filter ///////////////////////////////
			///////////////////////////////////////////////////////////////////////////

//SVG filter for the gooey effect
			//Code taken from https://tympanus.net/codrops/2015/03/10/creative-gooey-effects/
			var defs = svg.append("defs");
			var filter = defs.append("filter").attr("id","gooeyCodeFilter");
			filter.append("feGaussianBlur")
				.attr("in","SourceGraphic")
				.attr("stdDeviation","10")
				//to fix safari: https://stackoverflow.com/questions/24295043/svg-gaussian-blur-in-safari-unexpectedly-lightens-image
				.attr("color-interpolation-filters","sRGB") 
				.attr("result","blur");
			filter.append("feColorMatrix")
				.attr("class", "blurValues")
				.attr("in","blur")
				.attr("mode","matrix")
				.attr("values","1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -5")
				.attr("result","gooey");
			filter.append("feBlend")
				.attr("in","SourceGraphic")
				.attr("in2","gooey")
				.attr("operator","atop");

///////////////////////////////////////////////////////////////////////////
			//////////////////////////// Set-up Map /////////////////////////////////
			///////////////////////////////////////////////////////////////////////////

//Variables for the map
			var projection = d3.geo.mercator()
					.scale(170)
					.translate([480,230]);
	  
			var path = d3.geo.path()
					.projection(projection);
	
			var map = svg.append("g")
						.attr("class", "map");

//Initiate the world map
			map.selectAll(".geo-path")
				.data(countriesMap[0].features)
				.enter().append("path")
					.attr("class", function(d) { return "geo-path" + " " + d.id; })
					.attr("id", function(d) { return d.properties.name; })
					.attr("d", path)
					.style("stroke-opacity", 1)
					.style("fill-opacity", 0.5);

///////////////////////////////////////////////////////////////////////////
			//////////////////////////////// Cities ///////////////////////////////////
			///////////////////////////////////////////////////////////////////////////

//Radius scale
			var rScale = d3.scale.sqrt()
				.range([0,20])
				.domain([0, d3.max(deaths, function(d) { return d.deaths; })]);

//Put the city locations into the data itself
			deaths.forEach(function(d,i) {
					d.radius = rScale(d.deaths);
					d.x = projection([d.longitude, d.latitude])[0];
					d.y = projection([d.longitude, d.latitude])[1];
			});

//Wrapper for the cities
			var cityWrapper = svg.append("g")
				.attr("class", "cityWrapper")
				.style("filter", "url(#gooeyCodeFilter)");
				
			//Place the city circles
			var cities = cityWrapper.selectAll(".cities")
				.data(deaths)
				.enter().append("circle")
      	.on('mouseover', tip.show)
     		.on('mouseout', tip.hide)
				.attr("class", "cities")
				.attr("r", function(d) { return d.radius ;})
				.attr("cx", projection([0,0])[0])
				.attr("cy", projection([0,0])[1])
				.style("opacity", 1);

var coverCirleRadius = 30;
			//Circle over all others
			cityWrapper.append("circle")
				.attr("class", "cityCover")
				.attr("r", coverCirleRadius)
				.attr("cx", projection([0,0])[0])
				.attr("cy", projection([0,0])[1]);

///////////////////////////////////////////////////////////////////////////
			/////////////////////////// Country Labels ////////////////////////////////
			///////////////////////////////////////////////////////////////////////////

//Calculate the centers for each country
			var centers = getCenters("deaths", [width, height/0.8]);
			centers.forEach(function(d) {
					d.y = d.y - 100;
					d.x = d.x + 0;
			});//centers forEach

//Wrapper for the country labels
			var labelWrapper = svg.append("g")
				.attr("class", "labelWrapper");
				
			//Append the country labels
		    labelWrapper.selectAll(".label")
		      	.data(centers)
		      	.enter().append("text")
		      	.attr("class", "label")
		      	.style("opacity", 0)
		      	.attr("transform", function (d) { return "translate(" + (d.x) + ", " + (d.y - 30) + ")"; })
		      	.text(function (d) { return d.name });
																			
			///////////////////////////////////////////////////////////////////////////
			/////////////////////////// Set-up the force //////////////////////////////
			///////////////////////////////////////////////////////////////////////////

var force = d3.layout.force()
				.gravity(.02)
		    	.charge(0)
		    	.on("tick", tick(centers, "deaths"));	
		
			var padding = 0;
			var maxRadius = d3.max(deaths, function(d) { return d.radius; });

///////////////////////////////////////////////////////////////////////////
			///////////////////////////// Do the loop /////////////////////////////////
			///////////////////////////////////////////////////////////////////////////	
					
			loop();	
			setInterval(loop, 15000);
			
			function loop() {
				placeCities();
				setTimeout(clusterCountry, 7000);
				setTimeout(backToCenter, 12000);
			}//loop
						
			///////////////////////////////////////////////////////////////////////////
			/////////////////////////// Animation steps ///////////////////////////////
			///////////////////////////////////////////////////////////////////////////	
					
			//Move the cities from the center to their actual locations
			function placeCities () {

//Stop the force layout (in case you move backward)
				force.stop();

//Make the cover circle shrink
				d3.selectAll(".cityCover")
						.transition().duration(2000)
						.attr("r", 0);

//Put the cities in their geo location
				d3.selectAll(".cities")
					.transition("move").duration(2000)
					.delay(function(d,i) { return i*20; })
					.attr("r", function(d) {
						return d.radius = rScale(d.deaths);
					})
					.attr("cx", function(d) {
						return d.x = projection([d.longitude, d.latitude])[0];
					})
					.attr("cy", function(d) {
						return d.y = projection([d.longitude, d.latitude])[1];
					});
						
				//Around the end of the transition above make the circles see-through a bit
				d3.selectAll(".cities")
					.transition("dim").duration(2000).delay(4000)
					.style("opacity", 0.8);

//"Remove" gooey filter from cities during the transition
				//So at the end they do not appear to melt together anymore
				d3.selectAll(".blurValues")
					.transition().duration(4000)
					.attrTween("values", function() { 
						return d3.interpolateString("1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -5", 
													"1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 6 -5"); 
					});

}//placeCities

//Cluster all the cities based on the country
			function clusterCountry() {

///Start force again
				force.start();

//Dim the map
				d3.selectAll(".geo-path")
					.transition().duration(1000)
					.style("fill-opacity", 0);
					
				//Show the labels
				d3.selectAll(".label")
					.transition().duration(500)
					.style("opacity", 1);

d3.selectAll(".cities")
					.transition().duration(1000)
					.style("opacity", 1);

//Reset gooey filter values back to a visible "gooey" effect
			   	d3.selectAll(".blurValues")
					.transition().duration(2000)
					.attrTween("values", function() { 
						return d3.interpolateString("1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 6 -5", 
													"1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 35 -6"); 
					});

}//clusterCountry

//Move the circles back to the center location again
			function backToCenter () {

//Stop the force layout
				force.stop();

//Hide labels
				d3.selectAll(".label")
					.transition().duration(500)
					.style("opacity", 0);

//Show map
				d3.selectAll(".geo-path")
					.transition().duration(1000)
					.style("fill-opacity", 0.5);
				
			   	//Make the cover cirlce to its true size again
			    d3.selectAll(".cityCover")
					.transition().duration(3000).delay(500)
					.attr("r", coverCirleRadius);

//Move the cities to the 0,0 coordinate
				d3.selectAll(".cities")
					.transition()
					.duration(2000).delay(function(d,i) { return i*10; })
					.attr("cx", projection([0, 0])[0])
					.attr("cy", projection([0, 0])[1])
					.style("opacity", 1);
					
				d3.selectAll(".blurValues")
					.transition().duration(1000).delay(1000)
					.attrTween("values", function() {
						return d3.interpolateString("1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 35 -6",
													"1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -5");
					});

}//backToCenter
	
		 	///////////////////////////////////////////////////////////////////////////
			/////////////////////////// Helper functions //////////////////////////////
			///////////////////////////////////////////////////////////////////////////

//Radial layout
			function getCenters (vname, size) {
			  	var centers = [], 
					mapping,
					flags = [];
				for( var i = 0; i < deaths.length; i++) {
				    if( flags[deaths[i]["country"]]) continue;
				    flags[deaths[i]["country"]] = true;
				    centers.push({name: deaths[i]["country"], deaths: deaths[i][vname], value: 1});
				}//for i
			  	centers.sort(function(a, b){ return d3.descending(a.deaths, b.deaths); });

mapping = d3.layout.pack()
			  		.sort(function(d) { return d[vname]; })
			  		.size(size);
			  	mapping.nodes({children: centers});

return centers;
			}//getCenters
	
			//Radial lay-out
			function tick (centers, varname) {
				var foci = {};
				for (var i = 0; i < centers.length; i++) {
					foci[centers[i].deaths] = centers[i];
				}
	  
				return function (e) {
					for (var i = 0; i < deaths.length; i++) {
					  var o = deaths[i];
					  var f = foci[o[varname]];
					  o.y += (f.y - o.y) * e.alpha;
					  o.x += (f.x - o.x) * e.alpha;
					}//for

d3.selectAll(".cities")
						.each(collide(.5))
						.attr("cx", function (d) { return d.x; })
						.attr("cy", function (d) { return d.y; });

}//function
			}//tick

</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.6.3/d3-tip.min.js