Makeover Monday - YouTube ratings - scatter with convex hull (linear scale)

forked from tomshanley's block: Makeover Monday - YouTube ratings

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;top:0;right:0;bottom:0;left:0; font-family: sans-serif; }
    .domain { display: none; }
    .tick text { fill: #808080 }
    .axis-label { fill: #808080; font-size: 12; }
    .tick line { stroke: #808080; shape-rendering: crispEdges; }
    .hull { stroke:#808080;  stroke-width: 20; stroke-linejoin: round;}
    .legend rect, .legend text { cursor: pointer; }
  </style>
</head>

drawChart(data);

});
    
    
    
    function highlightUser() {
      
      var sel = document.getElementById('user');
      var selectedUser = sel.options[sel.selectedIndex].value;
  
      d3.selectAll("circle")
      .style("opacity", function(d) { return d.User==selectedUser ? 1 : 0.2; })
      .attr("r", function(d) { return d.User==selectedUser ? 5 : radius; });

};
    
    function drawChart(data) {
      
      var width = 800;
      var height = width;
      var margin = {"top": 50, "left": 50, "right": 150, "bottom": 50,}
  
        
      var svg = d3.select("#chart").append("svg")
       .attr("width", width + margin.right + margin.left)
       .attr("height", height + margin.top + margin.bottom);
      
      var colorScale = d3.scaleOrdinal()
      .domain(["A-plus", "A", "A-minus", "B-plus", "B", "B-minus", "C-and-D"])
      .range(["#081d58", "#253494", "#225ea8", "#1d91c0", "#41b6c4", "#7fcdbb", "#c7e9b4"]);
 
      var yScale = d3.scaleLinear()
      .range([height, 0])
      .domain([0,maxVideoViews]);
      
      var yAxis = d3.axisLeft(yScale).tickFormat(formatBillions);
      
      var xScale = d3.scaleLinear()
      .range([0,width])
      .domain([0,maxSubscribers]);

circles.append("text")
      .text(function(d){ return d.User; })
      .attr("class", "user-label")
      .attr("x", 0)
      .attr("y", -5)
      .attr("text-anchor", "middle")
      .style("visibility", function(d){ 
        if (d.Rating == "A-plus" || d.Subscribers > 12000000 || d.VideoViews > 4000000000) {
          return "inherit";
        } else {
          return "hidden";
        };
      });

d3.selectAll("circle")
      .on("mouseover", function(d){
        d3.select("#user").property('value', d.User);
        highlightUser();
      })
      .on("mouseout", function(d){
        d3.selectAll("circle").style("opacity", 0.7).attr("r", radius);
      })
      
      var legendBoxWidth = 20;
      
      var legend = svg.append("g")
      .attr("class", "legend")
      .attr("transform", "translate(" + (margin.left + width) + "," + margin.top + ")");
      
      
      legend.append("text")
      .text("Ratings:")
      .attr("x", 0)
      .attr("y", -5);
      
      
      legend.append("rect")
      .attr("class", "legend-border")
      .attr("x", -3)
      .attr("y", -25)
      .attr("width", margin.right - 50)
      .attr("height", 180)
      .style("fill", "none")
      .style("stroke", "grey")
      
      var legendEntries = legend.selectAll("g")
      .data(["A-plus", "A", "A-minus", "B-plus", "B", "B-minus", "C-and-D"])
      .enter()
      .append("g")
      .attr("transform", function(d, i) { return "translate(0," + (i * (legendBoxWidth + 2)) + ")"; });

legendEntries.append("rect")
      .attr("x", 0)
      .attr("y", 0)
      .attr("width", legendBoxWidth)
      .attr("height", legendBoxWidth)
      .attr("class", "legend-rect")
      .attr("id", function(d) { return "legend-rect-" + d; })
      .style("fill", function(d) { return colorScale(d); })
      .style(
"opacity", mutedOpacity)
      .on("click", showHideHull);
      
      legendEntries.append("text")
      .text(function(d) { return d; })
      .attr("x", legendBoxWidth + 3)
      .attr("y", legendBoxWidth - 3)
      .on("click", showHideHull);
   
    }
    
    
    function convertTextToNumbers(d) { 
        d.Rank = +d.Rank;
        d.Subscribers = +d.Subscribers;
        d.VideoViews = +d.VideoViews;
        return d;
    };
    
    function showHideHull(d) {
      
      var hullID = "#hull-" + d;
      var rectID = "#legend-rect-" + d;
      
      var currentOpacity = d3.select(hullID).style("opacity");
      
      //if (currentOpacity == 0) {
        
        //selectedHullOpacity = 0.6; 
        
        //d3.select(hullID).style("opacity", selectedHullOpacity);
        //d3.select(rectID).style("opacity", selectedHullOpacity);
        
      //} else {
        var selectedHullOpacity = currentOpacity == mutedOpacity ? 0.5 : mutedOpacity;
      
        //var otherHullsOpacity = currentOpacity == mutedOpacity ? 0 : mutedOpacity;

//d3.selectAll(".hull").style("opacity", otherHullsOpacity);
        d3.select(hullID).style("opacity", selectedHullOpacity);

//d3.selectAll(".legend-rect").style("opacity", otherHullsOpacity);
        d3.select(rectID).style("opacity", selectedHullOpacity);
      
      //};
      
      
      
      
    }

</script>
</body>

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