Skip to content

Instantly share code, notes, and snippets.

@almccon
Last active November 7, 2016 00:21
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save almccon/7257fe68b3bfa4199e154016d983cddc to your computer and use it in GitHub Desktop.
Save almccon/7257fe68b3bfa4199e154016d983cddc to your computer and use it in GitHub Desktop.
Brexit: diverging color schemes (d3v3)
license: mit
Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script src="http://d3js.org/colorbrewer.v1.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0;background:#333; }
svg { width:100%; height: 100% }
</style>
</head>
<body>
<script>
var width = 1100,
height = 500;
var projection = d3.geo.albers()
.center([0, 55.4])
.rotate([4.4, 0])
.parallels([50, 60])
.scale(2500)
.translate([width / 2, height / 2]);
var svg = d3.select("body").append("svg");
d3.json("geotheory_uk_2016_eu_referendum_with_ni.json", function(error, uk) {
if (error) return console.error(error);
var wpcs = topojson.feature(uk, uk.objects.geotheory_uk_2016_eu_referendum_with_ni).features;
// Manually set domain
//var color = d3.scale.linear()
// .domain([20,50,80]) // percent voting to leave
// .range(['blue','lightgray','red']);
// Set domain from the true max and min of the data
var color = d3.scale.linear()
.domain([
d3.min(wpcs, function(d) {return +d.properties.pct_lev;}),
48,
50,
52,
d3.max(wpcs, function(d) {return +d.properties.pct_lev;})
])
.range(['red','orange','white','purple','blue']);
//.range(colorbrewer.PuOr[3]);
// Set domain from the true range of the data (but doesn't allow us to define color of midpoint
//var color = d3.scale.linear()
// .domain(d3.extent(wpcs, function(d) {return +d.properties.pct_lev;}))
// .range(['blue','red']);
svg.selectAll("path")
.data(wpcs)
.enter().append("path")
.attr("d", d3.geo.path().projection(projection))
.style("stroke", 'white')
.style("stroke-width", 0.5)
.style("fill", function(d) { return color(+d.properties.pct_lev);});
});
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment