A grid layout of London UK parliamentary constituencies for use with equal-area square or rectangle cartograms. Layout my own.
xxxxxxxxxx
<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