Brexit: diverging color schemes tweaked by almccon

UK “Brexit” referendum results, joined to parliamentary constituencies. Original data for Great Britain from @geotheory. Parliamentary Constituencies for Northern Ireland added by @almccon, using shapes from @martinjc. Northern Ireland results from The Electoral Office of NI.

Inspired by Mike Bostock’s “Lets Make a Map”

Built with blockbuilder.org

forked from almccon‘s block: Brexit: diverging color schemes (d3v3)

index.html

<!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="//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>