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.

Built with blockbuilder.org

forked from ZijunXu's block: Nuclear Explosions 1945–1998

<!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);

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