Visualisation Blocks
Seven visualisation block types are available for arranging media on pages. Six use D3 for spatial layouts; the Publication Shelf uses CSS 3D transforms for a bookshelf effect. This page demonstrates every visualisation block type with example configurations.
Visualisation blocks arrange media into spatial layouts that communicate structure, hierarchy, and relationships. Seven block types are available, each with a different arrangement pattern. Six use D3 for spatial positioning; the Publication Shelf uses CSS 3D transforms for a bookshelf effect. All blocks share a common set of section-level properties (title, subtitle, background colour, minimum height) and a nodes array.
1. Knowledge Hub
The Knowledge Hub layout arranges nodes in a radial star pattern. The first node (order 0) is placed at the centre, and all subsequent nodes are distributed as satellites around it. This layout is suited to showing a central concept with related topics radiating outward, such as a core technology surrounded by its capabilities or a central team surrounded by its responsibilities.
2. Comparison Lens
The Comparison Lens layout divides nodes into two columns - left and right - with connecting lines between them. Each node has a column assignment ('left' or 'right') and an optional label. The section also supports leftColumnLabel and rightColumnLabel properties for column headings. This layout is suited to before/after comparisons, feature comparisons between two products, or contrasting two approaches to a problem.
3. Orbit Rings
The Orbit Rings layout arranges nodes on concentric rings around a centre point. Each node has a ring property where 0 places it at the centre and higher values place it on progressively larger rings. This layout is suited to showing layers of responsibility, abstraction levels, or proximity to a core concept - for example, a security model with the most critical assets at the centre and outer defences on further rings.
4. Hexagonal Cluster
The Hexagonal Cluster layout arranges nodes in a honeycomb grid pattern. The section-level columns property (default 3) controls how many hexagons appear per row. Nodes are placed in order from left to right, top to bottom. This layout is suited to showing a collection of equally weighted items, such as a set of capabilities, team members, or product components that do not have an inherent hierarchy.
5. Flow Tree
The Flow Tree layout arranges nodes in a hierarchical branching tree with labels beside each node. Each node has a parentId (for tree hierarchy) and a label (for descriptive text). Nodes with an empty parentId are roots. This layout is suited to showing decision trees with labelled branches, workflow processes that fork and merge, or any structure that combines sequential flow with hierarchical branching.
6. Story Arc
The Story Arc layout arranges nodes in a vertical zigzag chain connected by animated S-curve paths. Nodes alternate left and right using D3 force simulation, creating a flowing narrative from top to bottom. This layout is suited to showing sequential processes, timelines, migration phases, or any story that unfolds step by step - such as an architecture evolution journey or an onboarding pathway.
7. Publication Shelf
The Publication Shelf displays items as covers on a 3D perspective bookshelf. Each cover tilts slightly and lifts forward on hover, with a configurable spotlight glow beneath. Unlike the D3-based blocks, this one uses CSS 3D transforms. Nodes support three cover sources: uploaded images (SVG, PNG), infographic references, or rich text. Each node can link to a downloadable file, external URL, or internal page.
This block is designed for showcasing white papers, reports, and other publications where the cover image is a key visual asset.
Summary of Block Properties
The table below lists the node-level properties specific to each block type. All blocks share the common section properties (sectionTitle, sectionSubtitle, backgroundColor, minHeight) and common node properties (id, mediaId, mediaFileName, diameter, order).