Let's create a very basic hex map using a HexJSON layout. Everything happens in
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
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