Skip to main content
This site and Lume package is currently under development and may not be stable.
Open Innovations
OI Lume Viz
0.16.5

Hex cartogram Since 0.3.0

We love hex cartograms and this lets you make them.

Usage

To use this component in a Nunjucks template you would add the following (assumes you've loaded OI Lume Viz into componentNamespace: 'oi'):

{% comp 'oi.map.hex_cartogram', { "config": config } %}{% endcomp %}

where config is replaced by an object that contains some or all of these variables:

  • data - (optional) Either a reference to a CSV file in the Lume site or an array of rows with named attributes. If used you will need to match this to the HexJSON IDs using matchKey.
  • columns - As with many of the visualisation types you can optionally add virtual columns.
  • hexjson - (required) Either a reference to a HexJSON file in the Lume site or inline HexJSON.
  • colours - Define some visualisation-specific named colours.
  • width - An optional minimum width (e.g. 400px) for each panel. Panels may then be arranged by however many columns will fit in the page width.
  • label - The title of the column that will be used to get a label for the hexagon. Leave empty if you don't want labels on the hexes.
  • value - The title of the column that will be used to get the value of the panel. Alternatively it could be a named colour.
  • matchKey - The title of the column in the data that contains unique keys that match those used in the HexJSON.
  • scale - A colour scale to use to colour the hexes based on the value.
  • min - Used with scale and max to define the colour scale.
  • max - Used with scale and min to define the colour scale.
  • legend - Define the legend.
  • tooltip - Either a string, template string, or the column heading to use to build a tooltip.
  • tools - Add some useful interactive tools:
    • filter - A search tool to filter hexes:
      • label - The title of the column to use as the displayed name for a hex in the search results.
      • max - The maximum number of results to show.
    • slider - A slider tool that will change the colouring of the hexes:
      • columns - An array of column titles to use to change the colouring of the hexes.
  • attribution - Add a line of attribution text under the visualisation.

Examples

  1. A basic hex cartogram
  2. Hex labels
  3. Hexes with the same colour
  4. Hexes with defined colours
  5. Hexes with defined colours - data and hexes separately
  6. Hexes with defined colours - external hexes
  7. Hexes with defined colours - external hexes and data
  8. Hexes coloured by a colour scale
  9. Add a legend
  10. Custom tooltips
  11. Filter hexes
  12. Add an interactive slider
  13. Draw boundaries
  14. Big example

1. A basic hex cartogram§

Embeddable version

A very simple hex cartogram that just shows the hexes.

Hexmap Barnsley Bradford Calderdale Craven Harrogate Kirklees Leeds Selby Wakefield York

This example was made with config:

YAML 
hexjson:
  layout: odd-r
  hexes:
    E08000016:
      'n': Barnsley
      q: 0
      r: -2
    E08000032:
      'n': Bradford
      q: -1
      r: 0
    E08000033:
      'n': Calderdale
      q: -2
      r: -1
    E07000163:
      'n': Craven
      q: -2
      r: 1
    E07000165:
      'n': Harrogate
      q: -1
      r: 1
    E08000034:
      'n': Kirklees
      q: -1
      r: -1
    E08000035:
      'n': Leeds
      q: 0
      r: 0
    E07000169:
      'n': Selby
      q: 1
      r: 0
    E08000036:
      'n': Wakefield
      q: 0
      r: -1
    E06000014:
      'n': York
      q: 0
      r: 1
JSON 
{
	"hexjson": {
		"layout": "odd-r",
		"hexes": {
			"E08000016": {
				"n": "Barnsley",
				"q": 0,
				"r": -2
			},
			"E08000032": {
				"n": "Bradford",
				"q": -1,
				"r": 0
			},
			"E08000033": {
				"n": "Calderdale",
				"q": -2,
				"r": -1
			},
			"E07000163": {
				"n": "Craven",
				"q": -2,
				"r": 1
			},
			"E07000165": {
				"n": "Harrogate",
				"q": -1,
				"r": 1
			},
			"E08000034": {
				"n": "Kirklees",
				"q": -1,
				"r": -1
			},
			"E08000035": {
				"n": "Leeds",
				"q": 0,
				"r": 0
			},
			"E07000169": {
				"n": "Selby",
				"q": 1,
				"r": 0
			},
			"E08000036": {
				"n": "Wakefield",
				"q": 0,
				"r": -1
			},
			"E06000014": {
				"n": "York",
				"q": 0,
				"r": 1
			}
		}
	}
}

2. Hex labels§

Embeddable version

A very simple hex cartogram with a label added to each hex. The label value allows you to construct a string. In this example the labels are created from each hex's n attribute and are limited to the first three characters.

Hexmap Barnsley Bradford Calderdale Craven Harrogate Kirklees Leeds Selby Wakefield York

This example was made with config:

YAML 
hexjson:
  layout: odd-r
  hexes:
    E08000016:
      'n': Barnsley
      q: 0
      r: -2
    E08000032:
      'n': Bradford
      q: -1
      r: 0
    E08000033:
      'n': Calderdale
      q: -2
      r: -1
    E07000163:
      'n': Craven
      q: -2
      r: 1
    E07000165:
      'n': Harrogate
      q: -1
      r: 1
    E08000034:
      'n': Kirklees
      q: -1
      r: -1
    E08000035:
      'n': Leeds
      q: 0
      r: 0
    E07000169:
      'n': Selby
      q: 1
      r: 0
    E08000036:
      'n': Wakefield
      q: 0
      r: -1
    E06000014:
      'n': York
      q: 0
      r: 1
label: '{{ n | slice(0,3) }}'
JSON 
{
	"hexjson": {
		"layout": "odd-r",
		"hexes": {
			"E08000016": {
				"n": "Barnsley",
				"q": 0,
				"r": -2
			},
			"E08000032": {
				"n": "Bradford",
				"q": -1,
				"r": 0
			},
			"E08000033": {
				"n": "Calderdale",
				"q": -2,
				"r": -1
			},
			"E07000163": {
				"n": "Craven",
				"q": -2,
				"r": 1
			},
			"E07000165": {
				"n": "Harrogate",
				"q": -1,
				"r": 1
			},
			"E08000034": {
				"n": "Kirklees",
				"q": -1,
				"r": -1
			},
			"E08000035": {
				"n": "Leeds",
				"q": 0,
				"r": 0
			},
			"E07000169": {
				"n": "Selby",
				"q": 1,
				"r": 0
			},
			"E08000036": {
				"n": "Wakefield",
				"q": 0,
				"r": -1
			},
			"E06000014": {
				"n": "York",
				"q": 0,
				"r": 1
			}
		}
	},
	"label": "{{ n | slice(0,3) }}"
}

3. Hexes with the same colour§

Embeddable version

A very simple hex cartogram where we define a custom colour named test and then use that for the value.

Hexmap Barnsley Bradford Calderdale Craven Harrogate Kirklees Leeds Selby Wakefield York

This example was made with config:

YAML 
colours:
  test: '#999000'
hexjson:
  layout: odd-r
  hexes:
    E08000016:
      'n': Barnsley
      q: 0
      r: -2
    E08000032:
      'n': Bradford
      q: -1
      r: 0
    E08000033:
      'n': Calderdale
      q: -2
      r: -1
    E07000163:
      'n': Craven
      q: -2
      r: 1
    E07000165:
      'n': Harrogate
      q: -1
      r: 1
    E08000034:
      'n': Kirklees
      q: -1
      r: -1
    E08000035:
      'n': Leeds
      q: 0
      r: 0
    E07000169:
      'n': Selby
      q: 1
      r: 0
    E08000036:
      'n': Wakefield
      q: 0
      r: -1
    E06000014:
      'n': York
      q: 0
      r: 1
value: test
JSON 
{
	"colours": {
		"test": "#999000"
	},
	"hexjson": {
		"layout": "odd-r",
		"hexes": {
			"E08000016": {
				"n": "Barnsley",
				"q": 0,
				"r": -2
			},
			"E08000032": {
				"n": "Bradford",
				"q": -1,
				"r": 0
			},
			"E08000033": {
				"n": "Calderdale",
				"q": -2,
				"r": -1
			},
			"E07000163": {
				"n": "Craven",
				"q": -2,
				"r": 1
			},
			"E07000165": {
				"n": "Harrogate",
				"q": -1,
				"r": 1
			},
			"E08000034": {
				"n": "Kirklees",
				"q": -1,
				"r": -1
			},
			"E08000035": {
				"n": "Leeds",
				"q": 0,
				"r": 0
			},
			"E07000169": {
				"n": "Selby",
				"q": 1,
				"r": 0
			},
			"E08000036": {
				"n": "Wakefield",
				"q": 0,
				"r": -1
			},
			"E06000014": {
				"n": "York",
				"q": 0,
				"r": 1
			}
		}
	},
	"value": "test"
}

4. Hexes with defined colours§

Embeddable version

A very simple hex cartogram. The colour of each hex is given by setting the value key to the colour property.

Hexmap Barnsley Bradford Calderdale Craven Harrogate Kirklees Leeds Selby Wakefield York

This example was made with config:

YAML 
hexjson:
  layout: odd-r
  hexes:
    E08000016:
      'n': Barnsley
      colour: '#E6007C'
      q: 0
      r: -2
    E08000032:
      'n': Bradford
      colour: '#FF6700'
      q: -1
      r: 0
    E08000033:
      'n': Calderdale
      colour: '#0DBC37'
      q: -2
      r: -1
    E07000163:
      'n': Craven
      colour: '#178CFF'
      q: -2
      r: 1
    E07000165:
      'n': Harrogate
      colour: '#2f529f'
      q: -1
      r: 1
    E08000034:
      'n': Kirklees
      colour: '#722EA5'
      q: -1
      r: -1
    E08000035:
      'n': Leeds
      colour: '#F9BC26'
      q: 0
      r: 0
    E07000169:
      'n': Selby
      colour: '#1DD3A7'
      q: 1
      r: 0
    E08000036:
      'n': Wakefield
      colour: '#EF3AAB'
      q: 0
      r: -1
    E06000014:
      'n': York
      colour: '#F92626'
      q: 0
      r: 1
value: colour
JSON 
{
	"hexjson": {
		"layout": "odd-r",
		"hexes": {
			"E08000016": {
				"n": "Barnsley",
				"colour": "#E6007C",
				"q": 0,
				"r": -2
			},
			"E08000032": {
				"n": "Bradford",
				"colour": "#FF6700",
				"q": -1,
				"r": 0
			},
			"E08000033": {
				"n": "Calderdale",
				"colour": "#0DBC37",
				"q": -2,
				"r": -1
			},
			"E07000163": {
				"n": "Craven",
				"colour": "#178CFF",
				"q": -2,
				"r": 1
			},
			"E07000165": {
				"n": "Harrogate",
				"colour": "#2f529f",
				"q": -1,
				"r": 1
			},
			"E08000034": {
				"n": "Kirklees",
				"colour": "#722EA5",
				"q": -1,
				"r": -1
			},
			"E08000035": {
				"n": "Leeds",
				"colour": "#F9BC26",
				"q": 0,
				"r": 0
			},
			"E07000169": {
				"n": "Selby",
				"colour": "#1DD3A7",
				"q": 1,
				"r": 0
			},
			"E08000036": {
				"n": "Wakefield",
				"colour": "#EF3AAB",
				"q": 0,
				"r": -1
			},
			"E06000014": {
				"n": "York",
				"colour": "#F92626",
				"q": 0,
				"r": 1
			}
		}
	},
	"value": "colour"
}

5. Hexes with defined colours - data and hexes separately§

Embeddable version

This is the same as the previous example except we pass a data array which sets properties for each hex rather than set those in the HexJSON. We use matchKey to match the key in hexjson → hexes with the required key in a data array item. We also customise the label for each hex to be the first letter.

Hexmap Barnsley Bradford Calderdale Craven Harrogate Kirklees Leeds Selby Wakefield York

This example was made with config:

YAML 
hexjson:
  layout: odd-r
  hexes:
    E08000016:
      'n': Barnsley
      q: 0
      r: -2
    E08000032:
      'n': Bradford
      q: -1
      r: 0
    E08000033:
      'n': Calderdale
      q: -2
      r: -1
    E07000163:
      'n': Craven
      q: -2
      r: 1
    E07000165:
      'n': Harrogate
      q: -1
      r: 1
    E08000034:
      'n': Kirklees
      q: -1
      r: -1
    E08000035:
      'n': Leeds
      q: 0
      r: 0
    E07000169:
      'n': Selby
      q: 1
      r: 0
    E08000036:
      'n': Wakefield
      q: 0
      r: -1
    E06000014:
      'n': York
      q: 0
      r: 1
data:
  - code: E08000016
    colour: '#E6007C'
  - code: E08000032
    colour: '#FF6700'
  - code: E08000033
    colour: '#0DBC37'
  - code: E07000163
    colour: '#178CFF'
  - code: E07000165
    colour: '#2f529f'
  - code: E08000034
    colour: '#722EA5'
  - code: E08000035
    colour: '#F9BC26'
  - code: E07000169
    colour: '#1DD3A7'
  - code: E08000036
    colour: '#EF3AAB'
  - code: E06000014
    colour: '#F92626'
matchKey: code
value: colour
JSON 
{
	"hexjson": {
		"layout": "odd-r",
		"hexes": {
			"E08000016": {
				"n": "Barnsley",
				"q": 0,
				"r": -2
			},
			"E08000032": {
				"n": "Bradford",
				"q": -1,
				"r": 0
			},
			"E08000033": {
				"n": "Calderdale",
				"q": -2,
				"r": -1
			},
			"E07000163": {
				"n": "Craven",
				"q": -2,
				"r": 1
			},
			"E07000165": {
				"n": "Harrogate",
				"q": -1,
				"r": 1
			},
			"E08000034": {
				"n": "Kirklees",
				"q": -1,
				"r": -1
			},
			"E08000035": {
				"n": "Leeds",
				"q": 0,
				"r": 0
			},
			"E07000169": {
				"n": "Selby",
				"q": 1,
				"r": 0
			},
			"E08000036": {
				"n": "Wakefield",
				"q": 0,
				"r": -1
			},
			"E06000014": {
				"n": "York",
				"q": 0,
				"r": 1
			}
		}
	},
	"data": [{
			"code": "E08000016",
			"colour": "#E6007C"
		},{
			"code": "E08000032",
			"colour": "#FF6700"
		},{
			"code": "E08000033",
			"colour": "#0DBC37"
		},{
			"code": "E07000163",
			"colour": "#178CFF"
		},{
			"code": "E07000165",
			"colour": "#2f529f"
		},{
			"code": "E08000034",
			"colour": "#722EA5"
		},{
			"code": "E08000035",
			"colour": "#F9BC26"
		},{
			"code": "E07000169",
			"colour": "#1DD3A7"
		},{
			"code": "E08000036",
			"colour": "#EF3AAB"
		},{
			"code": "E06000014",
			"colour": "#F92626"
		}],
	"matchKey": "code",
	"value": "colour"
}

6. Hexes with defined colours - external hexes§

Embeddable version

If you are using the same HexJSON layout in multiple places it makes sense not to have to repeat that layout every time. To help with this you can specify where the appropriate hexjson is.

Hexmap Barnsley Bradford Calderdale Craven Harrogate Kirklees Leeds Selby Wakefield York

This example was made with config:

YAML 
hexjson: hexjson.yorks
data:
  - code: E08000016
    colour: '#FF6700'
  - code: E08000032
    colour: '#F9BC26'
  - code: E08000033
    colour: '#F9BC26'
  - code: E07000163
    colour: '#1DD3A7'
  - code: E07000165
    colour: '#1DD3A7'
  - code: E08000034
    colour: '#F9BC26'
  - code: E08000035
    colour: '#F9BC26'
  - code: E07000169
    colour: '#1DD3A7'
  - code: E08000036
    colour: '#F9BC26'
  - code: E06000014
    colour: '#1DD3A7'
matchKey: code
value: colour
JSON 
{
	"hexjson": "hexjson.yorks",
	"data": [{
			"code": "E08000016",
			"colour": "#FF6700"
		},{
			"code": "E08000032",
			"colour": "#F9BC26"
		},{
			"code": "E08000033",
			"colour": "#F9BC26"
		},{
			"code": "E07000163",
			"colour": "#1DD3A7"
		},{
			"code": "E07000165",
			"colour": "#1DD3A7"
		},{
			"code": "E08000034",
			"colour": "#F9BC26"
		},{
			"code": "E08000035",
			"colour": "#F9BC26"
		},{
			"code": "E07000169",
			"colour": "#1DD3A7"
		},{
			"code": "E08000036",
			"colour": "#F9BC26"
		},{
			"code": "E06000014",
			"colour": "#1DD3A7"
		}],
	"matchKey": "code",
	"value": "colour"
}

7. Hexes with defined colours - external hexes and data§

Embeddable version

Similarly, you can specify where the data are stored rather that explicitly include them in the YAML.

Hexmap Barnsley Bradford Calderdale Craven Harrogate Kirklees Leeds Selby Wakefield York

This example was made with config:

YAML 
hexjson: hexjson.yorks
data: test.data.hex_yorks
matchKey: code
value: colour
JSON 
{
	"hexjson": "hexjson.yorks",
	"data": "test.data.hex_yorks",
	"matchKey": "code",
	"value": "colour"
}

8. Hexes coloured by a colour scale§

Embeddable version

The same hex layout as above but this time we colour the hexes by a defined scale with an optional min and max. The colour scale is a comma separated string of colour stops each of the form rgb(r,g,b) x% in the style of a CSS linear gradient.

Hexmap Barnsley Bradford Calderdale Craven Harrogate Kirklees Leeds Selby Wakefield York

This example was made with config:

YAML 
hexjson: hexjson.yorks
data:
  - code: E08000016
    LAD21NM: Barnsley
    Aged 15 years and under: 44782
  - code: E08000032
    LAD21NM: Bradford
    Aged 15 years and under: 124837
  - code: E08000033
    LAD21NM: Calderdale
    Aged 15 years and under: 39997
  - code: E07000163
    LAD21NM: Craven
    Aged 15 years and under: 8643
  - code: E07000165
    LAD21NM: Harrogate
    Aged 15 years and under: 27362
  - code: E08000034
    LAD21NM: Kirklees
    Aged 15 years and under: 86941
  - code: E08000035
    LAD21NM: Leeds
    Aged 15 years and under: 153483
  - code: E07000169
    LAD21NM: Selby
    Aged 15 years and under: 16556
  - code: E08000036
    LAD21NM: Wakefield
    Aged 15 years and under: 65832
  - code: E06000014
    LAD21NM: York
    Aged 15 years and under: 30738
matchKey: code
value: Aged 15 years and under
scale: Viridis
JSON 
{
	"hexjson": "hexjson.yorks",
	"data": [{
			"code": "E08000016",
			"LAD21NM": "Barnsley",
			"Aged 15 years and under": 44782
		},{
			"code": "E08000032",
			"LAD21NM": "Bradford",
			"Aged 15 years and under": 124837
		},{
			"code": "E08000033",
			"LAD21NM": "Calderdale",
			"Aged 15 years and under": 39997
		},{
			"code": "E07000163",
			"LAD21NM": "Craven",
			"Aged 15 years and under": 8643
		},{
			"code": "E07000165",
			"LAD21NM": "Harrogate",
			"Aged 15 years and under": 27362
		},{
			"code": "E08000034",
			"LAD21NM": "Kirklees",
			"Aged 15 years and under": 86941
		},{
			"code": "E08000035",
			"LAD21NM": "Leeds",
			"Aged 15 years and under": 153483
		},{
			"code": "E07000169",
			"LAD21NM": "Selby",
			"Aged 15 years and under": 16556
		},{
			"code": "E08000036",
			"LAD21NM": "Wakefield",
			"Aged 15 years and under": 65832
		},{
			"code": "E06000014",
			"LAD21NM": "York",
			"Aged 15 years and under": 30738
		}],
	"matchKey": "code",
	"value": "Aged 15 years and under",
	"scale": "Viridis"
}

9. Add a legend§

Embeddable version

The same hex layout as above but this time we colour the hexes by a defined scale with an optional min and max. The colour scale is a comma separated string of colour stops each of the form rgb(r,g,b) x% in the style of a CSS linear gradient. We also define a legend with 5 levels - three of the levels are given labels. We customise the tooltip labels.

160k
80k
0
Hexmap Barnsley Bradford Calderdale Craven Harrogate Kirklees Leeds Selby Wakefield York

This example was made with config:

YAML 
hexjson: hexjson.yorks
data:
  - code: E08000016
    LAD21NM: Barnsley
    colour: '#E6007C'
    Aged 15 years and under: 44782
  - code: E08000032
    LAD21NM: Bradford
    colour: '#FF6700'
    Aged 15 years and under: 124837
  - code: E08000033
    LAD21NM: Calderdale
    colour: '#0DBC37'
    Aged 15 years and under: 39997
  - code: E07000163
    LAD21NM: Craven
    colour: '#178CFF'
    Aged 15 years and under: 8643
  - code: E07000165
    LAD21NM: Harrogate
    colour: '#2f529f'
    Aged 15 years and under: 27362
  - code: E08000034
    LAD21NM: Kirklees
    colour: '#722EA5'
    Aged 15 years and under: 86941
  - code: E08000035
    LAD21NM: Leeds
    colour: '#F9BC26'
    Aged 15 years and under: 153483
  - code: E07000169
    LAD21NM: Selby
    colour: '#1DD3A7'
    Aged 15 years and under: 16556
  - code: E08000036
    LAD21NM: Wakefield
    colour: '#EF3AAB'
    Aged 15 years and under: 65832
  - code: E06000014
    LAD21NM: York
    colour: '#F92626'
    Aged 15 years and under: 30738
value: Aged 15 years and under
matchKey: code
scale: Viridis
min: 0
max: 160000
legend:
  position: top right
  items:
    - value: 160000
      label: 160k
    - value: 120000
      label: ''
    - value: 80000
      label: 80k
    - value: 40000
      label: ''
    - value: 0
      label: '0'
JSON 
{
	"hexjson": "hexjson.yorks",
	"data": [{
			"code": "E08000016",
			"LAD21NM": "Barnsley",
			"colour": "#E6007C",
			"Aged 15 years and under": 44782
		},{
			"code": "E08000032",
			"LAD21NM": "Bradford",
			"colour": "#FF6700",
			"Aged 15 years and under": 124837
		},{
			"code": "E08000033",
			"LAD21NM": "Calderdale",
			"colour": "#0DBC37",
			"Aged 15 years and under": 39997
		},{
			"code": "E07000163",
			"LAD21NM": "Craven",
			"colour": "#178CFF",
			"Aged 15 years and under": 8643
		},{
			"code": "E07000165",
			"LAD21NM": "Harrogate",
			"colour": "#2f529f",
			"Aged 15 years and under": 27362
		},{
			"code": "E08000034",
			"LAD21NM": "Kirklees",
			"colour": "#722EA5",
			"Aged 15 years and under": 86941
		},{
			"code": "E08000035",
			"LAD21NM": "Leeds",
			"colour": "#F9BC26",
			"Aged 15 years and under": 153483
		},{
			"code": "E07000169",
			"LAD21NM": "Selby",
			"colour": "#1DD3A7",
			"Aged 15 years and under": 16556
		},{
			"code": "E08000036",
			"LAD21NM": "Wakefield",
			"colour": "#EF3AAB",
			"Aged 15 years and under": 65832
		},{
			"code": "E06000014",
			"LAD21NM": "York",
			"colour": "#F92626",
			"Aged 15 years and under": 30738
		}],
	"value": "Aged 15 years and under",
	"matchKey": "code",
	"scale": "Viridis",
	"min": 0,
	"max": 160000,
	"legend": {
		"position": "top right",
		"items": [{
				"value": 160000,
				"label": "160k"
			},{
				"value": 120000,
				"label": ""
			},{
				"value": 80000,
				"label": "80k"
			},{
				"value": 40000,
				"label": ""
			},{
				"value": 0,
				"label": "0"
			}]
	}
}

10. Custom tooltips§

Embeddable version

Colours are set in the HexJSON. We define a tooltip and use a matchKey to define the key in the data to match against a hex. The tooltip can contain replacement values of the form {{ key }}.

Hexmap Barnsley
Aged 15 and under: 44,782 Bradford
Aged 15 and under: 124,837 Calderdale
Aged 15 and under: 39,997 Craven
Aged 15 and under: 8,643 Harrogate
Aged 15 and under: 27,362 Kirklees
Aged 15 and under: 86,941 Leeds
Aged 15 and under: 153,483 Selby
Aged 15 and under: 16,556 Wakefield
Aged 15 and under: 65,832 York
Aged 15 and under: 30,738

This example was made with config:

YAML 
hexjson:
  layout: odd-r
  hexes:
    E08000016:
      'n': Barnsley
      colour: '#E6007C'
      q: 0
      r: -2
    E08000032:
      'n': Bradford
      colour: '#FF6700'
      q: -1
      r: 0
    E08000033:
      'n': Calderdale
      colour: '#0DBC37'
      q: -2
      r: -1
    E07000163:
      'n': Craven
      colour: '#178CFF'
      q: -2
      r: 1
    E07000165:
      'n': Harrogate
      colour: '#2f529f'
      q: -1
      r: 1
    E08000034:
      'n': Kirklees
      colour: '#722EA5'
      q: -1
      r: -1
    E08000035:
      'n': Leeds
      colour: '#F9BC26'
      q: 0
      r: 0
    E07000169:
      'n': Selby
      colour: '#1DD3A7'
      q: 1
      r: 0
    E08000036:
      'n': Wakefield
      colour: '#EF3AAB'
      q: 0
      r: -1
    E06000014:
      'n': York
      colour: '#F92626'
      q: 0
      r: 1
data:
  - code: E08000016
    LAD21NM: Barnsley
    Aged 15 years and under: 44782
  - code: E08000032
    LAD21NM: Bradford
    Aged 15 years and under: 124837
  - code: E08000033
    LAD21NM: Calderdale
    Aged 15 years and under: 39997
  - code: E07000163
    LAD21NM: Craven
    Aged 15 years and under: 8643
  - code: E07000165
    LAD21NM: Harrogate
    Aged 15 years and under: 27362
  - code: E08000034
    LAD21NM: Kirklees
    Aged 15 years and under: 86941
  - code: E08000035
    LAD21NM: Leeds
    Aged 15 years and under: 153483
  - code: E07000169
    LAD21NM: Selby
    Aged 15 years and under: 16556
  - code: E08000036
    LAD21NM: Wakefield
    Aged 15 years and under: 65832
  - code: E06000014
    LAD21NM: York
    Aged 15 years and under: 30738
value: colour
matchKey: code
tooltip: >-
  {{ LAD21NM }}<br />Aged 15 and under: {{ Aged 15 years and under |
  toLocaleString() }}
JSON 
{
	"hexjson": {
		"layout": "odd-r",
		"hexes": {
			"E08000016": {
				"n": "Barnsley",
				"colour": "#E6007C",
				"q": 0,
				"r": -2
			},
			"E08000032": {
				"n": "Bradford",
				"colour": "#FF6700",
				"q": -1,
				"r": 0
			},
			"E08000033": {
				"n": "Calderdale",
				"colour": "#0DBC37",
				"q": -2,
				"r": -1
			},
			"E07000163": {
				"n": "Craven",
				"colour": "#178CFF",
				"q": -2,
				"r": 1
			},
			"E07000165": {
				"n": "Harrogate",
				"colour": "#2f529f",
				"q": -1,
				"r": 1
			},
			"E08000034": {
				"n": "Kirklees",
				"colour": "#722EA5",
				"q": -1,
				"r": -1
			},
			"E08000035": {
				"n": "Leeds",
				"colour": "#F9BC26",
				"q": 0,
				"r": 0
			},
			"E07000169": {
				"n": "Selby",
				"colour": "#1DD3A7",
				"q": 1,
				"r": 0
			},
			"E08000036": {
				"n": "Wakefield",
				"colour": "#EF3AAB",
				"q": 0,
				"r": -1
			},
			"E06000014": {
				"n": "York",
				"colour": "#F92626",
				"q": 0,
				"r": 1
			}
		}
	},
	"data": [{
			"code": "E08000016",
			"LAD21NM": "Barnsley",
			"Aged 15 years and under": 44782
		},{
			"code": "E08000032",
			"LAD21NM": "Bradford",
			"Aged 15 years and under": 124837
		},{
			"code": "E08000033",
			"LAD21NM": "Calderdale",
			"Aged 15 years and under": 39997
		},{
			"code": "E07000163",
			"LAD21NM": "Craven",
			"Aged 15 years and under": 8643
		},{
			"code": "E07000165",
			"LAD21NM": "Harrogate",
			"Aged 15 years and under": 27362
		},{
			"code": "E08000034",
			"LAD21NM": "Kirklees",
			"Aged 15 years and under": 86941
		},{
			"code": "E08000035",
			"LAD21NM": "Leeds",
			"Aged 15 years and under": 153483
		},{
			"code": "E07000169",
			"LAD21NM": "Selby",
			"Aged 15 years and under": 16556
		},{
			"code": "E08000036",
			"LAD21NM": "Wakefield",
			"Aged 15 years and under": 65832
		},{
			"code": "E06000014",
			"LAD21NM": "York",
			"Aged 15 years and under": 30738
		}],
	"value": "colour",
	"matchKey": "code",
	"tooltip": "{{ LAD21NM }}<br />Aged 15 and under: {{ Aged 15 years and under | toLocaleString() }}"
}

11. Filter hexes§

Embeddable version

Note that this feature is a progressive enhancement and will only function if Javascript is enabled.

We can add an interactive filter to our hex map. We can set tools → filter → label to the name of a column in the data - this defines the text used in the filter drop-down list. We can set the maximum number of results to show in the filter drop down using tools → filter → max.

Hexmap Barnsley
Median private sector rents
2021: £475 Bradford
Median private sector rents
2021: £525 Calderdale
Median private sector rents
2021: £500 Craven
Median private sector rents
2021: £580 Harrogate
Median private sector rents
2021: £750 Kirklees
Median private sector rents
2021: £525 Leeds
Median private sector rents
2021: £700 Selby
Median private sector rents
2021: £595 Wakefield
Median private sector rents
2021: £550 York
Median private sector rents
2021: £780
Data: West Yorkshire Combined Authority

This example was made with config:

YAML 
hexjson:
  layout: odd-r
  hexes:
    E08000016:
      'n': Barnsley
      colour: '#E6007C'
      q: 0
      r: -2
    E08000032:
      'n': Bradford
      colour: '#FF6700'
      q: -1
      r: 0
    E08000033:
      'n': Calderdale
      colour: '#0DBC37'
      q: -2
      r: -1
    E07000163:
      'n': Craven
      colour: '#178CFF'
      q: -2
      r: 1
    E07000165:
      'n': Harrogate
      colour: '#2f529f'
      q: -1
      r: 1
    E08000034:
      'n': Kirklees
      colour: '#722EA5'
      q: -1
      r: -1
    E08000035:
      'n': Leeds
      colour: '#F9BC26'
      q: 0
      r: 0
    E07000169:
      'n': Selby
      colour: '#1DD3A7'
      q: 1
      r: 0
    E08000036:
      'n': Wakefield
      colour: '#EF3AAB'
      q: 0
      r: -1
    E06000014:
      'n': York
      colour: '#F92626'
      q: 0
      r: 1
data:
  - '2016': 433
    '2017': 450
    '2018': 520
    '2019': 450
    '2020': 475
    '2021': 475
    code: E08000016
    LAD21NM: Barnsley
  - '2016': 475
    '2017': 495
    '2018': 495
    '2019': 500
    '2020': 500
    '2021': 525
    code: E08000032
    LAD21NM: Bradford
  - '2016': 475
    '2017': 495
    '2018': 495
    '2019': 495
    '2020': 495
    '2021': 500
    code: E08000033
    LAD21NM: Calderdale
  - '2016': 550
    '2017': 560
    '2018': 550
    '2019': 575
    '2020': 575
    '2021': 580
    code: E07000163
    LAD21NM: Craven
  - '2016': 700
    '2017': 720
    '2018': 725
    '2019': 725
    '2020': 745
    '2021': 750
    code: E07000165
    LAD21NM: Harrogate
  - '2016': 475
    '2017': 495
    '2018': 495
    '2019': 500
    '2020': 500
    '2021': 525
    code: E08000034
    LAD21NM: Kirklees
  - '2016': 600
    '2017': 650
    '2018': 671
    '2019': 675
    '2020': 725
    '2021': 700
    code: E08000035
    LAD21NM: Leeds
  - '2016': 550
    '2017': 550
    '2018': 550
    '2019': 570
    '2020': 595
    '2021': 595
    code: E07000169
    LAD21NM: Selby
  - '2016': 500
    '2017': 520
    '2018': 525
    '2019': 525
    '2020': 550
    '2021': 550
    code: E08000036
    LAD21NM: Wakefield
  - '2016': 700
    '2017': 745
    '2018': 795
    '2019': 775
    '2020': 750
    '2021': 780
    code: E06000014
    LAD21NM: York
columns:
  - name: filterLabel
    template: '{{ LAD21NM }} ({{ code }})'
value: 2021
scale: Viridis
matchKey: code
tools:
  filter:
    label: filterLabel
    position: top left
tooltip: >-
  <strong>{{ LAD21NM }}</strong><br />Median private sector rents<br />2021:
  <strong>&pound;{{ 2021 | toLocaleString() }}</strong>
attribution: >
  Data: <a
  href="https://www.westyorks-ca.gov.uk/media/8790/lcr-housing-delivery-monitoring-report-2020-21-4.pdf">West
  Yorkshire Combined Authority</a>
JSON 
{
	"hexjson": {
		"layout": "odd-r",
		"hexes": {
			"E08000016": {
				"n": "Barnsley",
				"colour": "#E6007C",
				"q": 0,
				"r": -2
			},
			"E08000032": {
				"n": "Bradford",
				"colour": "#FF6700",
				"q": -1,
				"r": 0
			},
			"E08000033": {
				"n": "Calderdale",
				"colour": "#0DBC37",
				"q": -2,
				"r": -1
			},
			"E07000163": {
				"n": "Craven",
				"colour": "#178CFF",
				"q": -2,
				"r": 1
			},
			"E07000165": {
				"n": "Harrogate",
				"colour": "#2f529f",
				"q": -1,
				"r": 1
			},
			"E08000034": {
				"n": "Kirklees",
				"colour": "#722EA5",
				"q": -1,
				"r": -1
			},
			"E08000035": {
				"n": "Leeds",
				"colour": "#F9BC26",
				"q": 0,
				"r": 0
			},
			"E07000169": {
				"n": "Selby",
				"colour": "#1DD3A7",
				"q": 1,
				"r": 0
			},
			"E08000036": {
				"n": "Wakefield",
				"colour": "#EF3AAB",
				"q": 0,
				"r": -1
			},
			"E06000014": {
				"n": "York",
				"colour": "#F92626",
				"q": 0,
				"r": 1
			}
		}
	},
	"data": [{
			"2016": 433,
			"2017": 450,
			"2018": 520,
			"2019": 450,
			"2020": 475,
			"2021": 475,
			"code": "E08000016",
			"LAD21NM": "Barnsley"
		},{
			"2016": 475,
			"2017": 495,
			"2018": 495,
			"2019": 500,
			"2020": 500,
			"2021": 525,
			"code": "E08000032",
			"LAD21NM": "Bradford"
		},{
			"2016": 475,
			"2017": 495,
			"2018": 495,
			"2019": 495,
			"2020": 495,
			"2021": 500,
			"code": "E08000033",
			"LAD21NM": "Calderdale"
		},{
			"2016": 550,
			"2017": 560,
			"2018": 550,
			"2019": 575,
			"2020": 575,
			"2021": 580,
			"code": "E07000163",
			"LAD21NM": "Craven"
		},{
			"2016": 700,
			"2017": 720,
			"2018": 725,
			"2019": 725,
			"2020": 745,
			"2021": 750,
			"code": "E07000165",
			"LAD21NM": "Harrogate"
		},{
			"2016": 475,
			"2017": 495,
			"2018": 495,
			"2019": 500,
			"2020": 500,
			"2021": 525,
			"code": "E08000034",
			"LAD21NM": "Kirklees"
		},{
			"2016": 600,
			"2017": 650,
			"2018": 671,
			"2019": 675,
			"2020": 725,
			"2021": 700,
			"code": "E08000035",
			"LAD21NM": "Leeds"
		},{
			"2016": 550,
			"2017": 550,
			"2018": 550,
			"2019": 570,
			"2020": 595,
			"2021": 595,
			"code": "E07000169",
			"LAD21NM": "Selby"
		},{
			"2016": 500,
			"2017": 520,
			"2018": 525,
			"2019": 525,
			"2020": 550,
			"2021": 550,
			"code": "E08000036",
			"LAD21NM": "Wakefield"
		},{
			"2016": 700,
			"2017": 745,
			"2018": 795,
			"2019": 775,
			"2020": 750,
			"2021": 780,
			"code": "E06000014",
			"LAD21NM": "York"
		}],
	"columns": [{
			"name": "filterLabel",
			"template": "{{ LAD21NM }} ({{ code }})"
		}],
	"value": 2021,
	"scale": "Viridis",
	"matchKey": "code",
	"tools": {
		"filter": {
			"label": "filterLabel",
			"position": "top left"
		}
	},
	"tooltip": "<strong>{{ LAD21NM }}</strong><br />Median private sector rents<br />2021: <strong>&pound;{{ 2021 | toLocaleString() }}</strong>",
	"attribution": "Data: <a href=\"https://www.westyorks-ca.gov.uk/media/8790/lcr-housing-delivery-monitoring-report-2020-21-4.pdf\">West Yorkshire Combined Authority</a>\n"
}

12. Add an interactive slider§

Embeddable version

Note that this feature is a progressive enhancement and will only function if Javascript is enabled.

Sometimes you may have multi-epoch data. If you want the person viewing the page to be able to see these different epochs on the same cartogram, you can add an interactive slider. To define which columns to use we pass an ordered array to tools → slider → columns. In this example we have numeric data for the years 2016 to 2021 so we will set it to [2016,2017,2018,2019,2020,2021].

In the previous example we used 2021 in the tooltip to reference the column that the value was taken from. But now the active column depends on the slider position. We need to refer to the current value differently; use the special replacement {{ _value }} to access the active data column.

Hexmap Barnsley
Median private sector rents
2019: £450 Bradford
Median private sector rents
2019: £500 Calderdale
Median private sector rents
2019: £495 Craven
Median private sector rents
2019: £575 Harrogate
Median private sector rents
2019: £725 Kirklees
Median private sector rents
2019: £500 Leeds
Median private sector rents
2019: £675 Selby
Median private sector rents
2019: £570 Wakefield
Median private sector rents
2019: £525 York
Median private sector rents
2019: £775
Data: West Yorkshire Combined Authority

This example was made with config:

YAML 
width: 500
hexjson:
  layout: odd-r
  hexes:
    E08000016:
      'n': Barnsley
      colour: '#E6007C'
      q: 0
      r: -2
    E08000032:
      'n': Bradford
      colour: '#FF6700'
      q: -1
      r: 0
    E08000033:
      'n': Calderdale
      colour: '#0DBC37'
      q: -2
      r: -1
    E07000163:
      'n': Craven
      colour: '#178CFF'
      q: -2
      r: 1
    E07000165:
      'n': Harrogate
      colour: '#2f529f'
      q: -1
      r: 1
    E08000034:
      'n': Kirklees
      colour: '#722EA5'
      q: -1
      r: -1
    E08000035:
      'n': Leeds
      colour: '#F9BC26'
      q: 0
      r: 0
    E07000169:
      'n': Selby
      colour: '#1DD3A7'
      q: 1
      r: 0
    E08000036:
      'n': Wakefield
      colour: '#EF3AAB'
      q: 0
      r: -1
    E06000014:
      'n': York
      colour: '#F92626'
      q: 0
      r: 1
data:
  - '2016': 433
    '2017': 450
    '2018': 520
    '2019': 450
    '2020': 475
    '2021': 475
    code: E08000016
    LAD21NM: Barnsley
  - '2016': 475
    '2017': 495
    '2018': 495
    '2019': 500
    '2020': 500
    '2021': 525
    code: E08000032
    LAD21NM: Bradford
  - '2016': 475
    '2017': 495
    '2018': 495
    '2019': 495
    '2020': 495
    '2021': 500
    code: E08000033
    LAD21NM: Calderdale
  - '2016': 550
    '2017': 560
    '2018': 550
    '2019': 575
    '2020': 575
    '2021': 580
    code: E07000163
    LAD21NM: Craven
  - '2016': 700
    '2017': 720
    '2018': 725
    '2019': 725
    '2020': 745
    '2021': 750
    code: E07000165
    LAD21NM: Harrogate
  - '2016': 475
    '2017': 495
    '2018': 495
    '2019': 500
    '2020': 500
    '2021': 525
    code: E08000034
    LAD21NM: Kirklees
  - '2016': 600
    '2017': 650
    '2018': 671
    '2019': 675
    '2020': 725
    '2021': 700
    code: E08000035
    LAD21NM: Leeds
  - '2016': 550
    '2017': 550
    '2018': 550
    '2019': 570
    '2020': 595
    '2021': 595
    code: E07000169
    LAD21NM: Selby
  - '2016': 500
    '2017': 520
    '2018': 525
    '2019': 525
    '2020': 550
    '2021': 550
    code: E08000036
    LAD21NM: Wakefield
  - '2016': 700
    '2017': 745
    '2018': 795
    '2019': 775
    '2020': 750
    '2021': 780
    code: E06000014
    LAD21NM: York
columns:
  - name: filterLabel
    template: '{{ LAD21NM }} ({{ code }})'
value: 2019
scale: Viridis
matchKey: code
tools:
  slider:
    columns:
      - '2016'
      - '2017'
      - '2018'
      - '2019'
      - '2020'
      - '2021'
    width: 500px
    position: bottom
tooltip: >-
  <strong>{{ LAD21NM }}</strong><br />Median private sector rents<br />{{ _value
  }}: <strong>&pound;{{ {{ _value }} | toLocaleString() }}</strong>
attribution: >
  Data: <a
  href="https://www.westyorks-ca.gov.uk/media/8790/lcr-housing-delivery-monitoring-report-2020-21-4.pdf">West
  Yorkshire Combined Authority</a>
JSON 
{
	"width": 500,
	"hexjson": {
		"layout": "odd-r",
		"hexes": {
			"E08000016": {
				"n": "Barnsley",
				"colour": "#E6007C",
				"q": 0,
				"r": -2
			},
			"E08000032": {
				"n": "Bradford",
				"colour": "#FF6700",
				"q": -1,
				"r": 0
			},
			"E08000033": {
				"n": "Calderdale",
				"colour": "#0DBC37",
				"q": -2,
				"r": -1
			},
			"E07000163": {
				"n": "Craven",
				"colour": "#178CFF",
				"q": -2,
				"r": 1
			},
			"E07000165": {
				"n": "Harrogate",
				"colour": "#2f529f",
				"q": -1,
				"r": 1
			},
			"E08000034": {
				"n": "Kirklees",
				"colour": "#722EA5",
				"q": -1,
				"r": -1
			},
			"E08000035": {
				"n": "Leeds",
				"colour": "#F9BC26",
				"q": 0,
				"r": 0
			},
			"E07000169": {
				"n": "Selby",
				"colour": "#1DD3A7",
				"q": 1,
				"r": 0
			},
			"E08000036": {
				"n": "Wakefield",
				"colour": "#EF3AAB",
				"q": 0,
				"r": -1
			},
			"E06000014": {
				"n": "York",
				"colour": "#F92626",
				"q": 0,
				"r": 1
			}
		}
	},
	"data": [{
			"2016": 433,
			"2017": 450,
			"2018": 520,
			"2019": 450,
			"2020": 475,
			"2021": 475,
			"code": "E08000016",
			"LAD21NM": "Barnsley"
		},{
			"2016": 475,
			"2017": 495,
			"2018": 495,
			"2019": 500,
			"2020": 500,
			"2021": 525,
			"code": "E08000032",
			"LAD21NM": "Bradford"
		},{
			"2016": 475,
			"2017": 495,
			"2018": 495,
			"2019": 495,
			"2020": 495,
			"2021": 500,
			"code": "E08000033",
			"LAD21NM": "Calderdale"
		},{
			"2016": 550,
			"2017": 560,
			"2018": 550,
			"2019": 575,
			"2020": 575,
			"2021": 580,
			"code": "E07000163",
			"LAD21NM": "Craven"
		},{
			"2016": 700,
			"2017": 720,
			"2018": 725,
			"2019": 725,
			"2020": 745,
			"2021": 750,
			"code": "E07000165",
			"LAD21NM": "Harrogate"
		},{
			"2016": 475,
			"2017": 495,
			"2018": 495,
			"2019": 500,
			"2020": 500,
			"2021": 525,
			"code": "E08000034",
			"LAD21NM": "Kirklees"
		},{
			"2016": 600,
			"2017": 650,
			"2018": 671,
			"2019": 675,
			"2020": 725,
			"2021": 700,
			"code": "E08000035",
			"LAD21NM": "Leeds"
		},{
			"2016": 550,
			"2017": 550,
			"2018": 550,
			"2019": 570,
			"2020": 595,
			"2021": 595,
			"code": "E07000169",
			"LAD21NM": "Selby"
		},{
			"2016": 500,
			"2017": 520,
			"2018": 525,
			"2019": 525,
			"2020": 550,
			"2021": 550,
			"code": "E08000036",
			"LAD21NM": "Wakefield"
		},{
			"2016": 700,
			"2017": 745,
			"2018": 795,
			"2019": 775,
			"2020": 750,
			"2021": 780,
			"code": "E06000014",
			"LAD21NM": "York"
		}],
	"columns": [{
			"name": "filterLabel",
			"template": "{{ LAD21NM }} ({{ code }})"
		}],
	"value": 2019,
	"scale": "Viridis",
	"matchKey": "code",
	"tools": {
		"slider": {
			"columns": [
				"2016",
				"2017",
				"2018",
				"2019",
				"2020",
				"2021"
			],
			"width": "500px",
			"position": "bottom"
		}
	},
	"tooltip": "<strong>{{ LAD21NM }}</strong><br />Median private sector rents<br />{{ _value }}: <strong>&pound;{{ {{ _value }} | toLocaleString() }}</strong>",
	"attribution": "Data: <a href=\"https://www.westyorks-ca.gov.uk/media/8790/lcr-housing-delivery-monitoring-report-2020-21-4.pdf\">West Yorkshire Combined Authority</a>\n"
}

13. Draw boundaries§

Embeddable version

We can add styled boundaries to our hex map if our HexJSON contains boundaries. To style the boundaries we build a dictionary boundaries where each dictionary item is either:

  • the properties to apply to a boundary sharing that key
  • a reference to another boundary key (so we can re-use the same properties multiple times)
  • a reference to the type property of a HexJSON boundary

If there are no properties for a particular style it won't be drawn.

Hexmap Median Private Sector Rents
Barnsley (2021): £475 Median Private Sector Rents
Bradford (2021): £525 Median Private Sector Rents
Calderdale (2021): £500 Median Private Sector Rents
Craven (2021): £580 Median Private Sector Rents
Harrogate (2021): £750 Median Private Sector Rents
Kirklees (2021): £525 Median Private Sector Rents
Leeds (2021): £700 Median Private Sector Rents
Selby (2021): £595 Median Private Sector Rents
Wakefield (2021): £550 Median Private Sector Rents
York (2021): £780
Data: West Yorkshire Combined Authority

This example was made with config:

YAML 
hexjson:
  layout: odd-r
  hexes:
    E08000016:
      'n': Barnsley
      colour: '#E6007C'
      q: 0
      r: -2
    E08000032:
      'n': Bradford
      colour: '#FF6700'
      q: -1
      r: 0
    E08000033:
      'n': Calderdale
      colour: '#0DBC37'
      q: -2
      r: -1
    E07000163:
      'n': Craven
      colour: '#178CFF'
      q: -2
      r: 1
    E07000165:
      'n': Harrogate
      colour: '#2f529f'
      q: -1
      r: 1
    E08000034:
      'n': Kirklees
      colour: '#722EA5'
      q: -1
      r: -1
    E08000035:
      'n': Leeds
      colour: '#F9BC26'
      q: 0
      r: 0
    E07000169:
      'n': Selby
      colour: '#1DD3A7'
      q: 1
      r: 0
    E08000036:
      'n': Wakefield
      colour: '#EF3AAB'
      q: 0
      r: -1
    E06000014:
      'n': York
      colour: '#F92626'
      q: 0
      r: 1
  boundaries:
    westyorks:
      edges:
        - q: -1
          r: 0
          e: 6
        - q: -1
          r: 0
          e: 1
        - q: 0
          r: 0
          e: 6
        - q: 0
          r: 0
          e: 1
        - q: 0
          r: 0
          e: 2
        - q: 0
          r: -1
          e: 1
        - q: 0
          r: -1
          e: 4
        - q: -1
          r: -1
          e: 3
data:
  - '2016': 433
    '2017': 450
    '2018': 520
    '2019': 450
    '2020': 475
    '2021': 475
    code: E08000016
    LAD21NM: Barnsley
  - '2016': 475
    '2017': 495
    '2018': 495
    '2019': 500
    '2020': 500
    '2021': 525
    code: E08000032
    LAD21NM: Bradford
  - '2016': 475
    '2017': 495
    '2018': 495
    '2019': 495
    '2020': 495
    '2021': 500
    code: E08000033
    LAD21NM: Calderdale
  - '2016': 550
    '2017': 560
    '2018': 550
    '2019': 575
    '2020': 575
    '2021': 580
    code: E07000163
    LAD21NM: Craven
  - '2016': 700
    '2017': 720
    '2018': 725
    '2019': 725
    '2020': 745
    '2021': 750
    code: E07000165
    LAD21NM: Harrogate
  - '2016': 475
    '2017': 495
    '2018': 495
    '2019': 500
    '2020': 500
    '2021': 525
    code: E08000034
    LAD21NM: Kirklees
  - '2016': 600
    '2017': 650
    '2018': 671
    '2019': 675
    '2020': 725
    '2021': 700
    code: E08000035
    LAD21NM: Leeds
  - '2016': 550
    '2017': 550
    '2018': 550
    '2019': 570
    '2020': 595
    '2021': 595
    code: E07000169
    LAD21NM: Selby
  - '2016': 500
    '2017': 520
    '2018': 525
    '2019': 525
    '2020': 550
    '2021': 550
    code: E08000036
    LAD21NM: Wakefield
  - '2016': 700
    '2017': 745
    '2018': 795
    '2019': 775
    '2020': 750
    '2021': 780
    code: E06000014
    LAD21NM: York
columns:
  - name: filterLabel
    template: '{{ LAD21NM }} ({{ code }})'
value: 2021
scale: Viridis
matchKey: code
tools:
  filter:
    label: filterLabel
    position: top left
tooltip: >-
  Median Private Sector Rents<br />{{ LAD21NM }} (2021): <strong>&pound;{{ 2021
  | toLocaleString() }}</strong>
boundaries:
  county:
    stroke: white
    stroke-width: 3
    stroke-dasharray: 10 8
    stroke-linecap: round
  westyorks: county
attribution: >
  Data: <a
  href="https://www.westyorks-ca.gov.uk/media/8790/lcr-housing-delivery-monitoring-report-2020-21-4.pdf">West
  Yorkshire Combined Authority</a>
JSON 
{
	"hexjson": {
		"layout": "odd-r",
		"hexes": {
			"E08000016": {
				"n": "Barnsley",
				"colour": "#E6007C",
				"q": 0,
				"r": -2
			},
			"E08000032": {
				"n": "Bradford",
				"colour": "#FF6700",
				"q": -1,
				"r": 0
			},
			"E08000033": {
				"n": "Calderdale",
				"colour": "#0DBC37",
				"q": -2,
				"r": -1
			},
			"E07000163": {
				"n": "Craven",
				"colour": "#178CFF",
				"q": -2,
				"r": 1
			},
			"E07000165": {
				"n": "Harrogate",
				"colour": "#2f529f",
				"q": -1,
				"r": 1
			},
			"E08000034": {
				"n": "Kirklees",
				"colour": "#722EA5",
				"q": -1,
				"r": -1
			},
			"E08000035": {
				"n": "Leeds",
				"colour": "#F9BC26",
				"q": 0,
				"r": 0
			},
			"E07000169": {
				"n": "Selby",
				"colour": "#1DD3A7",
				"q": 1,
				"r": 0
			},
			"E08000036": {
				"n": "Wakefield",
				"colour": "#EF3AAB",
				"q": 0,
				"r": -1
			},
			"E06000014": {
				"n": "York",
				"colour": "#F92626",
				"q": 0,
				"r": 1
			}
		},
		"boundaries": {
			"westyorks": {
				"edges": [{
						"q": -1,
						"r": 0,
						"e": 6
					},{
						"q": -1,
						"r": 0,
						"e": 1
					},{
						"q": 0,
						"r": 0,
						"e": 6
					},{
						"q": 0,
						"r": 0,
						"e": 1
					},{
						"q": 0,
						"r": 0,
						"e": 2
					},{
						"q": 0,
						"r": -1,
						"e": 1
					},{
						"q": 0,
						"r": -1,
						"e": 4
					},{
						"q": -1,
						"r": -1,
						"e": 3
					}]
			}
		}
	},
	"data": [{
			"2016": 433,
			"2017": 450,
			"2018": 520,
			"2019": 450,
			"2020": 475,
			"2021": 475,
			"code": "E08000016",
			"LAD21NM": "Barnsley"
		},{
			"2016": 475,
			"2017": 495,
			"2018": 495,
			"2019": 500,
			"2020": 500,
			"2021": 525,
			"code": "E08000032",
			"LAD21NM": "Bradford"
		},{
			"2016": 475,
			"2017": 495,
			"2018": 495,
			"2019": 495,
			"2020": 495,
			"2021": 500,
			"code": "E08000033",
			"LAD21NM": "Calderdale"
		},{
			"2016": 550,
			"2017": 560,
			"2018": 550,
			"2019": 575,
			"2020": 575,
			"2021": 580,
			"code": "E07000163",
			"LAD21NM": "Craven"
		},{
			"2016": 700,
			"2017": 720,
			"2018": 725,
			"2019": 725,
			"2020": 745,
			"2021": 750,
			"code": "E07000165",
			"LAD21NM": "Harrogate"
		},{
			"2016": 475,
			"2017": 495,
			"2018": 495,
			"2019": 500,
			"2020": 500,
			"2021": 525,
			"code": "E08000034",
			"LAD21NM": "Kirklees"
		},{
			"2016": 600,
			"2017": 650,
			"2018": 671,
			"2019": 675,
			"2020": 725,
			"2021": 700,
			"code": "E08000035",
			"LAD21NM": "Leeds"
		},{
			"2016": 550,
			"2017": 550,
			"2018": 550,
			"2019": 570,
			"2020": 595,
			"2021": 595,
			"code": "E07000169",
			"LAD21NM": "Selby"
		},{
			"2016": 500,
			"2017": 520,
			"2018": 525,
			"2019": 525,
			"2020": 550,
			"2021": 550,
			"code": "E08000036",
			"LAD21NM": "Wakefield"
		},{
			"2016": 700,
			"2017": 745,
			"2018": 795,
			"2019": 775,
			"2020": 750,
			"2021": 780,
			"code": "E06000014",
			"LAD21NM": "York"
		}],
	"columns": [{
			"name": "filterLabel",
			"template": "{{ LAD21NM }} ({{ code }})"
		}],
	"value": 2021,
	"scale": "Viridis",
	"matchKey": "code",
	"tools": {
		"filter": {
			"label": "filterLabel",
			"position": "top left"
		}
	},
	"tooltip": "Median Private Sector Rents<br />{{ LAD21NM }} (2021): <strong>&pound;{{ 2021 | toLocaleString() }}</strong>",
	"boundaries": {
		"county": {
			"stroke": "white",
			"stroke-width": 3,
			"stroke-dasharray": "10 8",
			"stroke-linecap": "round"
		},
		"westyorks": "county"
	},
	"attribution": "Data: <a href=\"https://www.westyorks-ca.gov.uk/media/8790/lcr-housing-delivery-monitoring-report-2020-21-4.pdf\">West Yorkshire Combined Authority</a>\n"
}

14. Big example§

Embeddable version

This is a large map showing local authorities coloured by region with a layout loaded from an external source. We provide a key with a title and an entry for each region. Each individual hex label is explicitly set to be an empty string.

West Midlands
Wales
Yorkshire and the Humber
South West
South East
Scotland
Northern Ireland
North West
North East
London
East Midlands
East Anglia
Hexmap Aberdeen City
S12000033 Aberdeenshire
S12000034 Adur
E07000223 Allerdale
E07000026 Amber Valley
E07000032 Angus
S12000041 Antrim and Newtownabbey
N09000001 Ards and North Down
N09000011 Argyll and Bute
S12000035 Armagh City, Banbridge and Craigavon
N09000002 Arun
E07000224 Ashfield
E07000170 Ashford
E07000105 Babergh
E07000200 Barking and Dagenham
E09000002 Barnet
E09000003 Barnsley
E08000016 Barrow-in-Furness
E07000027 Basildon
E07000066 Basingstoke and Deane
E07000084 Bassetlaw
E07000171 Bath and North East Somerset
E06000022 Bedford
E06000055 Belfast
N09000003 Bexley
E09000004 Birmingham
E08000025 Blaby
E07000129 Blackburn with Darwen
E06000008 Blackpool
E06000009 Blaenau Gwent
W06000019 Bolsover
E07000033 Bolton
E08000001 Boston
E07000136 Bournemouth, Christchurch and Poole
E06000058 Bracknell Forest
E06000036 Bradford
E08000032 Braintree
E07000067 Breckland
E07000143 Brent
E09000005 Brentwood
E07000068 Bridgend
W06000013 Brighton and Hove
E06000043 Bristol, City of
E06000023 Broadland
E07000144 Bromley
E09000006 Bromsgrove
E07000234 Broxbourne
E07000095 Broxtowe
E07000172 Buckinghamshire
E06000060 Burnley
E07000117 Bury
E08000002 Caerphilly
W06000018 Calderdale
E08000033 Cambridge
E07000008 Camden
E09000007 Cannock Chase
E07000192 Canterbury
E07000106 Cardiff
W06000015 Carlisle
E07000028 Carmarthenshire
W06000010 Castle Point
E07000069 Causeway Coast and Glens
N09000004 Central Bedfordshire
E06000056 Ceredigion
W06000008 Charnwood
E07000130 Chelmsford
E07000070 Cheltenham
E07000078 Cherwell
E07000177 Cheshire East
E06000049 Cheshire West and Chester
E06000050 Chesterfield
E07000034 Chichester
E07000225 Chorley
E07000118 City of Edinburgh
S12000036 City of London
E09000001 Clackmannanshire
S12000005 Colchester
E07000071 Conwy
W06000003 Copeland
E07000029 Cornwall
E06000052 Cotswold
E07000079 County Durham
E06000047 Coventry
E08000026 Craven
E07000163 Crawley
E07000226 Croydon
E09000008 Dacorum
E07000096 Darlington
E06000005 Dartford
E07000107 Denbighshire
W06000004 Derby
E06000015 Derbyshire Dales
E07000035 Derry City and Strabane
N09000005 Doncaster
E08000017 Dorset
E06000059 Dover
E07000108 Dudley
E08000027 Dumfries and Galloway
S12000006 Dundee City
S12000042 Ealing
E09000009 East Ayrshire
S12000008 East Cambridgeshire
E07000009 East Devon
E07000040 East Dunbartonshire
S12000045 East Hampshire
E07000085 East Hertfordshire
E07000242 East Lindsey
E07000137 East Lothian
S12000010 East Renfrewshire
S12000011 East Riding of Yorkshire
E06000011 East Staffordshire
E07000193 East Suffolk
E07000244 Eastbourne
E07000061 Eastleigh
E07000086 Eden
E07000030 Elmbridge
E07000207 Enfield
E09000010 Epping Forest
E07000072 Epsom and Ewell
E07000208 Erewash
E07000036 Exeter
E07000041 Falkirk
S12000014 Fareham
E07000087 Fenland
E07000010 Fermanagh and Omagh
N09000006 Fife
S12000047 Flintshire
W06000005 Folkestone and Hythe
E07000112 Forest of Dean
E07000080 Fylde
E07000119 Gateshead
E08000037 Gedling
E07000173 Glasgow City
S12000049 Gloucester
E07000081 Gosport
E07000088 Gravesham
E07000109 Great Yarmouth
E07000145 Greenwich
E09000011 Guildford
E07000209 Gwynedd
W06000002 Hackney
E09000012 Halton
E06000006 Hambleton
E07000164 Hammersmith and Fulham
E09000013 Harborough
E07000131 Haringey
E09000014 Harlow
E07000073 Harrogate
E07000165 Harrow
E09000015 Hart
E07000089 Hartlepool
E06000001 Hastings
E07000062 Havant
E07000090 Havering
E09000016 Herefordshire, County of
E06000019 Hertsmere
E07000098 High Peak
E07000037 Highland
S12000017 Hillingdon
E09000017 Hinckley and Bosworth
E07000132 Horsham
E07000227 Hounslow
E09000018 Huntingdonshire
E07000011 Hyndburn
E07000120 Inverclyde
S12000018 Ipswich
E07000202 Isle of Anglesey
W06000001 Isle of Wight
E06000046 Isles of Scilly
E06000053 Islington
E09000019 Kensington and Chelsea
E09000020 King's Lynn and West Norfolk
E07000146 Kingston upon Hull, City of
E06000010 Kingston upon Thames
E09000021 Kirklees
E08000034 Knowsley
E08000011 Lambeth
E09000022 Lancaster
E07000121 Leeds
E08000035 Leicester
E06000016 Lewes
E07000063 Lewisham
E09000023 Lichfield
E07000194 Lincoln
E07000138 Lisburn and Castlereagh
N09000007 Liverpool
E08000012 Luton
E06000032 Maidstone
E07000110 Maldon
E07000074 Malvern Hills
E07000235 Manchester
E08000003 Mansfield
E07000174 Medway
E06000035 Melton
E07000133 Mendip
E07000187 Merthyr Tydfil
W06000024 Merton
E09000024 Mid Devon
E07000042 Mid Suffolk
E07000203 Mid Sussex
E07000228 Mid Ulster
N09000009 Mid and East Antrim
N09000008 Middlesbrough
E06000002 Midlothian
S12000019 Milton Keynes
E06000042 Mole Valley
E07000210 Monmouthshire
W06000021 Moray
S12000020 Na h-Eileanan Siar
S12000013 Neath Port Talbot
W06000012 New Forest
E07000091 Newark and Sherwood
E07000175 Newcastle upon Tyne
E08000021 Newcastle-under-Lyme
E07000195 Newham
E09000025 Newport
W06000022 Newry, Mourne and Down
N09000010 North Ayrshire
S12000021 North Devon
E07000043 North East Derbyshire
E07000038 North East Lincolnshire
E06000012 North Hertfordshire
E07000099 North Kesteven
E07000139 North Lanarkshire
S12000050 North Lincolnshire
E06000013 North Norfolk
E07000147 North Northamptonshire
E06000061 North Somerset
E06000024 North Tyneside
E08000022 North Warwickshire
E07000218 North West Leicestershire
E07000134 Northumberland
E06000057 Norwich
E07000148 Nottingham
E06000018 Nuneaton and Bedworth
E07000219 Oadby and Wigston
E07000135 Oldham
E08000004 Orkney Islands
S12000023 Oxford
E07000178 Pembrokeshire
W06000009 Pendle
E07000122 Perth and Kinross
S12000048 Peterborough
E06000031 Plymouth
E06000026 Portsmouth
E06000044 Powys
W06000023 Preston
E07000123 Reading
E06000038 Redbridge
E09000026 Redcar and Cleveland
E06000003 Redditch
E07000236 Reigate and Banstead
E07000211 Renfrewshire
S12000038 Rhondda Cynon Taf
W06000016 Ribble Valley
E07000124 Richmond upon Thames
E09000027 Richmondshire
E07000166 Rochdale
E08000005 Rochford
E07000075 Rossendale
E07000125 Rother
E07000064 Rotherham
E08000018 Rugby
E07000220 Runnymede
E07000212 Rushcliffe
E07000176 Rushmoor
E07000092 Rutland
E06000017 Ryedale
E07000167 Salford
E08000006 Sandwell
E08000028 Scarborough
E07000168 Scottish Borders
S12000026 Sedgemoor
E07000188 Sefton
E08000014 Selby
E07000169 Sevenoaks
E07000111 Sheffield
E08000019 Shetland Islands
S12000027 Shropshire
E06000051 Slough
E06000039 Solihull
E08000029 Somerset West and Taunton
E07000246 South Ayrshire
S12000028 South Cambridgeshire
E07000012 South Derbyshire
E07000039 South Gloucestershire
E06000025 South Hams
E07000044 South Holland
E07000140 South Kesteven
E07000141 South Lakeland
E07000031 South Lanarkshire
S12000029 South Norfolk
E07000149 South Oxfordshire
E07000179 South Ribble
E07000126 South Somerset
E07000189 South Staffordshire
E07000196 South Tyneside
E08000023 Southampton
E06000045 Southend-on-Sea
E06000033 Southwark
E09000028 Spelthorne
E07000213 St Albans
E07000240 St. Helens
E08000013 Stafford
E07000197 Staffordshire Moorlands
E07000198 Stevenage
E07000243 Stirling
S12000030 Stockport
E08000007 Stockton-on-Tees
E06000004 Stoke-on-Trent
E06000021 Stratford-on-Avon
E07000221 Stroud
E07000082 Sunderland
E08000024 Surrey Heath
E07000214 Sutton
E09000029 Swale
E07000113 Swansea
W06000011 Swindon
E06000030 Tameside
E08000008 Tamworth
E07000199 Tandridge
E07000215 Teignbridge
E07000045 Telford and Wrekin
E06000020 Tendring
E07000076 Test Valley
E07000093 Tewkesbury
E07000083 Thanet
E07000114 Three Rivers
E07000102 Thurrock
E06000034 Tonbridge and Malling
E07000115 Torbay
E06000027 Torfaen
W06000020 Torridge
E07000046 Tower Hamlets
E09000030 Trafford
E08000009 Tunbridge Wells
E07000116 Uttlesford
E07000077 Vale of Glamorgan
W06000014 Vale of White Horse
E07000180 Wakefield
E08000036 Walsall
E08000030 Waltham Forest
E09000031 Wandsworth
E09000032 Warrington
E06000007 Warwick
E07000222 Watford
E07000103 Waverley
E07000216 Wealden
E07000065 Welwyn Hatfield
E07000241 West Berkshire
E06000037 West Devon
E07000047 West Dunbartonshire
S12000039 West Lancashire
E07000127 West Lindsey
E07000142 West Lothian
S12000040 West Northamptonshire
E06000062 West Oxfordshire
E07000181 West Suffolk
E07000245 Westminster
E09000033 Wigan
E08000010 Wiltshire
E06000054 Winchester
E07000094 Windsor and Maidenhead
E06000040 Wirral
E08000015 Woking
E07000217 Wokingham
E06000041 Wolverhampton
E08000031 Worcester
E07000237 Worthing
E07000229 Wrexham
W06000006 Wychavon
E07000238 Wyre
E07000128 Wyre Forest
E07000239 York
E06000014
Credit: Open Innovations

This example was made with config:

YAML 
label: ''
attribution: |
  Credit: Open Innovations
columns:
  - name: filterLabel
    template: '{{ n }} ({{ RGNNM }})'
tooltip: '{{ n }}<br />{{ _id }}'
legend:
  title: Key
  position: top
  items:
    - value: '#FF6700'
      label: East Anglia
    - value: '#00B6FF'
      label: East Midlands
    - value: '#D73058'
      label: London
    - value: '#D60303'
      label: North East
    - value: '#1DD3A7'
      label: North West
    - value: '#722EA5'
      label: Northern Ireland
    - value: '#2254F4'
      label: Scotland
    - value: '#67E767'
      label: South East
    - value: '#178CFF'
      label: South West
    - value: '#F9BC26'
      label: Yorkshire and the Humber
    - value: '#0DBC37'
      label: Wales
    - value: '#E6007C'
      label: West Midlands
hexjson: hexjson.localauthorities
value: colour
tools:
  filter:
    label: filterLabel
    position: top left
boundaries:
  country:
    stroke: white
    stroke-width: 3
    stroke-dasharray: 7 5.65
    stroke-linecap: round
min: 0
max: 1
JSON 
{
	"label": "",
	"attribution": "Credit: Open Innovations\n",
	"columns": [{
			"name": "filterLabel",
			"template": "{{ n }} ({{ RGNNM }})"
		}],
	"tooltip": "{{ n }}<br />{{ _id }}",
	"legend": {
		"title": "Key",
		"position": "top",
		"items": [{
				"value": "#FF6700",
				"label": "East Anglia"
			},{
				"value": "#00B6FF",
				"label": "East Midlands"
			},{
				"value": "#D73058",
				"label": "London"
			},{
				"value": "#D60303",
				"label": "North East"
			},{
				"value": "#1DD3A7",
				"label": "North West"
			},{
				"value": "#722EA5",
				"label": "Northern Ireland"
			},{
				"value": "#2254F4",
				"label": "Scotland"
			},{
				"value": "#67E767",
				"label": "South East"
			},{
				"value": "#178CFF",
				"label": "South West"
			},{
				"value": "#F9BC26",
				"label": "Yorkshire and the Humber"
			},{
				"value": "#0DBC37",
				"label": "Wales"
			},{
				"value": "#E6007C",
				"label": "West Midlands"
			}]
	},
	"hexjson": "hexjson.localauthorities",
	"value": "colour",
	"tools": {
		"filter": {
			"label": "filterLabel",
			"position": "top left"
		}
	},
	"boundaries": {
		"country": {
			"stroke": "white",
			"stroke-width": 3,
			"stroke-dasharray": "7 5.65",
			"stroke-linecap": "round"
		}
	},
	"min": 0,
	"max": 1
}