oi.hexmap.js (25kB; 15kB minified; 6kB minified+gzipped) is our small, standalone, Javascript library for making interactive hexmaps (cartograms). There are some examples below.
This library assumes you have an existing hex layout as HexJSON (e.g. layouts we've made) and the ability to add Javascript to a webpage. The library creates an SVG (scalable vector graphic) of hexes - which can be styled via CSS - and some basic event callbacks.
<script src="oi.hexmap.js"></script>
Let's create a very basic hex map using a HexJSON layout. Everything happens in OI.hexmap(el,attributes) where el is the DOM element we are attaching the hex map to and attributes defines properties of the hex map. At a minimum, attributes should include hexjson which can either be inline HexJSON or a path to an external HexJSON file. In this example we will add the HexJSON inline.
By default, the title of each hex (try hovering over them) uses the n or name property of the hex in the HexJSON.
We will use the same hexmap but this time we add some extra properties to each item in the HexJSON. The colour property is used to colour each hex. We also turn on labels, make sure they are clipped to the hexagon, and customise the text of the label. The default label text is the value of n but we can provide a format function to customise the content. Here we split the string into separate tspan elements and add the population value. We make use of CSS classes so that we can make some parts of the label only visible on hover and even scale the size of the hexagon on hover (the code adds the style .hover to the hexagon and label).
This example loads in an external HexJSON file, loads in some data, and then colours the hexes depending on the data. To work out the colours we'll make a little helper function ColourScale.
This example also styles the lines defined in the HexJSON by calling this.updateBoundaries(fn) with a function, fn, that has the line ID and line properties as input parameters. This allows us some flexibility in how different lines are styled.
This example loads in an external HexJSON file, loads in some data, and then colours the hexes depending on the data. To work out the colours we'll make a little helper function ColourScale.
This example also styles the lines defined in the HexJSON by calling this.updateBoundaries(fn) with a function, fn, that has the line ID and line properties as input parameters. This allows us some flexibility in how different lines are styled.