Parallel Coordinates Plot

설명 / Description

평행 좌표 플롯은 각 변수에 자체적인 평행 수직 축을 할당하여 다변량 데이터를 표시합니다. 모든 데이터 관측치는 모든 축을 관통하는 꺾은선이 되어, 각 축에서 해당 변수에 대한 관측치 값에 대응하는 위치를 지나갑니다. 수백, 수천 개의 선이 동시에 그려지면 패턴이 드러납니다: 관측치의 군집은 선 다발로 나타나고, 상관관계는 인접한 축 사이의 평행 또는 교차 패턴으로 나타나며, 이상치는 주요 다발에서 급격히 벗어나는 선으로 나타납니다.

A parallel coordinates plot displays multivariate data by assigning each variable its own parallel vertical axis. Every data observation becomes a polyline that threads through all axes, intersecting each one at the position corresponding to that observation's value for that variable. When hundreds or thousands of lines are drawn simultaneously, patterns emerge: clusters of observations appear as bundles of lines, correlations appear as parallel or crossing patterns between adjacent axes, and outliers appear as lines that deviate sharply from the main bundles.

이 기법은 고차원 데이터로 자연스럽게 확장되는 몇 안 되는 시각화 방법 중 하나입니다. 산점도는 한 번에 두(또는 세) 변수만 보여줄 수 있지만, 평행 좌표는 수십 개의 변수를 동시에 표시할 수 있습니다. 이 때문에 머신러닝(모델 하이퍼파라미터 비교), 제조업(다수 측정치에 걸친 품질 관리), 금융(여러 지표에 걸친 종목 스크리닝) 같은 분야의 탐색적 데이터 분석에 매우 유용합니다.

The technique is one of the few visualization methods that scales naturally to high-dimensional data. While a scatterplot can only show two (or three) variables at once, parallel coordinates can display dozens of variables simultaneously. This makes it invaluable for exploratory data analysis in domains like machine learning (comparing model hyperparameters), manufacturing (quality control across many measurements), and finance (screening stocks across multiple metrics).

평행 좌표가 제대로 작동하려면 인터랙티브성이 거의 필수적입니다. 브러싱 -- 한 축에서 범위를 선택하여 다른 모든 축에서 대응하는 선을 강조하는 것 -- 은 차트를 조밀한 뒤엉킴에서 강력한 탐색 도구로 바꿔줍니다. 축 재정렬도 마찬가지로 중요한데, 두 변수 사이에서 보이는 패턴은 해당 축들이 인접해 있는지에 달려 있기 때문입니다. 이러한 인터랙션이 없으면 조밀한 평행 좌표 플롯은 겹쳐진 선들의 뚫을 수 없는 덩어리로 보일 수 있습니다.

Interactivity is nearly essential for parallel coordinates to work well. Brushing -- selecting a range on one axis to highlight the corresponding lines across all other axes -- transforms the chart from a dense tangle into a powerful exploration tool. Axis reordering is equally important, as the patterns visible between two variables depend on their axes being adjacent. Without these interactions, dense parallel coordinates plots can appear as an impenetrable mass of overlapping lines.

Parallel Coordinates — interactive example

언제 사용하나 / When to Use

많은 변수(5~30차원)에 걸친 관계와 트레이드오프를 동시에 탐색할 때
Exploring relationships and trade-offs across many variables simultaneously (5-30 dimensions)
다변량 데이터셋에서 군집, 이상치, 상관관계를 식별할 때
Identifying clusters, outliers, and correlations in multivariate datasets
여러 변수에 걸친 기준을 바탕으로 데이터 부분집합을 필터링하고 선택할 때
Filtering and selecting subsets of data based on criteria across multiple variables
일관된 지표 집합에 걸쳐 관측치를 비교할 때(예: 가격, 연비, 마력, 무게별 자동차 모델)
Comparing observations across a consistent set of metrics (e.g., car models by price, MPG, horsepower, weight)
다기준 의사결정에서 후보를 선별할 때
Screening candidates in multi-criteria decision making

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

