[unlisted] Satellites by Countries Interactive

forked from curran's block: Tilted Labels

Hover over the bars to reveal the number of satellites for that purpose for the selected country.

Hover over the legend keys to highlight the selected purpose in the country bar chart.

forked from apratt2003's block: [unlisted] Satellites by Countries Interactive

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.24.0/d3-legend.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.7.1/d3-tip.min.js"></script>
    <title>Top Internet Countries Visualization</title>
    <style>
      body {
        margin: 0px;
      }
      .domain {
        display: none;
      }
      .tick line {
        stroke: #C0C0BB;
      }
      .tick text {
        fill: #8E8883;
        font-size: 8pt;
        font-family: sans-serif;
      }
      .axis-label {
        fill: #635F5D;
        font-size: 20pt;
        font-family: sans-serif;
      }
      .color-legend text {
        font-size: 8pt;
        font-family: 'Open Sans', sans-serif;
      }
      .d3-tip {
        font-family: 'Open Sans', sans-serif;
        font-size: 19pt;
        line-height: 1;
        padding: 7px;
        background: black;
        color: lightgray;
        border-radius: 20px;
      }
    </style>
  </head>
  <body>
    <svg width="960" height="500"></svg>
    <script>

const xValue = d => d.Country;
      const xLabel = 'Country';
      const yValue = "Number";
      const yLabel = 'Number of Satellites';
      const colorColumn = 'Purpose';
      const layerColumn = colorColumn;
      var numCountries = 10;
      var hoveredColorValue;
      var hoveredStrokeColor = "black";
      
      const margin = { left: 99, right: 70, top: 20, bottom: 105 };

xAxisG.append('text')
          .attr('class', 'axis-label')
          .attr('x', innerWidth / 2)
          .attr('y', 76)
          .text(xLabel);

yAxisG.append('text')
          .attr('class', 'axis-label')
          .attr('x', -innerHeight / 2 - 3)
          .attr('y', -57)
          .attr('transform', `rotate(-90)`)
          .style('text-anchor', 'middle')
          .text(yLabel);
      
      var colorLegendG = g.append("g")
      		.attr("class", "color-legend")
      		.attr("transform", "translate(620,14)");

const xScale = d3.scaleBand()
        .paddingInner(0.1)
        .paddingOuter(0.2);
      const yScale = d3.scaleLinear();

const xAxis = d3.axisBottom()
        .scale(xScale)
        .tickSize(-innerHeight);

yScale
          .domain([0, d3.max(stacked.map(function (d){
            return d3.max(d, function (d){ return d[1];});
          }))])
          .range([innerHeight, 0])
          .nice(yTicks);
        
				
       
      
        
        xAxisG.call(xAxis);
        xAxisG.selectAll('.tick line').remove();
        xAxisG.selectAll('.tick text')
            .attr('transform', 'rotate(-45)')
            .attr('text-anchor', 'end')
            .attr('alignment-baseline', 'middle')
            .attr('x', -5)
            .attr('y', 6)
            .attr('dy', 0);

yAxisG.call(yAxis);
        
        renderBars(baseBarLayer, stacked);
        
        if(hoveredColorValue){
          troubleShoot("step 001 passes ");
          setOverlayTransparency(0.6);
          troubleShoot("step 002 passed ");
//Line 243 issue -------------------------------
          var hoveredStack = stacked.filter(function (layer){
            return layer.key === hoveredColorValue;
          });
          renderBars(foregroundBarLayer, hoveredStack);
        } else {
          troubleShoot("step 004 passed ");
          setOverlayTransparency(0.0);
          renderBars(foregroundBarLayer, []);
        }
      
        
        colorLegendG.call(colorLegend);
        
        
        
        listenForHover(colorLegendG.selectAll("rect"), data);
        //listenForHover(colorLegendG.selectAll("text"), data);
      }
        
      
      function setOverlayTransparency(alpha){
        overlayRect
          .transition().duration(00)
          .attr("fill", "rgba(255, 255, 255, " + alpha + ")");
      }
        
             
      function renderBars(g, stacked){
        var layers = g.selectAll('g').data(stacked);
        layers.exit().remove();
        layers = layers.enter().append('g')
          .merge(layers)
            .attr('fill', function(d) { return colorScale(d.key); });
        
        var pancakes = layers.selectAll('rect')
          .data(function (d) { return d; });
        pancakes.exit().remove();
        pancakes.enter().append("rect")
          .merge(pancakes)
            .attr('width', d => xScale.bandwidth()) 
            .attr('x', function (d) { return xScale(xValue(d.data)); })
            .attr('y', function (d) { return yScale(d[1]); })
            .attr('height', function (d) { return yScale(d[0]) - yScale(d[1]); })
            .on("mouseover", tip.show)
            .on("mouseout", tip.hide);
      }
        
        function listenForHover(selection, data){
          selection
          .on("mouseover", function (d){
            hoveredColorValue = d;
            render(data);
          })
          .on("mouseout", function (d){
            hoveredColorValue = null;
            render(data);
          })
          .style("cursor", "pointer");
          
          
        }
        
        function print(data){
          d3.select("body").append("pre")
            .text(JSON.stringify(layers, null, 2));
        }
       //print()
      
      function troubleShoot(target){
        d3.select("body").append("text")
    			.attr("x", 50)
    			.attr("y", 50)
    			.attr("dy", ".35em")
    			.text(target);
      }
 
      //troubleShoot() 
      
       function type(d) {
          d.Number = +d.Number;
          return d;
       }
      
      d3.csv('satpurposeTop10.csv', type, render);
      
  
    </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

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