Brady Campaign vs. the NRA on Senators

This scatterplot shows how the pro-gun NRA and the pro-gun-control Brady Campaign rank U.S. senators. The size of the dot is proportional to the number of senators; hover over to see them. Not surprisingly, there's a strong negative correlation.

Each scatter dot is actually a pie chart, but I am saved from the wrath of the datavis gods by political polarization: there are no Democrats and Republicans that share a stance.

The data were surpringly hard to come by but were sourced from VoteSmart (Brady) and The Washington Post (NRA).

Built with blockbuilder.org.

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0;font: 10px sans-serif; }
    svg { width:100%; height: 100% }
    .axis line,
    .axis path {
      fill: none;
      stroke: #000;
      shape-rendering: crispEdges;
    }

.arrow {
      stroke: #000;
      stroke-width: 1.5px;
    }

</style>
</head>

<body>
  <script>
		var margin = {top: 30, right: 40, bottom: 40, left: 30},
    		width = 960 - margin.left - margin.right,
      	height = 500 - margin.top - margin.bottom;
    
		var x = d3.scale.linear()
        .domain([0, 100])
  		  .range([0, width-5])

var y = d3.scale.ordinal()
    		.domain(["A+", "A", "A-", "B+", "B", "B-", "C+", "C", "C-", "D+", "D", "D-", "F"])
        .rangeRoundPoints([height, 0])
    
    var r = d3.scale.sqrt()
    		.domain([1, 15])
        .range([4, 20])

var xAxis = d3.svg.axis()
   		 .scale(x)
    		.orient("bottom");

var yAxis = d3.svg.axis()
   		 .scale(y)
    		.orient("right");

var svg = d3.select("body").append("svg")
   		 .attr("width", width)
       .attr("height", height)
    	.append("g")
     	 .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var plot = svg.append("g")
    var axesG = svg.append("g")
    var overlayG = svg.append("g").style("font-size", "16px")

axesG.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
    	.append("text")
    	.text("Brady Campaign To End Gun Violence - Percentage Approval")
    	.attr({dx: width/2 + "px", dy: "30px"})
    	.style("text-anchor", "middle")

axesG.append("g")
      .attr("class", "y axis")
      .attr("transform", "translate(" + width + ",0)")
      .call(yAxis)
      .append("text")
    	.text("National Rifle Association - Letter Grade")
    	.attr({dx: -height/2 + "px", dy: "30px", transform: "rotate(-90)"})
    	.style("text-anchor", "middle")
    
    // The circles are actually pie charts, but the data contains no overlap
    var pie = d3.layout.pie();
    var arc = d3.svg.arc().innerRadius(function(){return 0});
    
    d3.csv("gun_data.csv", function(err, data){
      if (err) return console.error(err);
      var map = d3.map();
      data.forEach(function(d){
        var key = [d.brady, d.nra]
        var oldVal = map.get(key) || [];
        oldVal.push(d)
        map.set(key, oldVal)
      })
            
      plot.selectAll(".data")
      	.data(map.values())
      	.enter()
      	.append("g")
        .attr("transform", function(a){
        	var dx = x(+a[0].brady);
          var dy = y(a[0].nra);
          return "translate("+dx+","+dy+")"
         })
        .each(function(a){
           var reps = a.filter(function(d){return d.party == "Republican"}).length;
           var dems = a.filter(function(d){return d.party == "Democratic"}).length;
           var inds = a.filter(function(d){return d.party == "Independent"}).length;
        	 pieSlices = pie([reps, dems, inds]);
        	
        	 var sel = d3.select(this);
           arc.outerRadius(function(){return r(a.length)})
           sel.selectAll("path")
           	.data(pieSlices)
           	.enter()
           	.append("path")
           	.attr("d", arc)
           	.attr("fill", function(d, i){return ["#FF4136", "#0074D9", "#AAAAAA"][i]})
      })
      .on("mouseleave", function(a){
        overlayG.selectAll("*").remove();
      })
      .on("mouseenter", function(a){
        overlayG.append("text")
   				.text("NRA: "+ a[0].nra + " Brady: " + a[0].brady+"%")
        overlayG.selectAll("foo")
        	.data(a)
        	.enter()
        	.append("text")
        	.text(function(d){
          	return d.senator + " " + d.party.charAt(0) + "-" + d.state
       		 })
          .attr("dx", 10)
        	.attr("dy", function(d, i){ return (i+1) * 20}) 
      })

})

</script>
</body>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js