Sparklines

설명 / Description

스파크라인은 텍스트나 데이터 안에 인라인으로 삽입되는 작고 고해상도의 그래픽입니다. 에드워드 터프티(Edward Tufte)가 Beautiful Evidence(2006)에서 이 용어를 만들고 대중화했으며, 스파크라인은 "데이터가 집약적이면서 디자인은 단순한, 단어 크기의 그래픽"입니다. 축, 레이블, 격자선, 범례 -- 데이터 선 자체를 제외한 모든 것 -- 을 걷어내어 문장, 표 셀, 또는 대시보드 타일 안에 자연스럽게 들어맞는 시각 요소를 만듭니다.

A sparkline is a small, high-resolution graphic embedded inline with text or data. Coined and popularized by Edward Tufte in Beautiful Evidence (2006), sparklines are "data-intense, design-simple, word-sized graphics." They strip away axes, labels, gridlines, and legends -- everything except the data line itself -- to create a visual that fits naturally within a sentence, table cell, or dashboard tile.

최소한의 크기에도 불구하고 스파크라인은 놀라울 만큼 정보량이 풍부합니다. 단순한 선 스파크라인 하나로 전반적인 추세(상승, 하락, 순환), 변동성(매끄러움 대 들쭉날쭉함), 시계열의 대략적인 범위를 전달할 수 있습니다. 표의 열에 숫자 데이터와 나란히 배치되면, 스파크라인은 독자가 여러 행을 훑어보며 머릿속으로 추세를 재구성해야 했을 시간적 차원을 추가해줍니다.

Despite their minimal size, sparklines are remarkably informative. A simple line sparkline communicates the general trend (rising, falling, cyclical), volatility (smooth vs. jagged), and approximate range of a time series. When placed in a table column alongside numerical data, sparklines add a temporal dimension that would otherwise require readers to scan multiple rows and mentally reconstruct trends.

스파크라인의 힘은 그 밀도와 맥락에 있습니다. 데이터가 존재하는 바로 그 자리 -- 주식 시세와 같은 행, 환자의 생체 신호 옆, 또는 서술형 문장 안 -- 에 그래픽을 삽입함으로써, 스파크라인은 독자가 차트와 표 사이를 오가며 대조해야 할 필요를 없앱니다. 스파크라인 전체 열이 수직으로 정렬되면, 시청자는 한눈에 여러 개체 간의 추세를 비교할 수 있어 초압축형 스몰 멀티플처럼 기능합니다.

The power of sparklines lies in their density and context. By embedding the graphic where the data lives -- in the same row as a stock ticker, next to a patient's vital sign reading, or inline within a narrative sentence -- sparklines eliminate the need for the reader to cross-reference between a chart and a table. When an entire column of sparklines is aligned vertically, the viewer can compare trends across entities at a glance, functioning as an ultra-compact form of small multiples.

Sparkline — inline trend visualization

언제 사용하나 / When to Use

표, 대시보드, 리포트에 상당한 공간을 차지하지 않으면서 추세 맥락을 더할 때
Adding trend context to tables, dashboards, or reports without taking up significant space
한눈에 비교할 수 있도록 여러 시계열을 나란히 보여줄 때(행당 스파크라인 하나)
Showing many time series in parallel (one sparkline per row) for at-a-glance comparison
텍스트나 숫자 값과 함께 인라인으로 시각적 추세 지표를 삽입할 때
Embedding a visual trend indicator inline with text or numerical values
모니터링 대시보드에서 지표의 최근 동향에 대한 "맥박" 뷰를 제공할 때
Providing a "pulse" view of a metric's recent behavior in monitoring dashboards

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

차트에서 정확한 값을 읽어야 할 때 -- 스파크라인에는 축이나 레이블이 없으므로 완전한 선 그래프를 사용하세요
When precise values need to be read from the chart -- sparklines have no axes or labels; use a full line graph
청중이 스케일이나 단위를 이해해야 할 때 -- 축이 있는 레이블된 차트를 사용하세요
When the audience needs to understand the scale or units -- use a labeled chart with axes
추세가 매우 미묘하여 신중한 비교가 필요할 때 -- 작은 크기는 정밀도를 제한하므로 더 큰 크기의 스몰 멀티플을 사용하세요
When trends are very subtle and require careful comparison -- the small size limits precision; use small multiples at a larger size
데이터 포인트가 하나뿐일 때 -- 스파크라인은 패턴을 보여주기 위해 값의 연속이 필요합니다
When there is only one data point -- sparklines need a sequence of values to show a pattern

구조 / Anatomy

데이터 선: 핵심 요소 -- 축 없이 추세를 그리는 얇은 선(또는 막대 시퀀스)
Data line: The core element -- a thin line (or bar sequence) tracing the trend, with no axes
끝점 마커: 시선을 고정하기 위해 첫 값, 마지막 값, 최솟값, 최댓값에 표시하는 선택적 점
Endpoint markers: Optional dots at the first, last, minimum, or maximum values to anchor the eye
기준 대역: 정상 범위나 목표 구간을 보여주는 선택적 음영 영역
Reference band: An optional shaded region showing a normal range or target zone
인라인 배치: 스파크라인이 텍스트 흐름이나 표 셀 안에 위치하며, 주변 콘텐츠와 수직으로 정렬됩니다
Inline placement: The sparkline sits within text flow or a table cell, vertically centered with surrounding content
색상: 보통 단일 색상이며, 최신 값이 이상치일 경우 빨간색으로 강조할 수 있습니다
Color: Typically a single color; red may highlight the latest value if it is an outlier
승/패 인코딩: 막대형 스파크라인에서 양수 값은 위로, 음수 값은 아래로 향합니다
Win/loss encoding: In bar-style sparklines, positive values go up and negative values go down

변형 / Variations

선 스파크라인: 고전적인 형태 -- 시계열을 그리는 단순한 선
Line sparkline: The classic form -- a simple line tracing a time series
막대 스파크라인: 시간에 따른 값을 보여주는 아주 작은 막대(흔히 1~2픽셀 너비)로, 이산적인 구간에 유용합니다
Bar sparkline: Tiny bars (often just 1-2 pixels wide) showing values over time, useful for discrete intervals
승/패 스파크라인: 중심선 위/아래의 이진 막대로 긍정/부정 결과를 보여줍니다
Win/loss sparkline: Binary bars above/below a centerline showing positive/negative outcomes
영역 스파크라인: 선 아래 영역이 채워져 추세에 더 많은 시각적 무게를 부여합니다
Area sparkline: The area under the line is filled, giving more visual weight to the trend
불릿 스파크라인: 스파크라인에 목표 마커와 성과 대역을 결합한 것으로, 대시보드에서 사용됩니다
Bullet sparkline: Combines a sparkline with a target marker and performance band, used in dashboards
밴드 스파크라인: 두 선 사이의 음영 영역으로 범위를 보여줍니다(예: 최고/최저 기온)
Band sparkline: A shaded region between two lines showing a range (e.g., high/low temperatures)

코드 레퍼런스 / Code Reference

// Observable Plot - sparkline (no axes, minimal)
Plot.plot({
  height: 40,
  axis: null,
  marks: [
    Plot.line(data, {
      x: "date", y: "value",
      stroke: "#6366f1", strokeWidth: 1.5
    }),
    Plot.dot([data[data.length - 1]], {
      x: "date", y: "value",
      fill: "#f43f5e", r: 3
    })
  ],
  x: {axis: null},
  y: {axis: null}
})