Adjacency Matrix

설명 / Description

인접 행렬은 모든 노드를 격자의 행과 열 양쪽에 배치하여 네트워크를 표현합니다. (i, j) 위치의 각 셀은 노드 i가 노드 j와 연결되어 있는지를 나타내며, 이진 네트워크에서는 채워진 셀로, 가중 네트워크에서는 색이 있는 셀로 표시합니다. 그 결과는 네트워크의 전체 연결 구조를 링크 교차나 겹침 없이 인코딩하는 정사각 행렬입니다 -- 이는 대규모에서 노드-링크 다이어그램을 괴롭히는 문제들입니다.

An adjacency matrix represents a network by placing all nodes along both the rows and columns of a grid. Each cell at position (i, j) indicates whether node i is connected to node j, using a filled cell for binary networks or a colored cell for weighted networks. The result is a square matrix that encodes the complete connectivity structure of the network without any link crossings or overlap -- problems that plague node-link diagrams at scale.

인접 행렬은 그래프 이론의 수학적 기초이며, 그 시각적 표현은 이러한 엄밀함을 그대로 유지합니다. 가능한 모든 연결이 전용 셀을 가지므로 엣지가 서로 뒤에 숨거나 클러스터가 서로를 가리는 일이 불가능합니다. 이러한 특성 덕분에 인접 행렬은 밀집된 네트워크에서 포스 디렉티드 레이아웃보다 우수합니다: 노드 200개와 엣지 10,000개로 이루어진 네트워크는 노드-링크 다이어그램에서는 가망 없는 헤어볼이 되지만, 인접 행렬에서는 (크더라도) 완벽하게 읽을 수 있는 격자가 됩니다.

The adjacency matrix is the mathematical foundation of graph theory, and its visual representation preserves this rigor. Every possible connection has a dedicated cell, making it impossible for edges to hide behind each other or for clusters to occlude one another. This property makes adjacency matrices superior to force-directed layouts for dense networks: a network with 200 nodes and 10,000 edges is a hopeless hairball in a node-link diagram but a perfectly readable (if large) grid in an adjacency matrix.

행과 열의 순서는 가독성에 결정적인 영향을 미칩니다. 무작위 순서는 시각적 노이즈를 만들어내는 반면, 클러스터링 기반 재정렬(시리에이션)은 관련 노드를 함께 묶어 대각선을 따라 밀집된 블록으로 커뮤니티 구조를 드러냅니다. 행, 열, 이웃에 대한 호버 하이라이팅과 결합된 인터랙티브 재정렬은 인접 행렬을 정적인 결과물에서 강력한 탐색 도구로 바꿔놓습니다.

The ordering of rows and columns critically affects readability. Random ordering produces visual noise, while clustering-based reordering (seriation) groups related nodes together, revealing community structure as dense blocks along the diagonal. Interactive reordering, combined with hover highlighting of rows, columns, and neighborhoods, transforms the adjacency matrix from a static artifact into a powerful exploratory tool.

Adjacency Matrix — interactive example

언제 사용하나 / When to Use

노드-링크 다이어그램이 읽을 수 없는 헤어볼을 만들어내는 밀집 네트워크를 시각화할 때
Visualizing dense networks where node-link diagrams produce unreadable hairballs
시리에이션 이후 커뮤니티나 클러스터 간 연결 패턴을 비교할 때
Comparing connectivity patterns across communities or clusters after seriation
대칭 또는 비대칭 관계를 보여줄 때 (행렬은 방향성을 자연스럽게 드러냅니다)
Showing symmetric or asymmetric relationships (the matrix reveals directionality naturally)
수백 개의 노드를 가진 네트워크에 확장 가능한 표현이 필요할 때
When you need a scalable representation for networks with hundreds of nodes
구조적 패턴을 식별할 때: 클릭(clique)은 밀집된 블록으로, 이분 구조는 대각선을 벗어난 사각형으로 나타납니다
Identifying structural patterns: cliques appear as dense blocks, bipartite structure as off-diagonal rectangles

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

