London Constituency Grid Layout

A grid layout of London UK parliamentary constituencies for use with equal-area square or rectangle cartograms. Layout my own.

forked from tlfrd's block: London Constituency Grid Layout

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="london-grid.js"></script>
  <style>
    body {
      margin: 0;
    }
    
    text {
      font-size: 16px;
      font-family: sans-serif;
    }
  </style>
</head>

<body>
  <script>
   
   var cfg = {
      gridLength: 11,
      gridHeight: 10,
      padding: 3
    }
    
    var margin = {top: 50, right: 200, bottom: 50, left: 200};
    
    var width = 960 - margin.left - margin.right,
    		height = 500 - margin.top - margin.bottom;
    
    var svg = d3.select("body").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    
    var rectWidth = (width / cfg.gridLength) - cfg.padding,
        rectHeight = (height / cfg.gridHeight) - cfg.padding;    
    
    var dataUrl = "results.json";
    
    var colours = {
      "Con": "#0087DC",
      "Lab": "#DC241f",
      "LabCoop": "#DC241f",
      "LibDem": "#FDBB30"
    }
    
    var constituencies = svg.append("g").attr("class", "constituencies");  
    
    function calculateCoords(d) {
      var x = d.position.x * (rectWidth + cfg.padding);
      var y = d.position.y * (rectHeight + cfg.padding);
      return [x, y];
    }
    
    d3.json(dataUrl, function(geData) {
          
     constituencies.selectAll(".constituency")
    	.data(londonGrid)
    .enter()
      .append("rect")
    	.attr("class", "constituency")
    	.attr("x", d => calculateCoords(d)[0])
    	.attr("y", d => calculateCoords(d)[1])
    	.attr("width", rectWidth)
    	.attr("height", rectHeight)
    	.attr("fill", d => colours[geData[d.ons_code].winningParty])
              
    var labels = svg.append("g").attr("class", "labels");
    
    labels.selectAll(".label")
      .data(londonGrid)
    	.enter()
      .append("text")
    	.attr("x", d => calculateCoords(d)[0] + (rectWidth / 2))
    	.attr("y", d => calculateCoords(d)[1] + (rectHeight / 2))
    	.attr("dy", 6)
    	.text(d => d.name.slice(0, 2))
    	.attr("text-anchor", "middle");
      
    });
    
  </script>
</body>

https://d3js.org/d3.v4.min.js