almccon/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    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.
See also: https://mappingmashups.cartodb.com/viz/39f1d3fc-3bdb-11e6-8ff8-0e31c9be1b51/public_map
Inspired by Mike Bostock's "Lets Make a Map"
Built with blockbuilder.org
forked from almccon's block: Brexit: diverging color schemes (d3v3)

  
## geotheory_uk_2016_eu_referendum_with_ni.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              geotheory_uk_2016_eu_referendum_with_ni.json
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## 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="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>
	<!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>