NOTE: This is using preliminary election data from the days and weeks after the 2016 election. Results for some states, California in particular, are not the final results
Built with blockbuilder.org
forked from almccon‘s block: USA 2012 presidential election
forked from almccon‘s block: USA 2012 presidential election
forked from almccon‘s block: USA 2016 presidential election
forked from almccon‘s block: USA 2016 presidential election scatter
forked from anonymous‘s block: USA 2016 presidential election scatter
forked from anonymous‘s block: USA 2016 presidential election scatter
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="//d3js.org/d3.v4.js"></script>
<script src="https://unpkg.com/d3-tip@0.7.1"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
svg { width:960; height: 600 }
.axis-label {
fill: black;
font-size: 8pt;
font-family: sans-serif;
}
/* Tooltip styles copied from
//bl.ocks.org/Caged/6476579 */
.d3-tip {
line-height: 1;
padding: 12px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
border-radius: 2px;
}
</style>
</head>
<body>
<script>
// Note: with d3.v4 we can't use "fallback projections"
var projection = d3.geoAlbersUsa()
//.scale(500)
//.translate([width / 2, height / 2]);
var color = d3.scaleLinear()
.domain([20,50,80])
.range(['blue','purple','red']);
const margin = { left: 120, right: 30, top: 20, bottom: 120 };
const svg = d3.select('body').append('svg').attr('width',960).attr('height',600);
const width = svg.attr('width');
const height = svg.attr('height');
const innerWidth = width - margin.left - margin.right;
const innerHeight = height - margin.top - margin.bottom;
var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function(d) {
return "<span class=axis-label>" + `${d.county_name}, ${d.state_abbr}` + "</span>";
})
svg.call(tip);
d3.queue()
.defer(d3.json,"elpo12p010g.topojson")
.defer(d3.csv, "2016_US_County_Level_Presidential_Results.csv")
.awaitAll(function(error, results) {
var usa2012 = results[0];
var counties2016 = results[1];
countyLookup = {};
counties2016.forEach(function(county) {
// convert county.fips to 5 digit string (pad leading zero with "05")
var currentCounty = countyLookup[d3.format("05")(county.combined_fips)];
if (!currentCounty) {
countyLookup[d3.format("05")(county.combined_fips)] = county;
}
});
if (error) return console.error(error);
var xScale = d3.scaleLinear()
.domain([0,1])
.range([margin.left,innerWidth]);
var yScale = d3.scaleLinear()
.domain([0,3500000])
.range([innerHeight,20]);
var rScale = d3.scaleSqrt() // should be sqrt instead
.domain([0,1000000])
.range([0,30]);
const xAxisG = svg.append('g')
.attr('transform', `translate(0, ${innerHeight})`);
const yAxisG = svg.append('g')
.attr('transform', `translate(${margin.left},0)`);
const xLabel = 'percent votes for Trump';
const yLabel = 'total number of votes';
xAxisG.append('text')
.attr('class', 'axis-label')
.attr('x', innerWidth / 2)
.attr('y',30)
.text(xLabel);
yAxisG.append('text')
.attr('class', 'axis-label')
.attr('x', -innerHeight / 2)
.attr('y', -60)
.attr('transform', `rotate(-90)`)
.style('text-anchor', 'middle')
.text(yLabel);
const xAxis = d3.axisBottom().scale(xScale);
const yAxis = d3.axisLeft().scale(yScale);
svg.selectAll("circle")
.data(counties2016)
.enter().append("circle")
.attr("r",d => {
return rScale(+d.total_votes)
})
.attr("cx",d => {
return xScale(+d.per_gop)
})
.attr("cy",d => {
return yScale(+d.total_votes)
})
.style("fill", function(d) {
return color(100 * +d.per_gop);
})
.attr("opacity",0.1)
//.on('mouseover', d => console.log(`${d.county_name}, ${d.state_abbr}`));
.on('mouseover', tip.show)
.on('mouseout', tip.hide)
xAxisG.call(xAxis);
yAxisG.call(yAxis);
});
</script>
</body>