block by nitaku 7008736

Custom hex projection

Full Screen

An example of some random hexagons from an integer-coordinates hexagonal tiling, rendered with a custom projection that makes hexagons appear regular.

The technique is taken from this Mike Bostock’s example, and it makes use of 3x2 hexagons like this one:

   -1 0 1   X
 2    *
 1  *   *
 0  * O *
-1    *

 Y

The hexagon’s origin O is a bit off, but this is also taken into account in the custom projection (I think), as it can be seen by the little black circle in the SVG, that is placed in the origin of the plane.

This technique is useful to reduce the size (and possibly rounding errors) of a GeoJSON representing such a tiling. See the original Mike Bostock’s example for an implementation that uses TopoJSON.

The code generates the hexagons as GeoJSON polygons, as in a prior example. It also uses hexagonal coordinates (introduced in this example) as input, then converts them into cartesian coordinates.

index.js

index.html

index.coffee

index.css

index.sass