Alluvial Diagram

설명 / Description

충적도는 여러 차원(또는 시간 구간)에 걸쳐 항목들이 범주 사이에 어떻게 분포하는지, 그리고 그 소속이 어떻게 이동하는지를 보여주는 흐름 시각화의 한 유형입니다. 각 단계에서 누적된 블록으로 이루어진 세로 열이 범주별 분포를 나타내고, 매끄러운 곡선 띠가 블록 사이를 흐르며 모집단이 어떻게 재배치되는지 보여줍니다. 각 띠의 너비는 해당 경로를 따르는 항목의 수(또는 크기)에 비례합니다.

An alluvial diagram is a type of flow visualization that shows how items are distributed among categories across multiple dimensions (or time periods), and how those memberships shift. Vertical columns of stacked blocks represent categorical distributions at each stage, and smooth, curved bands flow between blocks to show how the population redistributes. The width of each band is proportional to the number (or magnitude) of items following that path.

샌키 다이어그램과 자주 혼동되지만, 충적도는 특정한 초점을 가지고 있습니다: 동일한 개체 집합을 추적하면서 그 범주 소속이 축을 따라 어떻게 변하는지를 보여준다는 점입니다. 샌키 다이어그램에서는 서로 다른 단계의 노드가 완전히 다른 개체를 나타낼 수 있습니다(예: 에너지원 대 소비 부문). 반면 충적도에서는 동일한 사람, 국가, 항목 집단이 모든 축에 등장하며, 차트는 이들이 어떻게 재편되는지를 보여줍니다.

While often confused with Sankey diagrams, alluvial diagrams have a specific focus: the same set of entities is tracked as their categorical memberships change across axes. In a Sankey diagram, the nodes at different stages may represent entirely different entities (e.g., energy sources vs. consumption sectors). In an alluvial diagram, the same group of people, countries, or items appears at every axis, and the chart shows how they regroup.

흐르는 띠는 강이나 시냇물을 연상시키는 시각적 은유를 만들어냅니다 — 지질학 용어인 "충적(alluvial)"이 여기서 비롯되었습니다 — 그래서 차트가 미적으로 인상적이고 직관적으로 느껴집니다. 이 차트는 어떤 전이가 흔한지, 어떤 그룹이 안정적으로 유지되는지, 예상치 못한 교차가 어디서 발생하는지를 드러내는 데 탁월합니다. 밀도가 높은 다이어그램에서는 흐름이 교차하면서 특정 그룹의 경로를 가려버릴 수 있기 때문에, 개별 띠에 대한 인터랙티브 하이라이팅이 거의 필수적입니다.

The flowing bands create a visual metaphor of rivers or streams -- hence the geological term "alluvial" -- making the chart aesthetically striking and intuitive. The chart excels at revealing which transitions are common, which groups remain stable, and where unexpected cross-overs occur. Interactive highlighting of individual bands is nearly essential for dense diagrams, as crossing flows can otherwise obscure the paths of specific groups.

Alluvial Diagram — interactive example

언제 사용하나 / When to Use

동일한 개체 집합이 시간이나 조건에 따라 범주적 그룹 간에 어떻게 재분포되는지 추적할 때
Tracking how the same set of entities redistributes across categorical groupings over time or conditions
선거 간 정당 사이의 유권자 이동을 보여줄 때
Showing voter migration between parties across elections
전공, 학교, 졸업 결과 사이의 학생 흐름을 시각화할 때
Visualizing student flows between majors, schools, or graduation outcomes
설문 응답자가 여러 차수에 걸쳐 답변을 어떻게 바꾸는지 보여줄 때
Displaying how survey respondents change their answers across waves

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

