In this post we’ll study a way to visualize maps in a hexagonal grid, in which each entity have uniform area. We’ll then model that as a mathematical problem.
One challenge in displaying data in maps is that larger area countries or states tend to get more attention than smaller ones, even when economically or population-wise, the smaller state is more relevant (e.g. New Jersey vs. Alaska). One idea is to normalize the areas of all the states by using symbols such as squares. Recently I ran into a NPR map that used hexagons and it looked very neat, so I decided to try building it in D3 and perform some analysis.
Below is the result of plotting the state populations (log scale):
One important property of visualizing data in maps is familiarity of the location (you can easily find specific states because you remember where they are) and also adjacency patterns can provide insights. For example, if we plot a measure as a choropleth map and see that the West coast is colored differently from the Midwest, then we gain an insight we wouldn’t have by looking at a column chart for example.
Because of this, ideally the homogeneous area maps should preserve adjacencies as much as possible. With that in mind, we can come up with a similarity score. Let X be the set of pairs of states that share a border in the actual US map. Now, let Y be the set of pairs of states that share a border in the hexagonal map (that is, two hexagons sharing a side). The similarity score is the size of their symmetric difference and we can normalize by the size of the original:
The lower the score the better. In an ideal case, the borders sets would match perfectly for a score of 0.
The size of the symmetric difference between the two sets seems like a good measure for similarity, but I’m not sure about the normalization factor. I initially picked the size of the union of X and Y, but this wouldn’t let us model this problem as a linear programming model as we’ll see next. The problem with using the size of X is that the score could theoretically be larger than 1, but it’s trivial to place the hexagons in the grid in such a way that none of them are touching and thus Y is empty, so we can assume the score is between 0 and 1.
The score from the NPR maps is 0.67.
An Optimization Problem
Let’s generalize and formalize the problem above as follows: given a graph , and another graph representing our grid, find the induced subgraph of , , such that there’s bijection and the size of the symmetric difference of and is minimized ( is an abuse of notation, but it means applying the bijection to each vertex in the set of edges ).
To make it clearer, let’s apply the definition above to the original problem. represents the adjacency of states in the original map. is the set of states and is the set of pairs of states that share a border. is the hexagonal grid. is the set of all hexagons and is the set of pairs of hexagons that are adjacent. We want to find a subset of the hexagons where we can place each of the states (hence the bijection from states to hexagons) and if two hexagons are in the grid, and we place two states there, we consider the states to be adjacent, hence the need for an induced graph, so the adjacency in the grid is preserved.
Is this general case an NP-hard problem? We can reduce the Graph Isomorphism problem to this one. It consists in deciding whether two graphs and are isomorphic. If we set and , then and are isomorphic if and only if and the symmetric difference of and is 0. The problem is that it’s not known whether Graph Isomorphism belongs to NP-Complete.
What if is planar (which is the case for maps)? I haven’t given much thought about it, but I decided to come up with an integer programming model nevertheless.
An Integer Linear Programming Model
Note: the model uses the original grid analogy instead of the more general problem so that the constraints are easier to understand.
Boolean algebra as linear constraints
Before we start, we need to recall how to model logical constraints (AND, OR and EQUAL) using linear constraints. Let a and b be binary variables. We want x to be the result of logical operators applied to a and b.
For AND, we can do ( if and only if and )
For OR, we can do ( if and only if and )
For EQUAL, we can do ( if and only if )
We can introduce a notation and assume these constraints can be generated by a function. For example, if we say
, we’re talking about the four constraints we defined above for modeling EQUAL. This is discussed in .
Let be the set of pairs representing the grid positions. Let be the set of pieces that have to be placed in the grid. Let be the set of pairs that are adjacent to in the grid.
Let represent whether and are adjacent to each other in the dataset.
Let be a binary variable, and equals 1 if and only if state is placed position .
1) A piece has to be placed in exactly one spot in the grid:
2) A spot can only be occupied by at most one state:
Let be a binary variable and equals 1 if and only if piece p1 is placed in and adjacent to in the grid.
3) has to be 0 if is not in or is not adjacent to any of neighbors:
We have that is 1 if and only if p1 is in and p2 is adjacent to any of neighbors.
Finally, we can model the adjacency between two pieces and . Let be a binary variable and equals 1 if and only if and are adjacent in the grid:
Symmetric difference constraints
Let be a binary variable and equals to 1 if and only if .
The sum of all ‘s is the size of the symmetric difference:
This model can be quite big. For our US map example, we have and we need to estimate the size of the grid. A 50×50 grid is enough for any type of arrangement. The problem is that the number of variables is which is not practical.
We can also solve the problem for individual connected components in the original graph and it’s trivial construct the optimal solution from each optimal sub-solution. This doesn’t help much in our example, since only Hawaii and Alaska are disconnected, so we have |P| = 48. The grid could also be reduced. It’s very unlikely that an optimal solution would be a straight line. In the NPR map, the grid is 8×12. Sounds like doubling these dimensions would give the optimal solution enough room, so .
We can also assume states are orderer and we only have variables for , so the number of is about 450K. Still too large, unfortunately.
Another important optimization we can do in our case because we're working with a grid is to define the adjacency for x and y independently and combine them afterwards.
Refined adjacency constraints
Instead of working with we use , and equals 1 if and only if state is placed position for any y and , which equals 1 iff state is placed position for any x. The physical constraints are analogous to the previous model:
6) A piece has to be placed in exactly one spot in the grid:
7) A spot can only be occupied by at most one state:
In a hexagonal grid, if we have the piece p1 in position , it will be adjacent to another piece p2 if and only if p2 is in one of these six positions: 1: , 2: , 3: , 4: , 5: or 6: . We can define two adjacency categories: Type I, which happens when and (cases 1 and 2); and Type II, which is when and (cases 3, 4, 5 and 6).
Let’s define iff for a given y. Similarly we define iff , iff and finally iff .
8) We can have the following constraints do model the variables we just defined:
9) Let iff for any y. We can define analogous variables for the other cases:
10) Let iff p1 and p2 have the Type I adjacency and iff p1 and p2 have Type II adjacency:
11) Finally, we say that p1 and p2 are adjacency iff either Type I or Type II occurs:
The model for adjacency became much more complicated but we were able to reduce the number of adjacency variables are now roughly . The number of non-zero entries in the right hand size of (which represents the size of the sparse matrix) is roughly 11M, dominated by the type (8) constraints. I’m still not confident this model will run, so I’ll punt on implementing it for now.
In this post we explored a different way to visualize the US states map. I was mainly exploring the idea of how good of an approximation this layout is and a natural question was how to model this as an optimization problem. Turns out that if we model it using graphs, the problem definition is pretty simple and happens to be a more general version of the Graph Isomorphism problem.
I struggled with coming up with an integer programming model and couldn’t find one with a manageable size, but it was a fun exercise!
One cannot help wondering if we can display the countries in a hexagonal map. I’m planning to explore this idea in a future post. The main challenge is that the US states areas are more uniform than the countries. For example, the largest state (Alaska) is 430 times larger than the smallest (Rhode Island). While the largest country (Russia) is almost 40,000,000 bigger than the smallest (Vatican City).
Also, the layout of the US map was devised by someone from NPR and they did a manual process. I’m wondering if we can come up with a simple heuristic to place the hexagons and then perform manual adjustments.
 NPR Visuals Team – Let’s Tesselate: Hexagons For Tile Grid Maps
 Computer Science: Express boolean logic operations in zero-one integer linear programming (ILP)
 SOM – Creating hexagonal heatmaps with D3.js
 Github – d3/d3-hexbin