Arc Diagram - Co-Author Network

Arc diagrams arrange nodes along a single axis and draw arcs between connected nodes. This layout is ideal when nodes have a natural ordering (alphabetical, chronological, ranked) and you want to visualize connection patterns without the complexity of a full force-directed graph.

Basic Co-Author Network

This example shows relationships between researchers who have published papers together. Nodes are sized by publication count and colored by research group.

View Source

type: arc-diagram
engine: d3
title: Research Collaboration Network
width: 700
height: 400
network:
  source: source
  target: target
  value: weight
data:
  source: '[{"source": "Alice Chen", "target": "Bob Smith", "weight": 8}, {"source": "Alice Chen", "target": "Carol Davis", "weight": 5}, {"source": "Alice Chen", "target": "David Lee", "weight": 3}, {"source": "Bob Smith", "target": "Carol Davis", "weight": 6}, {"source": "Bob Smith", "target": "Eve Wilson", "weight": 4}, {"source": "Carol Davis", "target": "Frank Brown", "weight": 7}, {"source": "David Lee", "target": "Eve Wilson", "weight": 2}, {"source": "Eve Wilson", "target": "Frank Brown", "weight": 5}, {"source": "Frank Brown", "target": "Grace Kim", "weight": 3}, {"source": "Grace Kim", "target": "Alice Chen", "weight": 4}]'

Software Module Dependencies

Arc diagrams work well for showing module dependencies in a codebase where modules have a logical order.

View Source

type: arc-diagram
engine: d3
title: Module Dependencies
width: 700
height: 350
colorScheme: schemeTableau10
network:
  source: from
  target: to
  value: imports
data:
  source: '[{"from": "main", "target": "config", "imports": 3}, {"from": "main", "target": "utils", "imports": 5}, {"from": "main", "target": "api", "imports": 4}, {"from": "config", "target": "utils", "imports": 2}, {"from": "api", "target": "auth", "imports": 6}, {"from": "api", "target": "db", "imports": 7}, {"from": "api", "target": "cache", "imports": 3}, {"from": "auth", "target": "crypto", "imports": 4}, {"from": "auth", "target": "utils", "imports": 2}, {"from": "db", "target": "cache", "imports": 5}, {"from": "cache", "target": "utils", "imports": 1}]'

Social Network Connections

Visualize connections in a social network with arcs showing who follows whom.

View Source

type: arc-diagram
engine: d3
title: Social Connections
width: 650
height: 300
network:
  source: follower
  target: following
  value: interactions
data:
  source: '[{"follower": "User1", "following": "User2", "interactions": 45}, {"follower": "User1", "following": "User4", "interactions": 23}, {"follower": "User2", "following": "User3", "interactions": 67}, {"follower": "User2", "following": "User5", "interactions": 34}, {"follower": "User3", "following": "User4", "interactions": 56}, {"follower": "User3", "following": "User6", "interactions": 28}, {"follower": "User4", "following": "User5", "interactions": 41}, {"follower": "User5", "following": "User6", "interactions": 19}, {"follower": "User6", "following": "User1", "interactions": 52}]'

Configuration Reference

Parameter	Type	Default	Description
type	string	-	'arc-diagram'
network.source	string	'source'	Source node field
network.target	string	'target'	Target node field
network.value	string	'value'	Link weight field
sortBy	string	-	Field to sort nodes
colorScheme	string	'schemeCategory10'	Color palette

When to Use Arc Diagrams

Good for:

• Ordered data (alphabetical, temporal, hierarchical)
• Showing connection density patterns
• Comparing specific node relationships
• Clean, publication-ready visualizations

Consider alternatives when:

• No natural node ordering exists (use force-directed)
• Flow quantities matter (use Sankey)
• Bidirectional relationships need emphasis (use Chord)

Data Format

Arc diagrams accept link data with source and target fields:

network:
  source: from_column
  target: to_column
  value: weight_column

data:
  source: '[{"from_column": "A", "to_column": "B", "weight_column": 10}]'

Related Charts

• Force-Directed Graph - For unordered networks
• Chord Diagram - For bidirectional flows
• Sankey Diagram - For flow quantities