Sunburst - Interactive Hierarchical Chart

Key Features

🔍

Zoomable

Click on segments to drill down into deeper levels of the hierarchy

↩️

Navigation

Click center circle or breadcrumb to zoom back out to parent levels

🎨

Colour Schemes

Customizable colour palettes with automatic colour inheritance for children

✨

Animated

Smooth CSS transitions when zooming in and out of the hierarchy

💬

Tooltips

Hover over segments to see detailed information about each node

♿

Accessible

Full keyboard navigation with ARIA labels and focus indicators

Interactive Examples

Click on coloured segments to zoom into that section. Click the center circle or "← Back" button to navigate up the hierarchy.

<script>
  import Sunburst from '$lib/components/Sunburst.svelte';

  const data = {
    id: 'root',
    name: 'Website',
    children: [
      {
        id: 'src',
        name: 'src',
        color: '#3b82f6',
        children: [
          { id: 'components', name: 'components', value: 120 },
          { id: 'routes', name: 'routes', value: 85 }
        ]
      },
      // ... more nodes
    ]
  };
</script>

<Sunburst
  {data}
  width={500}
  height={500}
  onNodeClick={(node) => console.log('Clicked:', node.name)}
/>

Colour Schemes

Customize the colour palette to match your application's theme. Colours are inherited by child nodes for visual hierarchy.

<Sunburst
  data={hierarchyData}
  colorScheme={['#0ea5e9', '#22d3ee', '#2dd4bf', '#34d399']}
/>

Compact Version

Smaller charts without labels work great for thumbnails, dashboards, or side-by-side comparisons.

File System

Sales Data

<Sunburst
  data={data}
  width={250}
  height={250}
  showLabels={false}
  animationDuration={300}
/>

Props Reference

Prop	Type	Default	Description
`data`	`SunburstNode`	required	Root node of hierarchical data structure
`width`	`number`	`500`	Chart width in pixels
`height`	`number`	`500`	Chart height in pixels
`colorScheme`	`string[]`	categorical palette	Array of colours for segment colouring
`showLabels`	`boolean`	`true`	Show text labels on segments
`labelMinAngle`	`number`	`10`	Minimum angle (degrees) to show label
`animationDuration`	`number`	`750`	Transition duration in milliseconds
`onNodeClick`	`function`	-	Callback: `(node: SunburstNode) => void`
`tooltipFormatter`	`function`	-	Custom tooltip: `(node: SunburstNode) => string`
`class`	`string`	`''`	Additional CSS classes

Data Structure

The Sunburst component accepts hierarchical data where each node can have children. Leaf nodes should have a value property to determine arc size.

interface SunburstNode {
  id: string;           // Unique identifier
  name: string;         // Display name
  value?: number;       // Size (required for leaf nodes)
  color?: string;       // Optional hex colour
  children?: SunburstNode[];  // Child nodes
}

// Example data structure
const data: SunburstNode = {
  id: 'root',
  name: 'Total Sales',
  children: [
    {
      id: 'europe',
      name: 'Europe',
      color: '#3b82f6',  // Blue
      children: [
        { id: 'uk', name: 'UK', value: 450 },
        { id: 'de', name: 'Germany', value: 380 },
        { id: 'fr', name: 'France', value: 290 }
      ]
    },
    {
      id: 'americas',
      name: 'Americas',
      color: '#10b981',  // Green
      children: [
        { id: 'us', name: 'USA', value: 780 },
        { id: 'ca', name: 'Canada', value: 340 }
      ]
    }
  ]
};

Use Cases

📁 File Systems

Visualise disk usage and folder structures with intuitive drill-down navigation

💰 Budget Breakdown

Show expense categories, departments, and line items in a hierarchical view

🌍 Geographic Sales

Display sales data by region, country, and city with proportional segments

🏢 Organisation Charts

Represent company structure from departments down to individual teams

📊 Analytics

Break down user journeys, traffic sources, or conversion funnels

🧬 Scientific Data

Taxonomy trees, molecular structures, or classification hierarchies

Implementation Details

Zero Dependencies

Built with pure Svelte 5 and SVG. No D3 or external charting libraries required.

Partition Layout

D3-style partition algorithm computed natively for arc angle and radius calculations.

CSS Animations

Smooth zoom transitions using CSS transitions on SVG path elements.

Keyboard Support

Enter/Space to zoom in, Escape to zoom out, Tab to navigate between segments.