Partisanship in US elections

The data.

The USA Counties features over 6,600 data items for the United States, States and counties from a variety of sources. Files include data published for 2010 population as well as many other items from the 2010 Census of Population and Housing, the 1990 census, the 1980 census and the 2007, 2002, 1997, and 1992 economic censuses.

The Cook Partisan Voting Index.

The Cook Partisan Voting Index (Cook PVI) is a measurement of how strongly a United States congressional district leans toward the Democratic or Republican Party, compared to the nation as a whole.

$ pvi_2008_{area_name} = dem_2004_{area_name} - rep_2004_{area_name} - (dem_2004_{national} - rep_2004_{national}) $

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.counties {
  fill: none;
}

.states {
  fill: none;
  stroke: #fff;
  stroke-linejoin: round;
}

</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/queue.v1.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script>

var width  = 960,
    height = 600;

var rateById = d3.map();

var color = d3.scale.linear()
    .domain([-90, -17.42, 80])
    .range(["red","silver","darkblue"]);

var projection = d3.geo.albersUsa()
    .scale(1280)
    .translate([width / 2, height / 2]);

var path = d3.geo.path()
    .projection(projection);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

queue()
    .defer(d3.json, "https://gist.githubusercontent.com/mbostock/4090846/raw/d534aba169207548a8a3d670c9c2cc719ff05c47/us.json")
    .defer(d3.tsv, "partisanship.tsv", function(d) { rateById.set(d.id, +d.rate); })
    .await(ready);

function ready(error, us) {
  if (error) throw error;

svg.append("g")
      .attr("class", "counties")
    	.selectAll("path")
      .data(topojson.feature(us, us.objects.counties).features)
    	.enter().append("path")
      .attr("fill", function(d) { return color(rateById.get(d.id)); })
      .attr("d", path)
  		.on("mouseover", function(){ 
    			d3.select(this).style("fill", "aliceblue"); 
  		})
  		.on("mouseout", function(){ 
    			d3.select(this).style("fill", function(d) { 
            	return color(rateById.get(d.id)); 
          }); 
  		});

svg.append("path")
      .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
      .attr("class", "states")
      .attr("d", path);
}

d3.select(self.frameElement).style("height", height + "px");

</script>

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

https://d3js.org/queue.v1.min.js

https://d3js.org/topojson.v1.min.js