London Grid with Geo Shapes

A grid of London constituencies with the geographical representation of each constituency resized to fit within the same rectangular area. Hover over areas for the constituency name.

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="https://d3js.org/topojson.v2.min.js"></script>
  <script src="london-grid.js"></script>
  <style>
    body {
      margin: 0;
    }
    
    .constituency {
      fill: white;
      stroke: black;
    }
    
    .hover-rect {
      opacity: 0;
    }
    
    div.tooltip {
      position: absolute;
      text-align: center;
      padding: 5px;
      font: 12px monospace;		
      background-color: cyan;
      border: 1px black solid;	
      pointer-events: none;	
      width: 80px;
    }
  </style>
</head>

<body>
  <script>
    
    var cfg = {
      gridLength: 11,
      gridHeight: 10,
      padding: 6
    }
    
    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 url = "topo_wpc_london.json";
    
    function calculateCoords(d) {
      var x = d.x * (rectWidth + cfg.padding);
      var y = d.y * (rectHeight + cfg.padding);
      return [x, y];
    }
    
    var londonGridLookup = {};
    londonGrid.forEach(function(d) {
      londonGridLookup[d.ons_code] = d;
    });
    
    var constituencies = svg.append("g").attr("class", "constituencies");
    
    var div = d3.select("body").append("div")
    	.attr("class", "tooltip")
    	.style("opacity", 0);
        
    d3.json(url, function(topoLondon) {
      
      var geoLondon = topojson.feature(topoLondon, topoLondon.objects.wpc).features;
      
      constituencies.selectAll(".constituency")
      	.data(geoLondon)
      .enter().append("path")
      	.attr("class", "constituency")
      	.attr("d", d => localProjection(d, londonGridLookup[d.id].position))
      
      constituencies.selectAll("rect")
      	.data(geoLondon)
      .enter().append("rect")
      	.attr("class", "hover-rect")
      	.attr("x", d => calculateCoords(londonGridLookup[d.id].position)[0])
      	.attr("y", d => calculateCoords(londonGridLookup[d.id].position)[1])
      	.attr("width", rectWidth)
      	.attr("height", rectHeight)
        .on("mouseover", showLabel)
      	.on("mouseout", hideLabel);
      
    });
    
    function localProjection(geometry, position) {
      var centroid = d3.geoPath().centroid(geometry);
            
      var topLeftCorner = calculateCoords(position),
          topRightCorner = [calculateCoords(position)[0] + rectWidth, calculateCoords(position)[1] + rectHeight];
      
      var projection = d3.geoAlbers()
      		.center(centroid)
   				.rotate([0, 0])
      		.fitExtent([topLeftCorner, topRightCorner], geometry);
            
      var path = d3.geoPath()
    		.projection(projection);
      
      return path(geometry);
    }
    
    function showLabel(d) { 
      var left = calculateCoords(londonGridLookup[d.id].position)[0] - rectWidth / 2,
          right = calculateCoords(londonGridLookup[d.id].position)[1] - rectHeight ;
      div.transition()
        .duration(200)
        .style("opacity", 0.8)
      div.html(d.properties.PCON13NM)	
        .style("left", (left + margin.left) + "px")		
        .style("top", (right + margin.top) + "px")
    }
    
    function hideLabel() {      
      div.transition()		
        .duration(200)		
        .style("opacity", 0);	
    }

</script>
</body>

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

https://d3js.org/topojson.v2.min.js