Story Arc Block
Circular force-directed graph visualisation for showing narrative flows, process cycles, and connected concept networks. Nodes are arranged on a circular path with force-directed positioning that keeps related nodes close together.
The Story Arc block renders a collection of nodes on a circular force-directed graph. Nodes settle into positions along a circular path, with edges drawn between connected items to reveal narrative flows, process cycles, or concept relationships. The force simulation keeps tightly connected clusters together while maintaining the overall circular shape.
Each node can carry a title, description, icon, and category colour. Edges can be directed or undirected and optionally display labels.
When to Use
Configuration
The following properties control the overall appearance and behaviour of the story arc.
| Property | Type | Description |
|---|---|---|
| Title | Text | Optional heading displayed above the visualisation. |
| Subtitle | Text | Optional secondary text below the title. |
| Accent Colour | Colour | Primary colour used for highlighted edges and the active node ring. |
| Background | Colour | Background colour of the visualisation area. Defaults to transparent. |
| Circle Radius | Number | Base radius of the circular layout in pixels. Defaults to 300. |
| Force Strength | Number (0-1) | How strongly the force simulation pulls nodes toward the circle. Lower values allow more organic clustering. |
| Show Edge Labels | Toggle | Whether to display labels on edges between nodes. |
| Directed Edges | Toggle | Whether edges display arrowheads indicating direction. |
| Animation Duration | Number (ms) | Duration of the initial node-settling animation. Defaults to 1200ms. |
Per-Node Fields
Each node in the story arc has these configurable fields.