Sankey Diagram

설명 / Description

샌키 다이어그램은 너비가 각 흐름의 크기를 인코딩하는 링크를 사용해 노드(범주) 집합 사이의 흐름을 시각화합니다. 노드는 단계나 범주를 나타내는 열로 배열되고, 곡선이나 직선 형태의 띠가 노드를 연결하여 수량이 어떻게 분할되고, 합쳐지고, 한 노드에서 다른 노드로 전달되는지 보여줍니다. 노드로 들어오는 총 너비는 항상 나가는 총 너비와 같아서(흐름의 보존), 다이어그램은 자체적으로 일관되고 즉시 읽을 수 있습니다.

A Sankey diagram visualizes flows between a set of nodes (categories) using links whose width encodes the magnitude of each flow. Nodes are arranged in columns representing stages or categories, and curved or straight bands connect them to show how quantities split, merge, or transfer from one node to another. The total width entering a node always equals the total width leaving it (conservation of flow), making the diagram self-consistent and immediately readable.

이 차트는 복잡한 시스템 내에서 지배적인 경로와 뜻밖의 이전을 드러내는 데 탁월합니다. 링크 너비가 수량에 비례하기 때문에, 독자는 정확한 숫자를 읽지 않고도 서로 다른 흐름의 상대적 크기를 빠르게 비교할 수 있습니다. 이 때문에 샌키 다이어그램은 에너지 예산, 물질 흐름, 예산 배분, 사용자 여정 분석에 특히 효과적입니다.

The chart excels at revealing dominant pathways and surprising transfers within complex systems. Because the link width is proportional to quantity, readers can quickly compare the relative size of different flows without needing to read exact numbers. This makes Sankey diagrams particularly effective for energy budgets, material flows, budget allocations, and user journey analysis.

샌키 다이어그램은 두 차원의 정보를 동시에 인코딩합니다: 범주적 관계(어떤 노드가 연결되는지)와 정량적 크기(링크 너비)입니다. 색상은 일반적으로 범주를 구분하기 위해 링크나 노드에 적용되며, 노드의 수직 순서는 명료함을 위해 링크 교차를 최소화하도록 최적화될 수 있습니다.

Sankey diagrams encode two dimensions of information simultaneously: the categorical relationship (which nodes connect) and the quantitative magnitude (link width). Color is typically applied to links or nodes to distinguish categories, and the vertical ordering of nodes can be optimized to minimize link crossings for clarity.

Sankey Diagram — interactive example

언제 사용하나 / When to Use

전체 수량이 여러 단계에 걸쳐 어떻게 분할되는지 보여줄 때(예: 에너지 생산에서 소비까지)
Showing how a total quantity splits across multiple stages (e.g., energy production to consumption)
웹사이트나 앱 퍼널을 통한 사용자 흐름을 시각화할 때
Visualizing user flows through a website or app funnel
수익원에서 지출 범주까지의 예산 배분을 표시할 때
Displaying budget allocations from revenue sources to expenditure categories
제조나 공급망에서 물질 투입과 산출을 비교할 때
Comparing material inputs and outputs in manufacturing or supply chains
시스템에서 가장 큰 이전이나 손실이 발생하는 지점을 드러낼 때
Revealing where the largest transfers or losses occur in a system

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

단일 흐름을 가진 두 범주만 있을 때 -- 대신 막대 차트를 사용하세요
When you have only two categories with a single flow -- use a bar chart instead
시간에 따른 변화가 주된 이야기일 때 -- 선 그래프나 영역 그래프를 사용하세요
When temporal change is the primary story -- use a line graph or area graph
노드가 너무 많을 때(열당 20개 초과), 다이어그램을 읽을 수 없게 됩니다 -- 먼저 범주를 집계하는 것을 고려하세요
When there are too many nodes (>20 per column), the diagram becomes unreadable -- consider aggregating categories first
상대적 비율보다 정확한 값이 중요할 때 -- 표나 막대 차트를 사용하세요
When exact values matter more than relative proportions -- use a table or bar chart
흐름이 순환적(루프)일 때 -- 표준 샌키 레이아웃은 방향성 비순환 그래프를 가정합니다
When flows are cyclical (loops) -- standard Sankey layouts assume directed acyclic graphs

구조 / Anatomy

노드: 각 단계에서 범주를 나타내는 사각형(또는 둥근 블록)으로, 총 유입 또는 유출량에 비례하여 크기가 정해집니다
Nodes: Rectangles (or rounded blocks) representing categories at each stage, sized proportionally to total inflow or outflow
링크(띠): 소스 노드와 타깃 노드를 연결하는 곡선 경로로, 너비는 흐름 크기에 비례합니다
Links (bands): Curved paths connecting source nodes to target nodes, with width proportional to flow magnitude
열(단계): 흐름의 순서를 정의하는 수직 정렬 그룹(예: 출발, 중간, 도착)
Columns (stages): Vertical alignment groups that define the sequence of the flow (e.g., source, intermediate, destination)
레이블: 각 범주를 식별하는 노드 위의 텍스트 주석으로, 때로는 수치 값과 함께 표시됩니다
Labels: Text annotations on nodes identifying each category, sometimes with numeric values
색상 인코딩: 그룹을 구분하기 위해 링크(소스나 타깃 범주 기준)나 노드에 적용됩니다
Color encoding: Applied to links (by source or target category) or nodes to distinguish groups

변형 / Variations

충적도: 각 단계의 노드가 시간에 따른 동일한 범주 변수를 나타내는 변형으로, 그룹 소속이 여러 구간에 걸쳐 어떻게 변하는지를 강조합니다
Alluvial diagram: A variant where nodes at each stage represent the same categorical variable over time, emphasizing how group memberships change across periods
원형 샌키: 링크가 되돌아 곡선을 그리며, 순환적이거나 양방향인 흐름을 보여주는 데 유용합니다
Circular Sankey: Links curve back around, useful for showing cyclical or bidirectional flows
수직 샌키: 흐름이 좌우가 아니라 위에서 아래로 진행됩니다
Vertical Sankey: Flow runs top-to-bottom rather than left-to-right
그라디언트 색상 링크: 링크가 소스에서 타깃 색조로 색상이 전이되어 개별 경로를 추적하는 데 도움을 줍니다
Gradient-colored links: Links transition color from source to target hue, helping trace individual pathways

코드 레퍼런스 / Code Reference

// D3 Sankey using d3-sankey plugin
import {sankey, sankeyLinkHorizontal} from "d3-sankey";
import * as d3 from "d3";

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

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

svg.append("g")
  .selectAll("rect")
  .data(nodes).join("rect")
  .attr("x", d => d.x0).attr("y", d => d.y0)
  .attr("width", d => d.x1 - d.x0).attr("height", d => d.y1 - d.y0)
  .attr("fill", d => d3.schemeTableau10[d.index % 10]);

svg.append("g")
  .selectAll("path")
  .data(links).join("path")
  .attr("d", sankeyLinkHorizontal())
  .attr("stroke-width", d => Math.max(1, d.width))
  .attr("stroke", d => d3.schemeTableau10[d.source.index % 10])
  .attr("fill", "none").attr("opacity", 0.5);