almccon · November 1, 2016 04:56
diff --git a/.block b/.block
 license: mit
diff --git a/README.md b/README.md
diff --git a/geotheory_uk_2016_eu_referendum_with_ni.json b/geotheory_uk_2016_eu_referendum_with_ni.json
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <head>
  <meta charset="utf-8">
  <script src="//d3js.org/d3.v4.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.geoAlbers()
      .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;

      // Set domain from the true max and min of the data
      var color = d3.scaleLinear()
        .domain([
          d3.min(wpcs, function(d) {return +d.properties.pct_lev;}),
          50,
          d3.max(wpcs, function(d) {return +d.properties.pct_lev;})
        ])
        //.range(['blue','lightgray','red']);
        .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.geoPath().projection(projection))
      		.style("stroke", 'white')
      		.style("stroke-width", 0.5)
      		.style("fill", function(d) { return color(+d.properties.pct_lev);});
    });
  </script>
 </body>
diff --git a/thumbnail.png b/thumbnail.png
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="//d3js.org/d3.v4.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.geoAlbers()
	.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;

	// Set domain from the true max and min of the data
	var color = d3.scaleLinear()
	.domain([
	d3.min(wpcs, function(d) {return +d.properties.pct_lev;}),
	50,
	d3.max(wpcs, function(d) {return +d.properties.pct_lev;})
	])
	//.range(['blue','lightgray','red']);
	.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.geoPath().projection(projection))
	.style("stroke", 'white')
	.style("stroke-width", 0.5)
	.style("fill", function(d) { return color(+d.properties.pct_lev);});
	});
	</script>
	</body>