Expandable Sankey Diagram

Features

• Hierarchical Structure: Multi-level parent-child relationships with clear visual flow
• Interactive Expansion: Click expandable nodes to reveal hidden sub-categories
• Smooth Transitions: Animated node and link changes for better UX
• Color-Coded Flows: Each energy source has distinct colour inherited by its flows
• Responsive Design: Adapts to container width while maintaining readability
• Tooltip Support: Hover over nodes and links to see detailed information

Data Structure

The component expects nodes and links in this format:

const sankeyData = {
  nodes: [
    {
      id: 'root',
      label: 'Energy Sources',
      expandable: true
    },
    {
      id: 'coal',
      label: 'Coal',
      color: '#8B4513',
      expandable: true,
      parentId: 'root'  // Child of root
    },
    {
      id: 'coal-plant-a',
      label: 'Coal Plant A',
      color: '#8B4513',
      expandable: false,
      parentId: 'coal'  // Child of coal
    },
    {
      id: 'residential',
      label: 'Residential',
      color: '#32CD32',
      expandable: false
      // No parentId = top-level destination
    }
  ],
  links: [
    { source: 'root', target: 'coal', value: 30 },
    { source: 'coal-plant-a', target: 'residential', value: 15 }
  ]
};

Usage Example

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

<ExpandableSankey
  nodes={FALLBACK_SANKEY_DATA.nodes}
  links={FALLBACK_SANKEY_DATA.links}
  height={600}
  width="100%"
/>

Hierarchy Behavior

The component implements a parent-child visibility pattern:

• Initial State: Shows root node + first-level children + destinations
• Expand Node: Reveals immediate children (sub-categories appear in flow)
• Collapse Node: Hides children and all descendants (returns to parent view)
• Non-Expandable: Nodes with expandable: false cannot be clicked
• Destinations: Nodes with no parentId are always visible (e.g., Residential, Industrial)

Implementation Pattern

This component demonstrates:

• Plain Object Factory: createSankeyData() returns object with expand/collapse methods
• Svelte 5 Reactivity: Use $state() to create new object references on changes
• Event Handling: Unovis events prop with Sankey.selectors.node for click handlers
• Recursive Collapse: Collapsing a node also collapses all descendants
• Filtered Visibility: Show only nodes whose parents are expanded

Props

Dependencies

• @unovis/svelte - Svelte wrapper components
• @unovis/ts - Core Unovis visualization library

Install with: npm install @unovis/svelte @unovis/ts --legacy-peer-deps