RadialCluster - Hierarchical Tree Visualization

Key Features

🌳

Hierarchical Layout

Cluster algorithm positions leaf nodes at equal depth from center

🔗

Radial Links

Curved Bézier paths connect parent and child nodes naturally

🏷️

Rotated Labels

Text labels rotate to follow radial direction for readability

💬

Interactive Tooltips

Hover over nodes to see details, depth, and child count

🎨

Customisable

Full control over colours, sizes, fonts, and styling

📦

Copy-Paste Ready

Self-contained component with no external charting library required

Full Dataset Example

The classic D3 "flare" dataset showing a software package hierarchy. This demonstrates the component's ability to handle complex, deeply nested data structures with many nodes.

4/4

<script>
  import RadialCluster from '$lib/components/RadialCluster.svelte';
  import { FALLBACK_RADIAL_CLUSTER_DATA } from '$lib/constants';
</script>

<RadialCluster
  data={FALLBACK_RADIAL_CLUSTER_DATA}
  width={900}
  height={900}
/>

Simple Data Structure

A smaller dataset to demonstrate the basic structure. Perfect for category trees, organisation charts, or any simple hierarchy.

3/3

const data = {
  name: 'root',
  children: [
    {
      name: 'Category A',
      children: [
        { name: 'Item A1' },
        { name: 'Item A2' },
        { name: 'Item A3' }
      ]
    },
    // ... more categories
  ]
};

<RadialCluster
  data={data}
  width={600}
  height={600}
  fontSize={12}
  nodeRadius={4}
/>

Colour Schemes

Customise the colour palette to match your application's theme. Control node colours, link colours, and opacity independently.

3/3

<RadialCluster
  data={data}
  nodeColorParent="#555"
  nodeColorLeaf="#999"
  linkColor="#555"
/>

Label Configuration

Control how labels are displayed - toggle visibility, rotation, and styling.

Show Labels Rotate Labels

3/3

<RadialCluster
  data={data}
  showLabels={true}
  rotateLabels={true}
/>

Props Reference

Prop	Type	Default	Description
`data`	`RadialClusterNode`	required	Hierarchical data with name and optional children array
`width`	`number`	`800`	Container width in pixels
`height`	`number`	`800`	Container height in pixels
`innerRadius`	`number`	`100`	Radius where root node starts
`outerRadius`	`number`	auto	Radius where leaf nodes end (calculated from size if not set)
`nodeRadius`	`number`	`2.5`	Radius of node circles in pixels
`nodeColorParent`	`string`	`'#555'`	Colour for parent nodes (with children)
`nodeColorLeaf`	`string`	`'#999'`	Colour for leaf nodes (no children)
`linkColor`	`string`	`'#555'`	Colour for connecting lines
`linkOpacity`	`number`	`0.4`	Opacity of connecting lines (0-1)
`linkWidth`	`number`	`1.5`	Width of connecting lines in pixels
`fontSize`	`number`	`11`	Font size for labels in pixels
`fontFamily`	`string`	`'system-ui, sans-serif'`	Font family for labels
`labelColor`	`string`	`'#333'`	Colour for text labels
`showLabels`	`boolean`	`true`	Whether to display node labels
`rotateLabels`	`boolean`	`true`	Rotate labels to follow radial direction
`separation`	`number`	`1`	Separation factor between sibling nodes
`class`	`string`	`''`	Additional CSS classes for container

Data Structure

The component expects hierarchical data where each node has a name and optional children array. The value property is optional and can be used for additional data.

interface RadialClusterNode {
  name: string;           // Display label for the node
  children?: RadialClusterNode[];  // Optional child nodes
  value?: number;         // Optional numeric value
}

// Example:
const data: RadialClusterNode = {
  name: 'root',
  children: [
    {
      name: 'Branch A',
      children: [
        { name: 'Leaf 1', value: 100 },
        { name: 'Leaf 2', value: 200 }
      ]
    },
    {
      name: 'Branch B',
      children: [
        { name: 'Leaf 3', value: 150 }
      ]
    }
  ]
};

Use Cases

📁 File Systems

Visualise directory structures and file hierarchies in a compact circular layout

🏢 Organisational Charts

Display company structures, team hierarchies, and reporting relationships

🧬 Taxonomies

Show biological classifications, category trees, or knowledge taxonomies

📦 Package Dependencies

Visualise software module structures and dependency trees

🌿 Evolutionary Trees

Display phylogenetic trees and evolutionary relationships

🗂️ Document Structures

Show book chapters, section hierarchies, or content outlines

Implementation Details

Native Algorithm

Custom cluster layout algorithm positions nodes without D3. Leaf nodes are placed at equal radius, internal nodes at the mean angle of descendants.

SVG Rendering

Pure SVG output with viewBox scaling for responsive display. No canvas or WebGL dependencies.

Radial Links

Cubic Bézier curves connect nodes along radial paths, creating natural-looking connections between hierarchy levels.

Accessibility

ARIA labels, keyboard navigation, and focus management for screen reader compatibility.