서로 다른 단계의 노드가 근본적으로 다른 개체를 나타낼 때 -- 대신 샌키 다이어그램을 사용하세요
When the nodes at different stages represent fundamentally different entities -- use a Sankey diagram instead
각 단계에 범주가 너무 많을 때(8개 초과) -- 띠가 얇아지고 교차가 읽기 어려워집니다
When there are many categories at each stage (>8) -- bands become thin and crossings unreadable
시간 순서나 흐름의 방향이 의미가 없을 때 -- 다변량 탐색을 위해 평행 좌표 플롯을 사용하세요
When the temporal order or direction of flow is not meaningful -- use a parallel coordinates plot for multivariate exploration
정확한 정량 비교가 필요할 때 -- 곡선 띠는 정확한 크기 비교를 어렵게 만듭니다; 누적 막대 차트를 사용하세요
When precise quantitative comparison is needed -- the curved bands make exact size comparison difficult; use a stacked bar chart
의미 있는 그룹화 차원이 없을 때 -- 총계를 보여주는 단순한 선 그래프로 충분할 수 있습니다
When there is no meaningful grouping dimension -- a simple line graph showing totals may suffice

구조 / Anatomy

축(열): 차원이나 시간 구간을 나타내는 세로 열로, 각 축에 누적된 블록이 있습니다
Axes (columns): Vertical columns representing dimensions or time periods, with stacked blocks at each axis
층(블록): 각 축에서 범주를 나타내는 누적 사각형으로, 총 개수나 값에 따라 크기가 결정됩니다
Strata (blocks): Stacked rectangles at each axis representing categories, sized by total count or value
충적류(띠/스트림): 축을 가로질러 블록을 연결하는 곡선 흐름으로, 너비는 하위 그룹 크기에 비례합니다
Alluvia (bands/streams): Curved flows connecting blocks across axes, with width proportional to the subgroup size
색상 인코딩: 첫 번째 축부터 이후 모든 축까지 특정 범주를 추적할 수 있도록 띠에 적용됩니다
Color encoding: Applied to bands to trace a particular category from the first axis through all subsequent axes
레이블: 각 블록의 범주 이름으로, 때로는 개수와 함께 표시됩니다
Labels: Category names on each block, sometimes with counts
교차: 띠가 교차하는 지점으로, 한 축의 특정 범주에 속한 개체가 다음 축에서는 다른 범주에 합류함을 나타냅니다
Crossings: Where bands intersect, indicating that entities from one category at one axis join a different category at the next

변형 / Variations

패럴렐 세트: 띠가 정확한 범주 조합을 나타내는(블록으로 집계하지 않는) 밀접하게 관련된 형태
Parallel sets: A closely related form where bands represent exact categorical combinations (no aggregation into blocks)
시간별 충적도: 축이 연속된 시간 구간을 나타내어 시간에 따른 범주 이동을 보여줍니다
Temporal alluvial: Axes represent consecutive time periods, showing category migration over time
가중 충적도: 띠 너비가 단순 개수를 넘어 정량적 가중치를 인코딩합니다
Weighted alluvial: Band width encodes a quantitative weight beyond simple counts
하이라이트 충적도: 선택된 흐름만 색상이 적용되고 나머지는 회색으로 처리되어 스토리텔링에 집중하게 합니다
Highlighted alluvial: Only selected flows are colored; the rest are grayed out for focused storytelling
미니 바 충적도: 각 축에 작은 막대 차트를 함께 표시하여 흐름과 나란히 각 범주의 총계를 보여줍니다
Alluvial with mini-bars: Small bar charts at each axis show the total for each category alongside the flows

코드 레퍼런스 / Code Reference

// D3-based alluvial diagram (using d3-sankey with aligned columns)
import {sankey, sankeyLinkHorizontal} from "d3-sankey";

const graph = sankey()
  .nodeWidth(20)
  .nodePadding(8)
  .extent([[0, 0], [width, height]])({
    nodes: data.nodes.map(d => ({...d})),
    links: data.links.map(d => ({...d}))
  });

svg.selectAll("path")
  .data(graph.links).join("path")
  .attr("d", sankeyLinkHorizontal())
  .attr("stroke-width", d => d.width)
  .attr("stroke", d => color(d.source.category))
  .attr("fill", "none").attr("opacity", 0.4);