Eight content blocks for displaying media nodes in spatial layouts. All blocks belong to the Visualisations category and work as both page content blocks and marketing home sections. Six use D3 for layout; Publication Shelf uses CSS 3D transforms; Image Showcase uses GSAP for scroll-driven and interactive animations.
Block Overview
| Block Type | Viewer Component | Layout Engine | Connection Style |
|---|
| story-arc | neoarc-story-arc-viewer | D3 force simulation (forceLink, forceManyBody, forceCollide, forceX, forceY) | S-curve cubic Bezier (vertical zigzag) |
| knowledge-hub | neoarc-knowledge-hub-viewer | D3 force simulation (forceManyBody, forceCollide, forceRadial) | S-curve cubic Bezier (centre to satellites) |
| comparison-lens | neoarc-comparison-lens-viewer | CSS flexbox two-column layout with manual SVG | Horizontal S-curve cubic Bezier (left to right) |
| orbit-rings | neoarc-orbit-rings-viewer | Trigonometric positioning with CSS animation | Straight lines (centre to satellites) |
| hexagonal-cluster | neoarc-hexagonal-cluster-viewer | Pure math honeycomb positioning | None (grid layout without connectors) |
| flow-tree | neoarc-flow-tree-viewer | D3 hierarchy tree layout | Vertical S-curve cubic Bezier (parent to child) |
| publication-shelf | neoarc-publication-shelf-viewer | CSS 3D perspective transforms | None (shelf layout without connectors) |
| image-showcase | neoarc-image-showcase-viewer | GSAP Flip / CSS 3D / JS physics | None (mode-specific animations) |
Shared Section Fields
All visualisation block sections extend MarketingSectionBase and share these fields.
| Field | Type | Default | Description |
|---|
| id | string | - | Unique section identifier. |
| type | string | - | Block type discriminator (e.g. 'story-arc', 'knowledge-hub'). |
| order | number | - | Position in section list. |
| enabled | boolean | - | Whether the section is active. |
| sectionTitle | string (optional) | null | Heading text displayed above the visualisation. |
| sectionTitleColor | string (optional) | 'inherit' | CSS colour for the title. |
| sectionSubtitle | string (optional) | null | Subtitle text displayed below the title. |
| sectionSubtitleColor | string (optional) | 'inherit' | CSS colour for the subtitle. |
| nodes | array | [] | Array of node objects (type varies per block). |
| pathColor | string (optional) | '#3b82f6' | Colour for connection lines and paths. |
| pathWidth | number (optional) | 3 | Stroke width for connection lines. |
| backgroundColor | string (optional) | 'transparent' | Section background colour or CSS gradient. |
| minHeight | string (optional) | '600px' | CSS min-height for the section container. |
Shared Node Fields
All node interfaces share this base set of fields.
| Field | Type | Description |
|---|
| id | string | Unique node identifier. |
| mediaId | string (optional) | ID of the linked infographic diagram. |
| mediaFileName | string (optional) | Published filename of the diagram JSON. |
| diameter | number | Node diameter in pixels. Default varies by block (200-400). |
| order | number | Sort order within the block. |
Story Arc
A vertical chain of circular infographic nodes connected by animated S-curve paths. Nodes are arranged in a zigzag pattern using D3 force simulation.
| Aspect | Detail |
|---|
| Block type | story-arc |
| Node fields | Shared fields only. No additional fields. |
| D3 forces | forceLink (distance: srcR + tgtR + 100, strength: 0.5), forceManyBody (strength: -1500), forceCollide (radius + 40), forceX (alternating left/right, strength: 0.15), forceY (spacing: 380, strength: 0.2) |
| Connection paths | S-curve cubic Bezier from circle perimeter to circle perimeter. Control points at 30% and 70% of vertical distance. |
| Mobile | Vertical stack, width: min(300px, 80vw). SVG hidden; dashed line connectors (20px wide, 48px tall). |
Knowledge Hub
A radial star layout with a central hub node and satellite nodes arranged in a circle. The first node (order 0) becomes the centre; all others are satellites.
| Aspect | Detail |
|---|
| Block type | knowledge-hub |
| Node fields | Shared fields only. No additional fields. |
| D3 forces | forceManyBody (strength: -200), forceCollide (radius + 30, strength: 1), forceRadial (radius: orbitDistance, centre=0, strength: 0.8) |
| Orbit distance | centerRadius + avgSatelliteRadius + 80 |
| Interaction | Clicking a satellite toggles expanded state (doubles diameter). Centre node is not clickable. |
| Connection paths | S-curve cubic Bezier from centre to each satellite. |
| Mobile | Vertical stack. Centre: min(320px, 85vw). Satellites: min(280px, 75vw). |
Comparison Lens
A two-column layout with left (25% width) and right (75% width) columns. SVG S-curve connections link matched pairs by order position.
| Aspect | Detail |
|---|
| Block type | comparison-lens |
| Additional section fields | leftColumnLabel (string, optional), rightColumnLabel (string, optional) |
| Node fields | column ('left' or 'right'), label (string, optional) |
| Connection paths | Horizontal S-curve from right edge of left-column node to left edge of right-column node. Control point offset: 40% of horizontal distance. |
| Mobile | Interleaved vertical stack (left, right, left, right). Node size: min(250px, 70vw). |
Orbit Rings
A central node with concentric orbit rings. Satellites are positioned using trigonometry and grouped by ring number. Each ring has a CSS rotation animation.
| Aspect | Detail |
|---|
| Block type | orbit-rings |
| Node fields | ring (number): 0 = centre, 1+ = orbit rings. Determines orbital distance and animation speed. |
| Ring distance | ring * 200 + centerRadius + avgSatelliteRadius |
| Animation | Each ring: animation: orbit Xs linear infinite (duration: 60s * ringNumber). Nodes counter-rotate to stay upright. |
| Connection paths | Straight lines (M ... L ...) from centre to each satellite perimeter. |
| Mobile | Vertical stack sorted by ring then order. Centre: min(320px, 85vw). Satellites: min(280px, 75vw). Orbit animation disabled. |
Hexagonal Cluster
A honeycomb grid of hexagonal-clipped nodes. Nodes use CSS clip-path: polygon() for hexagonal clipping.
| Aspect | Detail |
|---|
| Block type | hexagonal-cluster |
| Additional section fields | columns (number, optional, default: 3): number of columns in the hex grid. |
| Node fields | Shared fields only. No additional fields. |
| Layout | Hex vertical ratio: sqrt(3)/2. Odd rows offset by half hex width. Horizontal gap: hexWidth * 0.1. |
| Connection paths | None. Grid layout without connectors. |
| Mobile | Flex wrap with reduced columns: min(columns, 2). Node size scales proportionally. |
Flow Tree
A vertical hierarchical tree layout using D3 hierarchy. Nodes define parent-child relationships via parentId. Labels alternate left/right.
| Aspect | Detail |
|---|
| Block type | flow-tree |
| Node fields | parentId (string, optional): parent node ID, null means root. label (string, optional): text label displayed beside the node. |
| D3 usage | hierarchy() and tree().nodeSize([avgDiameter * 2, avgDiameter * 2.5]) |
| Label position | Left of node when node.x < 0, right otherwise. Bounding box includes 260px label space per side. |
| Connection paths | Cubic Bezier with vertical flow. Midpoint Y between source and target. |
| Mobile | DFS-ordered vertical stack with depth-based indentation (depth * 20px). Node size: min(260px, 70vw). |
Publication Shelf
A 3D perspective bookshelf for showcasing publications and downloadable documents. Uses CSS perspective and rotateY for the 3D effect.
| Aspect | Detail |
|---|
| Block type | publication-shelf |
| Additional section fields | spotlightColor (string, optional, default: '#3b82f6'): colour of radial glow beneath each cover. |
| Node fields | contentType ('infographic' | 'image' | 'rte'), imageFileName, imageRelativePath, imageId, label, description, linkType ('download' | 'external' | 'page' | null), downloadFileName, downloadRelativePath, downloadId, externalUrl, pageId |
| 3D effects | Container: perspective 1200px. Rest: rotateY(-8deg) scale(0.95). Hover: rotateY(0deg) scale(1.02) translateY(-12px). Spine edge gradient. Spotlight glow. |
| Portrait ratio | Covers render at 1:1.4 width-to-height ratio. |
| Scroll reveal | Staggered entrance via IntersectionObserver (0.15s delay between items). |
Image Showcase
GSAP-powered screenshot/image showcase with three display modes. Does not use infographic media nodes; items contain uploaded images with optional title and description.
| Display Mode | Animation Library | Interaction |
|---|
| Living Mosaic (mosaic) | GSAP Flip | Scroll-driven: grid collage rearranges per chapter, hero image + thumbnail strip. |
| Depth Corridor (corridor) | CSS 3D + JS | Scroll-driven: images at varying z-depth, camera moves through corridor. |
| Gravitational Canvas (canvas) | GSAP Flip | Mouse-driven: images drift with physics, mouse creates gravity well, click to focus. |
| Section Field | Type | Description |
|---|
| displayMode | 'mosaic' | 'corridor' | 'canvas' | Which animation mode to use. |
| accentColor | string | Accent colour for text borders and progress bar. |
Common Rendering Patterns
Shared behaviour across all visualisation blocks.
| Pattern | Detail |
|---|
| Infographic media | Each node references a mediaId pointing to an infographic diagram. The viewer loads the diagram JSON, transforms it via transformInfographicDocument(), strips the canvas viewBox, and renders inside neoarc-diagram-viewer with hideControls=true. |
| Circular clip | All blocks except Hexagonal Cluster render nodes with border-radius: 50%. Hexagonal Cluster uses clip-path: polygon(). |
| Scroll-driven reveal | IntersectionObserver with threshold: 0.2 and rootMargin: '0px 0px -5% 0px'. Triggers opacity and scale transitions. |
| Path reveal | After a node becomes visible, connection paths are revealed with 300ms delay. Animated dashed strokes (stroke-dasharray: 8 12, animation: dash-flow 1.5s linear infinite). |
| Resize handling | ResizeObserver on the container recalculates layout when width changes. |
| Mobile detection | window.innerWidth <= 768 triggers mobile layout. All blocks fall back to vertical stack. |
| Theme support | isDarkMode property controls background colour of empty node placeholders. |
| Background | Section-level backgroundColor supports solid colours and CSS gradients. |
D3 Dependencies
| Block | D3 Module | Functions Used |
|---|
| Story Arc | d3-force | forceSimulation, forceLink, forceManyBody, forceCollide, forceX, forceY |
| Knowledge Hub | d3-force | forceSimulation, forceManyBody, forceCollide, forceRadial |
| Comparison Lens | None | Pure CSS two-column layout with manual SVG path generation |
| Orbit Rings | None | Pure trigonometric positioning with CSS orbit animation |
| Hexagonal Cluster | None | Pure math honeycomb positioning |
| Flow Tree | d3-hierarchy | hierarchy, tree |
