We want to make sharing hexagon-based maps - such as our UK constituency hex map - easy. We've defined a simple JSON format to achieve that. The format is:
{
"layout": "odd-r",
"hexes": {
"E14000530":{"q":-3,"r":-11},
"E14000531":{"q":-3,"r":-1}
}
}The layout property should be one of the following coordinate systems (row number increasing vertically):
odd-r(pointy-topped)
odd numbered rows shift righteven-r(pointy-topped)
even numbered rows shift rightodd-q(flat-topped)
odd numbered columns shift upeven-q(flat-topped)
even numbered columns shift up
Note: the shifts in each coordinate system are based on the absolute column/row numbers as specified in the HexJSON file, not on their relative position in a layout. Using absolute numbers ensures that a layout still renders correctly if a column or row is added later.
The hexes are then defined using unique keys for each. Every hex is positioned by providing column (q) and row (r) coordinates. You don't have to start at 0,0.
You can add your own custom data fields to each hex if you want to. Just make sure you don't use the keys q and r as they will be the coordinates e.g.
{
"layout": "odd-r",
"hexes": {
"E14000530":{
"name": "Aldershot",
"q": -3,
"r": -11,
"area": "SE",
"NUTS1": "UKJ",
"electorate": 72430
},
"E14000531":{
"name": "Aldridge-Brownhills",
"q": -3,
"r": -1,
"area": "WM",
"NUTS1": "UKG",
"electorate": 60215
}
...
}
}Using HexJSON
The format is JSON so should be easy to ingest by your favourite programming language. We'll add examples that people have created below.
- Building a layout: Stuart Lowe created a HexJSON builder that reads a CSV file, allows you to reposition hexes, and save the output.
- JS: Stuart Lowe has created a small standalone JS library.
- D3: Oli Hawkins has created a plugin to read HexJSON files with D3.js.
- R: Tony Hirst wrote a series of blog posts (part 1, part 2, part 3) which describe a HTMLWidget that renders HexJSON for R.
- R: Joseph Bailey has a great tool for generating hex maps from geospatial polygons.