Makeover Monday - YouTube ratings - strip plot

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

<body>
  <select id="user"></select>
  	
  <div class="A-plus"></div>
  <div class="A"></div>
  <div class="A-minus"></div>
  <div class="B-plus"></div>
  <div class="B"></div>
  <div class="B-minus"></div>
  <div class="C-plus"></div>
  <div class="D-plus"></div>
  <div class="D"></div>
  
  <script>
	
    var maxVideoViews;
    var maxSubscribers;
    
    
    
    function formatBillions(d) {
      var roundedNumber = Math.round(d/1000000000);
      return roundedNumber + "bn";
    };
    
    function formatMillions(d) {
      var roundedNumber = Math.round(d/1000000);
      return roundedNumber + "m";
    };
       
    d3.csv("data.csv", convertTextToNumbers, function(error, data) {
      if(error) { throw error; };
   
      var dropDown = d3.select("#user").on("change", highlightUser);
      
      dropDown.selectAll("option")
      .data(data)
      .enter()
      .append("option")
      .attr("value", function(d) { return d.User; })
      .text(function(d) { return d.User; });
      
      maxVideoViews = d3.max(data, function(d){ return d.VideoViews; });
      maxSubscribers = d3.max(data, function(d){ return d.Subscribers; });

var nestedData = d3.nest()
      .key(function(d){ return d.Rating; })
      .entries(data);
      
      nestedData.forEach(function(d) {
        drawChart(d.key, d.values);
      });

});
    
    
    
    function highlightUser() {
      
      var sel = document.getElementById('user');
      var selectedUser = sel.options[sel.selectedIndex].value;
  
      var lines = d3.selectAll(".barcode-line")
      .style("opacity", function(d) { return d.User==selectedUser ? 1 : 0.05; });
      
      lines.filter(function(d){ return d.User==selectedUser; })
      .raise();
      
    };
    
    function drawChart(key, data) {
      
      var className = "." + key;
      
      var width = 800;
      var height = 40;
      var margin;
     	
      if (className == ".A-plus") {
        margin = {"top": 50, "left": 150, "right": 100, "bottom": 0,}
      } else {
        margin = {"top": 20, "left": 150, "right": 100, "bottom": 0,}
      };
      
      
      var strokeWidth = 3;
      
      var n = data.length;
        
      var div = d3.select(className).append("div")
      var svg = div.append("svg")
       .attr("width", width + margin.right + margin.left)
       .attr("height", height + margin.top + margin.bottom);
      
      if (className == ".A-plus") {
        
        svg.append("text")
        .text("Rating")
        .attr("class", "axis-label")
        .attr("x", 0)
        .attr("y", 20)
        .style("text-anchor", "start");
      	
        svg.append("text")
        .text("Views (billions)")
        .attr("class", "axis-label")
        .attr("x", (margin.left/2) + width/4)
        .attr("y", 20)
        .style("text-anchor", "middle");
        
        svg.append("text")
        .text("Subscribers (millions)")
        .attr("class", "axis-label")
        .attr("x", (margin.left + width/2) + width/4)
        .attr("y", 20)
        .style("text-anchor", "middle");;
      
      };
      
      svg.append("text")
      .text(key)
      .attr("x", 0)
      .attr("y", margin.top + height/2)
      .style("fill", "black")
      
      svg.append("text")
      .text("(n="+n+")")
      .attr("x", 0)
      .attr("y", margin.top + height/2 + 16)
      .style("fill", "black")
      
			var scaleVideoViews = d3.scaleLinear()
      .range([0,width/2])
      .domain([0,maxVideoViews]);
      
      var xAxisVideoViews = d3.axisTop(scaleVideoViews).tickFormat(formatBillions);
      var gXAxisVideoViews = svg.append("g")
    	.attr("transform", "translate(" + (margin.left/2) + "," + margin.top + ")")
    	.call(xAxisVideoViews);
      
      var gVideoViews = svg.append("g")
      .attr("transform", "translate(" + (margin.left/2) + "," + margin.top + ")");
      
      gVideoViews.selectAll("line")
        .data(data)
      	.enter()
      	.append("line")
      	.attr("class", "barcode-line")
      	.attr("x1", function(d){ return scaleVideoViews(d.VideoViews); })
        .attr("y1", 0)
      	.attr("x2", function(d){ return scaleVideoViews(d.VideoViews); })
      	.attr("y2", height)
      	.style("opacity", 0.2)
      	.style("stroke-width", strokeWidth)
      	.style("stroke", "PaleVioletRed");
      
      
      var scaleSubscribers = d3.scaleLinear()
      .range([0,width/2])
      .domain([0,maxSubscribers]);
      
      var xAxisSubscribers = d3.axisTop(scaleSubscribers).tickFormat(formatMillions);
      var gXAxisSubscribers = svg.append("g")
    	.attr("transform", "translate(" + (margin.left + (width/2)) + "," + margin.top + ")")
    	.call(xAxisSubscribers);
           
      var gSubscribers = svg.append("g")
      .attr("transform", "translate(" + (margin.left + (width/2)) + "," + margin.top + ")");
      
      gSubscribers.selectAll("line")
        .data(data)
      	.enter()
      	.append("line")
      	.attr("class", "barcode-line")
      	.attr("x1", function(d){ return scaleSubscribers(d.Subscribers); })
        .attr("y1", 0)
      	.attr("x2", function(d){ return scaleSubscribers(d.Subscribers); })
      	.attr("y2", height)
      	.style("opacity", 0.2)
      	.style("stroke-width", strokeWidth)
      	.style("stroke", "OliveDrab");
      
      
      d3.selectAll(".barcode-line")
      .on("mouseover", function(d){
        d3.select("#user").property('value', d.User);
        highlightUser();
      })
      .on("mouseout", function(d){
        d3.selectAll(".barcode-line").style("opacity", 0.2);
      })
      
      
    }
    
    function convertTextToNumbers(d) { 
        d.Rank = +d.Rank;
        d.Subscribers = +d.Subscribers;
        d.VideoViews = +d.VideoViews;
        return d;
    };

</script>
</body>

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