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.
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
xxxxxxxxxx<html> <head> <meta charset="utf-8"> <!-- Google fonts --> <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> <!-- D3.js --> <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 function collide(alpha) { var quadtree = d3.geom.quadtree(deaths); return function (d) { var r = d.radius + maxRadius + padding, nx1 = d.x - r, nx2 = d.x + r, ny1 = d.y - r, ny2 = d.y + r; quadtree.visit(function(quad, x1, y1, x2, y2) { if (quad.point && (quad.point !== d)) { var x = d.x - quad.point.x, y = d.y - quad.point.y, l = Math.sqrt(x * x + y * y), r = d.radius + quad.point.radius + padding; if (l < r) { l = (l - r) / l * alpha; d.x -= x *= l; d.y -= y *= l; quad.point.x += x; quad.point.y += y; } } return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1; }); }; }//collide </script> </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