D3 Examples - Nuclear Explosions 1945

xxxxxxxxxx
 
<!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;
​
      const g = svg.append('g')
          .attr('transform', `translate(${margin.left},${margin.top+50})`);
      const colorLegendG = g.append('g')
          .attr('transform', `translate(${innerWidth - 100}, 50)`);
      
      const canvas = g.append('g')
          .attr('transform', `translate(${innerWidth / 2},${innerHeight / 2})`);
​
      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>
​
    