변수가 2~3개뿐인 경우 -- 대신 산점도나 산점도 행렬을 사용하세요
When you have only 2-3 variables -- use a scatterplot or scatterplot matrix instead
청중이 빠르고 한눈에 들어오는 요약을 기대하는 경우 -- 평행 좌표는 적극적인 몰입을 요구합니다; 대시보드에는 막대 차트나 레이더 차트를 사용하세요
When the audience expects a quick, glanceable summary -- parallel coordinates require active engagement; use a bar chart or radar chart for dashboards
관측치가 매우 적은 경우(10개 미만) -- 꺾은선 형식은 이점 없이 복잡성만 더합니다; 표나 레이더 차트를 사용하세요
When you have very few observations (fewer than 10) -- the polyline format adds complexity without benefit; use a table or radar chart
정확한 값 읽기가 중요한 경우 -- 축의 교차점은 정확히 읽기 어렵습니다; 툴팁이나 세부 패널과 함께 사용하세요
When precise value reading is important -- intersection points on axes are hard to read exactly; pair with a tooltip or detail panel
차트가 정적(인쇄물)이고 겹치는 선이 많은 경우 -- 대신 히트맵이나 차원 축소(t-SNE/UMAP)를 고려하세요
When the chart will be static (printed) with many overlapping lines -- consider a heatmap or dimensionality reduction (t-SNE/UMAP) instead

구조 / Anatomy

평행 축: 각각 하나의 변수를 나타내는 수직선으로, 수평으로 균등하게 배치됩니다
Parallel axes: Vertical lines, each representing one variable, evenly spaced horizontally
꺾은선: 관측치당 하나의 선으로, 대응하는 값 위치에서 모든 축을 관통합니다
Polylines: One line per observation, threading through all axes at the corresponding value positions
축 척도: 각 축은 자체 척도를 가지며(범위와 단위가 다를 수 있음), 눈금과 레이블이 값을 나타냅니다
Axis scales: Each axis has its own scale (which may differ in range and units); tick marks and labels indicate values
브러시: 하나 이상의 축에서 일치하는 선을 강조하는 인터랙티브 선택 영역입니다
Brushes: Interactive selection regions on one or more axes that highlight matching lines
축 레이블: 각 축 위나 아래에 있는 변수 이름입니다
Axis labels: Variable names above or below each axis
색상 인코딩: 선은 범주 변수나 연속 지표로 색이 지정되어 그룹 구조를 드러내는 경우가 많습니다
Color encoding: Lines are often colored by a categorical variable or a continuous metric to reveal group structure

변형 / Variations

브러시 가능한 평행 좌표: 사용자가 축에서 선택 범위를 드래그하여 데이터를 필터링하는 표준 인터랙티브 버전입니다
Brushable parallel coordinates: The standard interactive version where users drag selection ranges on axes to filter data
곡선형 평행 좌표: 직선 구간 대신 스플라인 보간을 사용하여 때로는 시각적 어수선함을 줄입니다
Curved parallel coordinates: Lines use spline interpolation instead of straight segments, sometimes reducing visual clutter
번들형 평행 좌표: 선이 공통 경로로 끌어당겨져(엣지 번들링) 군집을 더 잘 보이게 하지만 개별 선 추적을 희생합니다
Bundled parallel coordinates: Lines are attracted to common pathways (edge bundling), making clusters more visible but sacrificing individual line tracing
패럴렐 셋: 리본(샌키 링크와 유사)이 축 사이의 범주를 연결하여 범주값 간 흐름을 보여주는 범주형 변형입니다
Parallel sets: A categorical variant where ribbons (like Sankey links) connect categories across axes, showing flow between categorical values
가중치/불투명도 기반: 선의 불투명도가 빈도나 가중치를 인코딩하여 조밀한 군집이 자연스럽게 드러나게 합니다
Weighted / opacity-based: Line opacity encodes frequency or weight, letting dense clusters emerge naturally

코드 레퍼런스 / Code Reference

// D3 parallel coordinates (simplified)
import * as d3 from "d3";

const dims = ["mpg", "cylinders", "horsepower", "weight", "acceleration"];
const y = {};
dims.forEach(d => {
  y[d] = d3.scaleLinear()
    .domain(d3.extent(cars, c => c[d]))
    .range([height, 0]);
});
const x = d3.scalePoint().domain(dims).range([0, width]);

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

svg.selectAll("path").data(cars).join("path")
  .attr("d", d => d3.line()(dims.map(p => [x(p), y[p](d[p])])))
  .attr("fill", "none").attr("stroke", "steelblue").attr("opacity", 0.3);

dims.forEach(d => {
  svg.append("g").attr("transform", `translate(${x(d)},0)`)
    .call(d3.axisLeft(y[d]))
    .append("text").attr("y", -10).text(d).attr("fill", "black");
});