Chord Diagram

설명 / Description

코드 다이어그램은 여러 개체를 원의 둘레에 배치하고, 개체 쌍 사이에 호(코드)를 그려 상호 관계의 크기를 나타냅니다. 각 코드가 양 끝에서 갖는 폭은 각 방향의 흐름 또는 연결 강도를 인코딩하므로, 비대칭적인 흐름(예: 국가 간 무역, 지역 간 이주, 소프트웨어 모듈 간 의존성)을 시각화하기에 적합합니다.

A chord diagram arranges a set of entities around the circumference of a circle, with arcs (chords) drawn between pairs of entities to represent the magnitude of their mutual relationship. The width of each chord at its endpoints encodes the flow or connection strength in each direction, making the diagram ideal for visualizing asymmetric flows (e.g., trade between countries, migration between regions, or dependencies between software modules).

각 개체는 원 위에서 전체 흐름(들어오는 흐름과 나가는 흐름의 합)에 비례하는 각도 폭을 가진 호 구간을 차지합니다. 즉 규모가 큰 개체일수록 더 많은 시각적 공간을 차지하며, 독자는 호의 길이를 비교해 전체 물량을 비교할 수 있습니다. 개체 쌍을 잇는 코드는 (보통 출발지 기준으로) 색이 칠해지고, 흐름이 비대칭적이면 경로를 따라 폭이 달라집니다 — 출발지 쪽에서는 넓고 도착지 쪽에서는 좁아집니다.

Each entity occupies an arc segment on the circle whose angular span is proportional to its total flow (incoming plus outgoing). This means that larger entities command more visual space, and readers can compare total volumes by comparing arc lengths. The chords connecting entity pairs are colored (usually by source) and their width varies along their path if the flow is asymmetric -- wider at the source end, narrower at the target end.

코드 다이어그램은 시각적으로 인상적이며, 지배적인 양자 관계, 서로 긴밀하게 연결된 그룹의 클러스터, 불균형(한 개체가 받는 것보다 훨씬 많이 보내는 경우)을 드러낼 수 있습니다. 하지만 개체가 약 15개를 넘어가면 코드가 서로 겹치고 원형 레이아웃 특성상 각도 비교가 직선 비교보다 부정확해지므로 읽기 어려워집니다. 큰 행렬의 경우, 상위 연결만 필터링해서 보여주거나 호버 기반 하이라이팅을 제공하는 것이 필수적입니다.

Chord diagrams are visually striking and can reveal dominant bilateral relationships, clusters of highly interconnected groups, and imbalances (where one entity sends much more than it receives). However, they become difficult to read with more than about 15 entities, as chords overlap and the circular layout makes angular comparisons less precise than linear ones. For large matrices, filtering to show only the top connections or providing hover-based highlighting is essential.

언제 사용하나 / When to Use

• 행렬 형태의 개체 간 흐름 시각화(무역, 이주, 통신, 의존성)
• Visualizing flows between entities in a matrix (trade, migration, communication, dependencies)
• 개체별 총 물량과 양자 관계 강도를 함께 보여주기
• Showing both the total volume per entity and the bilateral relationship strengths
• 흐름 네트워크의 지배적 경로와 불균형 드러내기
• Revealing dominant pathways and imbalances in a network of flows
• 데이터가 적당한 개체 수(5~15개)를 가진 정방 행렬(원천-목적지 표)일 때
• When the data is a square matrix (origin-destination table) with moderate entity count (5-15)

이럴 땐 피하세요 / When NOT to Use

• 개체가 많을 때(15개 초과) -- 코드가 읽기 어려워집니다; 데이터를 집계하거나 히트맵을 사용하세요
• When there are many entities (>15) -- chords become unreadable; aggregate or use a heatmap
• 흐름이 단방향이고 단계가 명확할 때 -- 대신 샌키 다이어그램을 사용하세요
• When flows are unidirectional with clear stages -- use a Sankey diagram instead
• 공간적 배치가 중요할 때(지리 데이터) -- 플로우 맵을 사용하세요
• When spatial layout matters (geographic data) -- use a flow map
• 정확한 값이 중요할 때 -- 각도와 폭 비교는 부정확합니다; 표나 막대 차트를 사용하세요
• When exact values are critical -- angular and width comparisons are imprecise; use a table or bar chart

구조 / Anatomy

• 외곽 호: 원 둘레를 따라 배치된, 개체별 색상 호 구간. 호의 길이가 전체 흐름 물량을 인코딩합니다.
• Outer arcs: Colored arc segments around the circumference, one per entity. Arc length encodes total flow volume.
• 코드: 원 내부에서 개체 쌍을 잇는 곡선 띠. 각 끝점에서의 폭이 방향별 흐름을 인코딩합니다.
• Chords: Curved bands connecting pairs of entities inside the circle. Width at each endpoint encodes directional flow.
• 색상 인코딩: 코드는 출발지 개체를 기준으로 색이 칠해집니다(또는 출발지에서 도착지로 이어지는 그라데이션).
• Color encoding: Chords colored by source entity (or gradient from source to target color).
• 레이블: 각 호에 인접한 원 바깥쪽에 배치되는 개체 이름.
• Labels: Entity names positioned outside the circle adjacent to their arc.
• 눈금: 외곽 호 위에 정량적 스케일을 보여주는 선택적 눈금 표시.
• Tick marks: Optional graduation marks on the outer arcs showing quantitative scale.
• 간격: 개체들을 시각적으로 구분하기 위한 작은 각도 간격.
• Gap: Small angular gaps between entities to visually separate them.

변형 / Variations

• 방향성 코드 다이어그램: 코드가 출발지에서 넓고 도착지에서 좁아지도록 점점 가늘어져 흐름 방향을 명확히 드러냅니다.
• Directed chord diagram: Chords taper from wider at the source to narrower at the target, making flow direction explicit.
• 그룹화된 코드 다이어그램: 개체들이 상위 범주로 그룹화되고 그룹 사이에 시각적 구분선이 표시됩니다.
• Grouped chord diagram: Entities are grouped into higher-level categories with visual separators between groups.
• 계층적 코드 다이어그램: 외곽 링에 계층적 그룹화를 결합하고, 코드로 그룹 간 연결을 보여줍니다.
• Hierarchical chord diagram: Combines a hierarchical grouping on the outer ring with chords showing cross-group connections.
• 필터링된 코드 다이어그램: 혼잡을 줄이기 위해 상위 N개 연결만 표시합니다.
• Filtered chord diagram: Only the top-N connections are shown to reduce clutter.

코드 레퍼런스 / Code Reference

// D3 Chord Diagram
import * as d3 from "d3";

const chord = d3.chord().padAngle(0.05).sortSubgroups(d3.descending);
const chords = chord(matrix);
const arc = d3.arc().innerRadius(innerRadius).outerRadius(outerRadius);
const ribbon = d3.ribbon().radius(innerRadius);

const svg = d3.select("#chart").append("svg")
  .attr("viewBox", [-width / 2, -height / 2, width, height]);

svg.append("g")
  .selectAll("path")
  .data(chords.groups).join("path")
  .attr("d", arc)
  .attr("fill", d => color(d.index));

svg.append("g")
  .selectAll("path")
  .data(chords).join("path")
  .attr("d", ribbon)
  .attr("fill", d => color(d.source.index))
  .attr("opacity", 0.6);