Inspired by the 113th Congress map and the Congressional map.
Data is from Atlas-make/us-congress Github repo
license: mit |
Inspired by the 113th Congress map and the Congressional map.
Data is from Atlas-make/us-congress Github repo
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<script src="http://d3js.org/topojson.v1.min.js"></script> | |
<style> | |
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } | |
</style> | |
</head> | |
<body> | |
<div id="container"/> | |
<script> | |
var projection = d3.geoAlbersUsa(); | |
var path = d3.geoPath().projection(projection); | |
var svg = d3.select("#container") | |
.append("svg") | |
.attr("width", 960) | |
.attr("height", 500); | |
d3.json("congress.json", function(error, us) { | |
svg.selectAll(".region") | |
.data(topojson.feature(us, us.objects.congress).features) | |
.enter() | |
.append("path") | |
.attr("class", "region") | |
.attr("d", path) | |
.style("fill", function(d){ | |
if(d.properties.PARTY_AFF=="Democrat") { | |
return "#295899"; | |
} else { | |
return "#b4362b"; | |
} | |
}) | |
.style("stroke", "#aaa") | |
.style("stroke-width", ".6px"); | |
}); | |
</script> | |
</body> |