Hexagonal Cluster Block
Honeycomb grid visualisation where items are arranged in hexagonal cells. Clusters group related items together. Useful for capability maps, team topology, or domain decomposition.
The Hexagonal Cluster block arranges items in a honeycomb grid of hexagonal cells. Each cell represents a single item, and cells are grouped into named clusters that sit together on the grid. The hexagonal tessellation makes efficient use of space and creates a distinctive visual pattern that stands out from standard rectangular grids.
Clusters are colour-coded and labelled. Hovering over a cell highlights its cluster and displays the item details. The layout automatically adjusts to fit the available width, wrapping rows as needed.
When to Use
Configuration
The following properties control the honeycomb layout and appearance.
| Property | Type | Description |
|---|---|---|
| Title | Text | Optional heading displayed above the visualisation. |
| Subtitle | Text | Optional secondary text below the title. |
| Cell Size | Select | Size of each hexagonal cell: Small, Medium, or Large. Defaults to Medium. |
| Accent Colour | Colour | Colour used for selected cell borders and hover highlights. |
| Background | Colour | Background colour of the visualisation area. Defaults to transparent. |
| Show Cluster Labels | Toggle | Whether to display cluster name labels above each group. Defaults to true. |
| Gap Size | Number | Spacing in pixels between clusters. Defaults to 16. |
| Colour Mode | Select | Whether cells are coloured By Cluster (all cells in a cluster share its colour) or By Value (cells use a colour scale based on their numeric value). Defaults to By Cluster. |
| Orientation | Select | Hexagon orientation: Flat Top or Pointy Top. Defaults to Flat Top. |
Per-Cell Fields
Each hexagonal cell has these configurable fields.