Hierarchy
Updated 5 years ago to v2.2.0 by Flourish team
How to use this template
This template is great for summarising your data across different categories. You can think of it as kind of a visual pivot table. It includes four visualisation types that you can quickly switch between: a treemap (subdivided rectangles), packed circles, a radial partition chart (like a multi-ring pie chart) or a stacked bar chart.
Data requirements
The data should be in 'long-form' i.e. each row represents a single data-point and each column represents a variable. For example:
Film Genre Studio Worldwide Gross ($m)
27 Dresses Comedy Fox 160.31
(500) Days of Summer Comedy Fox 60.72
A Dangerous Method Drama Independent 8.97
A Serious Man Drama Universal 30.68
Across the Universe Romance Independent 29.37
Beginners Comedy Independent 14.31
Dear John Drama Sony 114.97
Usage
Columns can be seen as either categorical (e.g. Genre and Studio) or numeric (e.g. Worldwide Gross).
Choose:
- categorical columns to nest your data by
- numeric columns to size the rectangles by
For example, if we wanted to know which studio took the most revenue we could nest by Studio and size by Worldwide Gross.
If we wanted to further break down each studio into genres, we could nest by Studio and Genre.
If 2 or more columns are chosen to nest you'll be able to zoom into a category by clicking. Zoom out by clicking the triangle that appears in the top right of the chart.
Tips
- You don't have to choose a column to size by. If you do not, the shapes will be sized by the count of data points.
- Click on the popup to freeze it. Click on it again to unfreeze.
- You can choose the number of visible hierarchy levels. Try varying this within a story to gradually break down categories into sub-categories.
- You can also add a filter menu. To do this, set the "Filter" column setting in the data area.
Credits
Created by Peter Cook and the Flourish team.
API information
This section documents API usage specific to this template, so for an introduction we suggest you refer to the generic API documentation instead.
template: @flourish/hierarchy
version: 2
Template data
There are three different formats in which you can supply data to this template. The most convenient for you to use likely depends on the source of your data, as described below.
1. Array of arrays, and a bindings object
You can supply arrays of arrays to opts.data, which might look
like:
{
data: {
data: [
[ "DataColumn1Value1", "DataColumn2Value1",
[ "DataColumn1Value2", "DataColumn2Value2",
[ "DataColumn1Value3", "DataColumn2Value3",
...
]
}
}
where each array of arrays represents the rows in a data sheet.
To tell the API how the values from each column should be
associated with the keys that the template is expecting, you must also supply
an object attached to opts.bindings. (The meanings of the
keys in the bindings object are documented
below.) The minimal bindings you can
supply for this template are as shown in this example:
{
template: "@flourish/hierarchy",
version: "2",
bindings: {
data: {
}
},
data: {
data: [
[ "DataColumn1Value1", "DataColumn2Value1",
[ "DataColumn1Value2", "DataColumn2Value2",
[ "DataColumn1Value3", "DataColumn2Value3",
...
]
}
}
All possible bindings that you can supply are shown in this example:
{
template: "@flourish/hierarchy",
version: "2",
bindings: {
data: {
nest_columns: [0, 1, ...], // index(es) of column(s) in your data
size_column: 2, // index of a column in your data
filter: 3, // index of a column in your data
}
},
data: {
data: [
[ "DataColumn1Value1", "DataColumn2Value1",
[ "DataColumn1Value2", "DataColumn2Value2",
[ "DataColumn1Value3", "DataColumn2Value3",
...
]
}
}
2. Array of objects with arbitrary keys, and a bindings object
This format is most likely useful when you have data from an external source,
such as CSV data loaded from d3-dsv.
You should supply this attached to the opts.data, which might look
like:
{
data: [
{ "DataHeader1": ..., "DataHeader2": ..., ... },
{ "DataHeader1": ..., "DataHeader2": ..., ... },
{ "DataHeader1": ..., "DataHeader2": ..., ... },
...
]
}
... but with the keys being the column headers from your
source data instead. You must also supply an object attached to
opts.bindings. The minimal bindings you can
supply for this template are as shown in this example:
{
template: "@flourish/hierarchy",
version: "2",
bindings: {
data: {
}
},
data: {
data: [
{ "DataHeader1": ..., "DataHeader2": ..., ... },
{ "DataHeader1": ..., "DataHeader2": ..., ... },
{ "DataHeader1": ..., "DataHeader2": ..., ... },
...
]
}
}
All possible bindings that you can supply are shown in this example:
{
template: "@flourish/hierarchy",
version: "2",
bindings: {
data: {
nest_columns: ["DataHeader1", "DataHeader2", ...],
size_column: "DataHeader3",
filter: "DataHeader4",
}
},
data: {
data: [
{ "DataHeader1": ..., "DataHeader2": ..., ... },
{ "DataHeader1": ..., "DataHeader2": ..., ... },
{ "DataHeader1": ..., "DataHeader2": ..., ... },
...
]
}
}
(As before, the keys containing "Header" would be replaced by column names from your data source.)
3. Array of objects with template-defined keys
There is an alternative format you can use, which is likely to be easier to
use if your data is not from a spreadsheet source. With this alternative format
you supply your data to the template as
an array of objects, attached to opts.data, where the keys must
be those used by the template, as documented below. In this case
there is no need to supply a bindings object, since the key names are already
those expected by the template. The required properties in the data
object are as follows (scroll down for a
description of what each property is):
{
template: "@flourish/hierarchy",
version: "2",
data: {
data: [
{
nest_columns: [...]
},
...
]
},
...
}
And the full list of all possible properties is as follows:
{
template: "@flourish/hierarchy",
version: "2",
data: {
data: [
{
nest_columns: [...],
size_column: ...,
filter: ...
},
...
]
},
...
}
Meanings of the template data keys:
- data.nest_columns: nest_columns
- data.size_column: size_column
- data.filter: filter
Template settings
Options for opts.state.
Hierarchy
layout string
Layout. Choose between a treemap, packed circles, radial sunburst or stacked bar chart Allowed values:
num_of_visible_levels number
Visible levels. How many hierarchy levels are visible at once? Min: 1
sort_by string
Sort by. Sort cells by value or by name. Allowed values:
aggregation_type string
Size cells by. Allowed values:
Colours
color.palette colors
Palette.
color.extend boolean
Auto-extend. Automatically generate additional colours when needed to avoid the palette colours being used more than once. Added colours are based on the average lightness and chroma values of the palette. This works best if the palette’s colours do not have very high or low saturation.
color.advanced boolean
Fine tune. Fine tune how additional colours are added to the palette.
color.hue_rotation_angle number
Hue rotation for added colours. Angle, in degrees in HCL colourspace, between one generated colour and the next. The default value, ~360/(Golden ratio), ensures adjacent hues are not too similar. Max: 360
color.custom_palette text
Custom overrides. Type the name of the entity whose colour you want to set, a colon and then a colour (using a name, hex-code or rgb declaration). Multiple colours can be set using multiple lines. For example:<br /><hr />Party 1: red<br />Party 2: #4455AA<br />Party 3: rgb(30,168,26)
zoom_out_button_color color
Button colour.
zoom_out_arrow_color color
Arrow colour.
Treemap
treemap_type string
Layout mode. Allowed values:
treemap_ratio number
Target. The target ratio between width and height, where 1 is sqaure and a large number is a tall or wide rectangle Min: 1
cellPadding string
Padding. Add padding between hierarchy levels Allowed values:
Sunburst
sunburst_inner_radius number
Inner radius. As a % of total radius
sunburst_depth_fade number
Depth fade. How quickly the segments fade with hierachical depth. (Use 1 for no fade.) Min: 0.25 Max: 1
sunburst_labelling string
Labels. How the labels should be oriented Allowed values:
sunburst_bold_labels boolean
Bold labels. Label font is bold
Bar
bar_bar_thickness number
Bar thickness. Bar thickness in pixels Min: 10 Max: 100
bar_bar_padding number
Bar padding. Distance between bars in pixels Max: 50
bar_axis_label_size number
Axis width. How wide the axis label area is
bar_show_value_label boolean
Show value label.
bar_value_label_size number
Space for value labels.
bar_max_value number
Maximum value. The maximum value represented by bar length (leave blank for auto-scaling)
Popups
show_popups boolean
Show popups.
popup_text_color color
Text colour.
popup_bg_color color
Fill colour.
popup_opacity number
Fill opacity.
popup_separator string
Title separator.
popup_font_size number
Font size. Min: 1
label_format.prefix string
Prefix. Text to place in front of number
label_format.suffix string
Suffix. Text to place after number
label_format.n_dec number
Decimal places. Use negative integers to round to positive powers of ten (eg -2 rounds to the nearest 100) Min: -10 Max: 10
label_format.strip_zeros boolean
Remove trailing zeros.
label_format.strip_separator boolean
Hide thousands separator below 10,000. Turn off if you want four-digit numbers to include a separator, e.g. “1,234” rather than “1234”.
label_format.transform_labels boolean
Multiply/divide values.
label_format.transform string
Allowed values:
- multiply (Multiply by)
- divide (Divide by)
- exponentiate (×10 to the power of)
label_format.multiply_divide_constant number
label_format.exponentiate_constant number
Animations
animation_duration number
Duration. In seconds
Header
header.title string
Title.
header.subtitle string
Subtitle.
header.color color
Color.
header.align string
Alignment. Allowed values:
header.margin number
Margin.
header.margin_advanced boolean
Advanced margin settings.
header.margin_top number
Top.
header.margin_right number
Right.
header.margin_bottom number
Bottom.
header.margin_left number
Left.
Footer
footer.source_name string
Source name.
footer.source_url string
Source url.
footer.multiple_sources boolean
Multiple sources.
footer.source_name_2 string
Source name.
footer.source_url_2 string
Source url.
footer.source_name_3 string
Source name.
footer.source_url_3 string
Source url.
footer.source_label string
Source label.
footer.note string
Note.
footer.size number
Size.
footer.color color
Color.
footer.align string
Alignment. Allowed values:
footer.margin number
Overall.
footer.margin_top number
Top.
footer.margin_right number
Right.
footer.margin_bottom number
Bottom.
footer.margin_left number
Left.
footer.margin_advanced boolean
Advanced.
Number formatting
localization.input_decimal_separator string
Decimal separator in data sheet. Used for interpreting your data. Only change if data is not displaying on the chart as expected. Allowed values:
localization.output_separators string
Number format to display. How the numbers should appear on chart labels Allowed values: