tlfrd/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    An animated "arithmopleth" map of UK unemployement rates (where available).
Inspired by Andrew Mollica's Arithmopleth Map

  
## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/topojson.v2.min.js"></script>
  <style>
    html {
    	font-family: monospace;
		}

    .constituency {
      fill: none;
      stroke-width: 0.25;
      stroke: #c9c9c9;
		}

    text {
      opacity: 0.8;
      cursor: default;
    }
  </style>
</head>

<body>
  <script>
    var svgWidth = 960,
        svgHeight = 500;

    var margin = {top: 20, right: 10, bottom: 20, left: 10};

    var width = svgWidth - margin.left - margin.right,
    	height = svgHeight - margin.top - margin.bottom;

    var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height)
    .append("g")
    	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    var dataUrl = "https://raw.githubusercontent.com/ft-interactive/ge2017-dataset/master/financialTimes_ge2017_dataset.csv"

    d3.queue()
    	.defer(d3.csv, dataUrl)
    	.defer(d3.json, "topo_wpc.json")
    	.await(ready);

    function ready(error, data, uk) {
      if (error) throw error;

      var dataObject = {};
      data.forEach(function(d, i) {
        dataObject[d.PCON15CD] = d;
      });

      var constituencies = topojson.feature(uk, uk.objects.wpc).features;

      var projection = d3.geoAlbers()
    		.fitSize([width, height], topojson.feature(uk, uk.objects.wpc));

    	var path = d3.geoPath()
    		.projection(projection);

      var centroids = [];
      constituencies.map(function(d) {
        var centroid = path.centroid(d);
        var info = dataObject[d.id];
        var attr = "econ_unemploymentRate_2015";
        if (info) {
          if (info[attr] != "NA") {
            var datum = {
              x: centroid[0],
              y: centroid[1],
              value: +info[attr]
            }
            centroids.push(datum);
          }
        }
      });

      var range = d3.extent(centroids, function(d) { return Math.round(d.value)} );
      var colour = d3.scaleSequential(d3.interpolateMagma)
    		.domain(range);

      svg.selectAll("path")
      	.data(constituencies)
      .enter().append("path")
      	.attr("class", "constituency")
      	.attr("d", path);

      var numbers = svg.selectAll("text")
      	.data(centroids)
      .enter().append("text")
      	.attr("class", "values")
      	.attr("x", function(d) { return d.x })
      	.attr("y", -25)
      	.style("text-anchor", "middle")
      	.style("font-size", "8px")
      	.style("fill", function(d) { return colour(Math.round(d.value)); })
      	.text(function(d) { return Math.round(d.value) })
      	.on("mouseover", function() {
        	d3.select(this)
          	.transition()
          	.style("font-size", "16px");
      	})
        .on("mouseout", function() {
        	d3.select(this)
          	.transition()
          	.style("font-size", "8px");
      	})

      	numbers
        	.transition()
            .duration(1000)
            .delay(function(d, i) { return i * 5 })
            .attr("x", function(d) { return d.x })
            .attr("y", function(d) { return d.y })
    }

  </script>
</body>

## thumbnail.png

      
    Raw
  

              thumbnail.png
            
          
## topo_wpc.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              topo_wpc.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.
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://d3js.org/topojson.v2.min.js"></script>
	<style>
	html {
	font-family: monospace;
	}

	.constituency {
	fill: none;
	stroke-width: 0.25;
	stroke: #c9c9c9;
	}

	text {
	opacity: 0.8;
	cursor: default;
	}
	</style>
	</head>

	<body>
	<script>
	var svgWidth = 960,
	svgHeight = 500;

	var margin = {top: 20, right: 10, bottom: 20, left: 10};

	var width = svgWidth - margin.left - margin.right,
	height = svgHeight - margin.top - margin.bottom;

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	var dataUrl = "https://raw.githubusercontent.com/ft-interactive/ge2017-dataset/master/financialTimes_ge2017_dataset.csv"

	d3.queue()
	.defer(d3.csv, dataUrl)
	.defer(d3.json, "topo_wpc.json")
	.await(ready);

	function ready(error, data, uk) {
	if (error) throw error;

	var dataObject = {};
	data.forEach(function(d, i) {
	dataObject[d.PCON15CD] = d;
	});

	var constituencies = topojson.feature(uk, uk.objects.wpc).features;

	var projection = d3.geoAlbers()
	.fitSize([width, height], topojson.feature(uk, uk.objects.wpc));

	var path = d3.geoPath()
	.projection(projection);

	var centroids = [];
	constituencies.map(function(d) {
	var centroid = path.centroid(d);
	var info = dataObject[d.id];
	var attr = "econ_unemploymentRate_2015";
	if (info) {
	if (info[attr] != "NA") {
	var datum = {
	x: centroid[0],
	y: centroid[1],
	value: +info[attr]
	}
	centroids.push(datum);
	}
	}
	});

	var range = d3.extent(centroids, function(d) { return Math.round(d.value)} );
	var colour = d3.scaleSequential(d3.interpolateMagma)
	.domain(range);

	svg.selectAll("path")
	.data(constituencies)
	.enter().append("path")
	.attr("class", "constituency")
	.attr("d", path);

	var numbers = svg.selectAll("text")
	.data(centroids)
	.enter().append("text")
	.attr("class", "values")
	.attr("x", function(d) { return d.x })
	.attr("y", -25)
	.style("text-anchor", "middle")
	.style("font-size", "8px")
	.style("fill", function(d) { return colour(Math.round(d.value)); })
	.text(function(d) { return Math.round(d.value) })
	.on("mouseover", function() {
	d3.select(this)
	.transition()
	.style("font-size", "16px");
	})
	.on("mouseout", function() {
	d3.select(this)
	.transition()
	.style("font-size", "8px");
	})

	numbers
	.transition()
	.duration(1000)
	.delay(function(d, i) { return i * 5 })
	.attr("x", function(d) { return d.x })
	.attr("y", function(d) { return d.y })
	}

	</script>
	</body>