Treemap

Display hierarchical data using nested rectangles.

Our treemap component renders hierarchical treemaps.

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.hierarchy.treemap', { "config": config } %}{% endcomp %}

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

data - Either a reference to a CSV file in the Lume site or an array of rows with named attributes
columns - As with many of the visualisation types you can optionally add virtual columns.
colours - Define some visualisation-specific named colours.
value - The title of the column that will be used to get the value of the panel.
grouping - An array of column headings by which to group the data. For instance, if you set the grouping to `level_1`, any rows in `level_1` will be grouped together. You can also use this to define a multi-level treemap.
colour - The title of the column to use to set the colour of the treemap cells.
scale - A colour scale to use to colour the cells 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.
tooltip - This is to add tooltips to cells. Either provide the name of an existing/virtual column in the data or construct one using string templates.
attribution - Add a line of attribution text under the visualisation.

1. Minimal§

Embeddable version

This is a minimal treemap visualisation. Default grouping is by the 'name' property (which defautls to name). The size of the blocks corresponds to the count of items in each group.

This example was made with config:

YAML

data: test.data.hierarchy.rows

JSON

{
	"data": "test.data.hierarchy.rows"
}

2. Specify value§

Embeddable version

The value property allows a value property to be used to size the treemap.

This example was made with config:

YAML

data: test.data.hierarchy.rows
value: value

JSON

{
	"data": "test.data.hierarchy.rows",
	"value": "value"
}

3. Group by a different column§

Embeddable version

The grouping property has been specified to define a different grouping. Because no value property has been specified, this is sized based on count of the data items in the group.

This example was made with config:

YAML

data: test.data.hierarchy.rows
grouping:
  - level_1

JSON

{
	"data": "test.data.hierarchy.rows",
	"grouping": [
		"level_1"
	]
}

4. Multi-level treemap§

Embeddable version

Providing multiple levels of hierarchy will group the treemap items together. This example is sized based on the value column

This example was made with config:

YAML

data: test.data.hierarchy.rows
grouping:
  - level_1
  - level_2
  - name
value: value

JSON

{
	"data": "test.data.hierarchy.rows",
	"grouping": [
		"level_1",
		"level_2",
		"name"
	],
	"value": "value"
}

5. Colour value§

Embeddable version

The component, looks for a column named colour in the data to determine the colour of blocks. It is possible to change the name of the column by specifying the colour_value property.

This example was made with config:

YAML

data: test.data.hierarchy.rows
colour: colour_value

JSON

{
	"data": "test.data.hierarchy.rows",
	"colour": "colour_value"
}

6. Colour index§

Embeddable version

If a scale property is provided, and the a value between 0 and 1 is provided in the colour column, the relevant tree node will be coloured based on the value in the range.

This example was made with config:

YAML

data: test.data.hierarchy.rows
colour: colour_index
scale: >
  rgb(122,76,139) 0%, rgb(124,109,168) 12.5%, rgb(115,138,177) 25%,
  rgb(107,164,178) 37.5%, rgb(104,188,170) 50%, rgb(133,211,146) 62.5%,
  rgb(189,229,97) 75%, rgb(254,240,65) 87.5%, rgb(254,240,65) 100%

JSON

{
	"data": "test.data.hierarchy.rows",
	"colour": "colour_index",
	"scale": "rgb(122,76,139) 0%, rgb(124,109,168) 12.5%, rgb(115,138,177) 25%, rgb(107,164,178) 37.5%, rgb(104,188,170) 50%, rgb(133,211,146) 62.5%, rgb(189,229,97) 75%, rgb(254,240,65) 87.5%, rgb(254,240,65) 100%\n"
}

7. Custom tooltips§

Embeddable version

If a tooltip property is provided, a custom tooltip will be used. The tooltip can either refer to a specific column/virtual column in the data, or be a string template.

This example was made with config:

YAML

data: test.data.hierarchy.rows
tooltip: |-
  {{ level_1 }}
  {{ level_2 }}
  {{ name }}: {{ value | toLocaleString() }}
colour: colour_index
scale: Viridis

JSON

{
	"data": "test.data.hierarchy.rows",
	"tooltip": "{{ level_1 }}\n{{ level_2 }}\n{{ name }}: {{ value | toLocaleString() }}",
	"colour": "colour_index",
	"scale": "Viridis"
}