Published in

HackerNoon.com

# How do hex maps work

..."E14000530":{"n":"Aldershot","q":-3,"r":-11,"a":"SE","u":"UKJ","p":72430}, "E14000531":{"n":"Aldridge-Brownhills","q":-3,"r":-1,"a":"WM","u":"UKG","p":60215}, "E14000532":{"n":"Altrincham and Sale West","q":-7,"r":3,"a":"NW","u":"UKD","p":71511},  "E14000533":{"n":"Amber Valley","q":0,"r":2,"a":"EM","u":"UKF","p":69510},  "E14000534":{"n":"Arundel and South Downs","q":0,"r":-15,"a":"SE","u":"UKJ","p":77242},
...

# My data needed some review

,
{
"name": "Morley and Outwood",
"majority": "0.87",
"winner": "Conservative"
},
{
"name": "Halifax",
"majority": "0.98",
"winner": "Labour"
},
...,
{
"name": "Morley and Outwood",
"id": "E14000826",
"majority": "0.87",
"winner": "Conservative"
},
{
"name": "Halifax",
"id": "E14000723",
"majority": "0.98",
"winner": "Labour"
},
{
"name": "Wirral West",
"id": "E14001044",
"majority": "1",
"winner": "Labour"
},
...

# A simple walk-through the logic

1. At each calling of paint_constituencies(), I will store an object containing all the colours of the constituency nodes after applying the swing — so that Labour holds are light red, Conservative holds light blue, while gains are respectively intense red and intense blue
2. I will pass this object to a function that draws the hex map, and will query this object by constituency ID, obtaining the status of the constituency, which determines the colour.

# Before we start, let’s adjust the html

<div class="row">
<div class="col-md-8" id="graph"></div>
<div class="col-md-4" id="vis"></div>
</div>

# Creating the “winners” object

var winners_object = {};
rectangles.style(“fill”, function(d) {
var returnColor;
var cid = d['id'];
if (d['winner'] === "Labour")
{
if (swing*2 > +d['majority']) {
seats_gained++;
returnColor = "#0000ff";
winners_object[cid] = "CON";
} else {
returnColor = "#f08080";
winners_object[cid] = "LABhold";
}
} else if (d['winner'] === "Conservative")
{
if (-swing*2 > +d['majority']) {
seats_gained++;
returnColor = "#ff0000";
winners_object[cid] = "LAB";
} else {
returnColor = "#87cefa";
winners_object[cid] = "CONhold";
}
}
do_hex(winners_object);

# Drawing the hex map

d3.select("#vis").selectAll("*").remove();
d3.json("maps/constituencies.hexjson", function(error, hexjson) {
// do something
}
2. render the hexagons using Oli’s library
3. bind our data to the hexagons
4. style the hexagon.
var svg = d3
.select("#vis")
.append("svg")
.append("g");
var hexes = d3.renderHexJSON(hexjson, width, height);
var hexmap = svg
.selectAll("g")
.data(hexes)
.enter()
.append("g")
.attr("transform", function(hex) {
return "translate(" + hex.x + "," + hex.y + ")";
});
hexmap
.append("polygon")
.attr("points", function(hex) {return hex.points;})
.attr("stroke", "white")
.attr("stroke-width", "2")
.attr("fill", function(hex) {
var party = winners[hex.key];
var colour = "#000000";
if (party === "LAB")
colour = "#ff0000";
else if (party === "CON")
colour = "#0000ff";
else if (party === "LABhold")
colour = "#f08080"
else if (party === "CONhold")
colour = "#87cefa";
return colour;
});

# It’s done!

--

--

## More from HackerNoon.com

Elijah McClain, George Floyd, Eric Garner, Breonna Taylor, Ahmaud Arbery, Michael Brown, Oscar Grant, Atatiana Jefferson, Tamir Rice, Bettie Jones, Botham Jean