Nuclear Explosions 1945–1998

This pie char show the percentage of nucluear explosions detonated by each countries in 1945-1998.

The data are gathered from “Nuclear Explosions, 1945–1998”, and the structured data are from here in Github.

The code are forked from Curran's donut chart.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Data Summary</title>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.24.0/d3-legend.min.js"></script>
    <style>
      body {
        margin: 0px;
      }
      .tick text, .legendCells text {
        fill: #111111;
        font-size: 10pt;
        font-family: 'Open Sans', sans-serif;
      }
      .axis-label, .legend-label {
        fill: #AAAAAA;
        font-size: 10pt;
        font-family: 'Open Sans', sans-serif;
      }
    	.circle:hover {
      	fill: #F012BE;
    	}
      div.tooltip {	
    		position: absolute;			
    		text-align: center;			
    		width: 280px;					
    		height: 60px;
      	vertical-align: middle;
      	line-height: 30px;
				font-family:'Open Sans', sans-serif;
    		background: #FFDC00;	
    		border: 0px;		
    		border-radius: 8px;			
    		pointer-events: none;			
			}
    </style>
  </head>
  <body>
    <script>
      const colorLabel = 'Nation Detonated';
      const margin = { left: 100, right: 120, top: 20, bottom: 120 };

const svg = d3.select("body").append("svg")
        .attr("width", 960)
        .attr("height", 500);
      
      const width = svg.attr('width');
      const height = svg.attr('height');
      const innerWidth = width - margin.left - margin.right;
      const innerHeight = height - margin.top - margin.bottom;

var temp = d3.select('body').append('div')	
    		.attr('class', 'tooltip')				
    		.style('opacity', 0);

colorLegendG.append('text')
          .attr('class', 'legend-label')
          .attr('x', -30)
          .attr('y', -20)
          .text(colorLabel);
      
      const colorScale = d3.scaleOrdinal()
        									.range(d3.schemeCategory10);

const colorLegend = d3.legendColor()
        .scale(colorScale)
        .shape('circle');

const pie = d3.pie().value(d => d.value);
      
      const arc = d3.arc()
        .innerRadius(innerHeight / 4)
        .outerRadius(innerHeight / 2);
      
      var temp = d3.select('body').append('div')	
    		.attr('class', 'tooltip')				
    		.style('opacity', 0);
      
      
      d3.csv('sipri-report-explosions.csv', data => {
        
        var temp_data = d3.nest()
          				.key(function(d) { return d.country; })
  								.rollup(d => d.length)
  								.entries(data);
        
				const arcs = pie(temp_data);

canvas.selectAll('path')
          .data(arcs)
          .enter()
          .append('path')
          .attr('d', arc)
          .attr('fill', d => colorScale(d.data.key))
        	.on("mouseover", function(d) {
            temp.transition()		
                .duration(200)		
                .style("opacity", 1);		
          	temp.html("Detonated by: "+d.data.key + '<br>' +
                      "Count: " + d.data.value)	
               .style("left", (d3.event.pageX - 60) + "px")		
               .style("top", (d3.event.pageY + 20) + "px");	
            })
        		.on("mouseout", function(d) {		
            	temp.transition()		
              	 .duration(500)		
               	.style("opacity", 0);	
        			});

colorLegendG.call(colorLegend)
          .selectAll('.cell text')
            .attr('dy', '0.1em');
      });

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

https://d3js.org/d3.v4.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.24.0/d3-legend.min.js