희소한 네트워크의 경우 -- 엣지가 적을 때는 네트워크 다이어그램(노드-링크)이 구조를 더 직관적으로 보여줍니다
For sparse networks -- a network diagram (node-link) shows the structure more intuitively when there are few edges
네트워크를 통한 경로 추적이 중요할 때 -- 행렬에서 여러 홉을 거치는 경로를 추적하는 것은 인지적으로 어렵습니다
When following paths through the network matters -- tracing multi-hop paths in a matrix is cognitively difficult
청중이 공간적인 네트워크 레이아웃을 기대할 때 -- 인접 행렬은 학습 곡선이 더 가파릅니다
When audiences expect a spatial network layout -- adjacency matrices have a steeper learning curve
인터랙션 없이 매우 큰 네트워크(노드 1,000개 초과)를 다룰 때 -- 격자가 너무 커져서 효과적으로 렌더링하거나 훑어보기 어려워집니다
For very large networks (>1,000 nodes) without interaction -- the grid becomes too large to render or scan effectively

구조 / Anatomy

격자 셀: 각 (행, 열) 교차점의 정사각형 셀. 연결이 있으면 채워지거나 색이 입혀지고, 없으면 비어 있습니다.
Grid cells: Square cells at each (row, column) intersection; filled or colored if a connection exists, empty otherwise.
행과 열 레이블: 두 축을 따라 같은 순서로 표시되는 노드 이름.
Row and column labels: Node names along both axes, in the same order.
색상 스케일: 가중 네트워크에서는 순차적 색상 스케일이 연결 강도를 인코딩합니다. 이진 네트워크에서는 단일 채우기 색상으로 충분합니다.
Color scale: For weighted networks, a sequential color scale encodes connection strength. For binary networks, a single fill color suffices.
대각선: 자기 연결(루프)을 나타내며, 흔히 다르게 강조되거나 스타일링됩니다.
Diagonal: Self-connections (loops), often highlighted or styled differently.
행/열 순서: 노드의 배치로, 구조를 드러내기 위해 이상적으로는 시리에이션이나 클러스터링 알고리즘으로 계산됩니다.
Row/column ordering: The arrangement of nodes, ideally computed by a seriation or clustering algorithm to reveal structure.
호버 시 강조: 호버된 셀의 전체 행과 열을 표시하면 연결된 두 노드를 식별하는 데 도움이 됩니다.
Highlight on hover: Showing the full row and column for a hovered cell helps identify the two connected nodes.

변형 / Variations

이진 인접 행렬: 셀이 단순히 채워지거나 비어 있어 연결의 유무를 나타냅니다.
Binary adjacency matrix: Cells are simply filled or empty, representing the presence or absence of a connection.
가중 인접 행렬: 셀 색상의 강도가 각 연결의 세기, 빈도, 가중치를 인코딩합니다.
Weighted adjacency matrix: Cell color intensity encodes the strength, frequency, or weight of each connection.
재정렬(시리에이션)된 행렬: 클러스터링 알고리즘으로 행과 열을 재정렬하여 관련 노드를 그룹화하고, 블록-대각선 형태의 커뮤니티 구조를 드러냅니다.
Reordered (seriated) matrix: Rows and columns are reordered by a clustering algorithm to group related nodes, revealing block-diagonal community structure.
삼각 행렬: 무방향 네트워크의 경우 아래쪽 또는 위쪽 삼각형만 표시하여 대칭적인 중복을 제거합니다.
Triangular matrix: For undirected networks, only the lower or upper triangle is shown, eliminating symmetric redundancy.
이분 인접 행렬: 이분 네트워크를 위한 직사각형(정사각형이 아닌) 행렬로, 한 노드 집합은 행에, 다른 집합은 열에 배치됩니다.
Bi-adjacency matrix: A rectangular (non-square) matrix for bipartite networks, with one node set on rows and the other on columns.
인터랙티브 인접 행렬: 호버 하이라이팅, 재정렬 컨트롤, 하위 행렬로의 클릭 확대를 지원합니다.
Interactive adjacency matrix: Supports hover highlighting, reordering controls, and click-to-zoom into sub-matrices.

코드 레퍼런스 / Code Reference

// Observable Plot - adjacency matrix
Plot.plot({
  marks: [
    Plot.cell(edges, {
      x: "target",
      y: "source",
      fill: "weight",
      tip: true
    })
  ],
  x: { label: null, tickRotate: -45 },
  y: { label: null },
  color: {
    scheme: "Blues",
    legend: true,
    label: "Connection strength"
  },
  aspectRatio: 1
})