Chord Diagram Examples

Chord diagrams visualize circular dependencies and relationships between entities. They are particularly useful for showing flows, connections, and interdependencies in network data.

Basic Chord Diagram

View Source

type: chord
engine: d3
data:
  source: |
    [
      {"source": "Engineering", "target": "Design", "value": 20},
      {"source": "Engineering", "target": "QA", "value": 15},
      {"source": "Design", "target": "Engineering", "value": 18},
      {"source": "Design", "target": "Marketing", "value": 12},
      {"source": "QA", "target": "Engineering", "value": 25},
      {"source": "QA", "target": "Support", "value": 10},
      {"source": "Marketing", "target": "Design", "value": 8},
      {"source": "Marketing", "target": "Sales", "value": 22},
      {"source": "Sales", "target": "Marketing", "value": 16},
      {"source": "Sales", "target": "Support", "value": 14},
      {"source": "Support", "target": "QA", "value": 11},
      {"source": "Support", "target": "Engineering", "value": 9}
    ]
width: 1000
height: 1000

Custom Chord Diagram with Inline Data

View Source

type: chord
engine: d3
data:
  source: |
    [
      {"source": "Marketing", "target": "Sales", "value": 15},
      {"source": "Marketing", "target": "Product", "value": 8},
      {"source": "Sales", "target": "Marketing", "value": 10},
      {"source": "Sales", "target": "Support", "value": 12},
      {"source": "Product", "target": "Engineering", "value": 20},
      {"source": "Engineering", "target": "Product", "value": 18},
      {"source": "Engineering", "target": "Support", "value": 7},
      {"source": "Support", "target": "Sales", "value": 9}
    ]
width: 700
height: 700
title: Inter-Department Communication Flow

Interactive Chord Diagram with Tooltips

View Source

type: chord
engine: d3
data:
  source: |
    [
      {"source": "Frontend", "target": "API", "value": 25},
      {"source": "Frontend", "target": "Auth", "value": 10},
      {"source": "API", "target": "Database", "value": 30},
      {"source": "API", "target": "Cache", "value": 15},
      {"source": "Auth", "target": "Database", "value": 12},
      {"source": "Auth", "target": "API", "value": 8},
      {"source": "Cache", "target": "Database", "value": 5}
    ]
width: 600
height: 600
title: System Component Dependencies
interactions:
  tooltip:
    enabled: true

Key Features

Data Format

Chord diagrams expect data with three fields:

• source: The originating entity
• target: The destination entity
• value: The strength or magnitude of the relationship

Visualization Components

• Outer Arcs: Represent individual entities (colored by category)
• Inner Ribbons: Show relationships between entities
• Labels: Entity names positioned around the circle
• Tooltips: Interactive hover information

Interactive Features

When interactions are enabled:

• Hover: Shows detailed information about connections
• Tooltips: Display source → target relationships with values
• Visual Feedback: Highlights on mouse over

Use Cases

Software Architecture

• Module dependencies
• Import/export relationships
• Package interdependencies

Organizational Analysis

• Communication patterns
• Workflow connections
• Team collaboration

Network Analysis

• Flow diagrams
• Resource allocation
• Connection strength

Data Requirements

• Minimum 2 unique entities (source/target combinations)
• Value field should be numeric
• Self-referential connections are supported (source === target)
• Bidirectional relationships show as separate ribbons

Configuration Options

Option	Type	Default	Description
type	string	required	Must be 'chord'
engine	string	required	Must be 'd3'
data	object	required	Data source with source, target, value fields
width	number	600	Chart width in pixels
height	number	600	Chart height in pixels
title	string	optional	Chart title
interactions	object	optional	Interactive features configuration