Vega-Lite

개요 / Overview

Vega-Lite는 간결한 JSON 명세로부터 인터랙티브 그래픽을 만들어내는 고수준 시각화 문법입니다. UW Interactive Data Lab(제프리 히어(Jeffrey Heer)가 이끄는 연구 그룹)이 개발했으며, 완전한 Vega 명세로 컴파일되어 브라우저에서 SVG나 캔버스로 렌더링됩니다. Vega-Lite의 핵심 통찰은 대부분의 시각화가 어떻게 그릴지가 아니라 무엇을 보여줄지로 기술될 수 있다는 것입니다.

Vega-Lite is a high-level visualization grammar that produces interactive graphics from concise JSON specifications. Developed by the UW Interactive Data Lab (the research group led by Jeffrey Heer), it compiles down to full Vega specifications, which in turn render as SVG or Canvas in the browser. The key insight behind Vega-Lite is that most visualizations can be described by what you want to show rather than how to draw it.

Vega-Lite 명세는 데이터, 인코딩 채널(어떤 데이터 필드가 x, y, 색상, 크기 등에 매핑되는지), 마크 유형(막대, 점, 선 등)을 선언합니다. 시스템은 척도, 축, 범례, 레이아웃을 자동으로 처리합니다. Vega-Lite를 유사한 도구들과 구별 짓는 것은 인터랙션(선택, 브러싱, 확대/축소)과 다중 뷰 구성(레이어링, 패싯팅, 연결, 반복)에 대한 정교한 지원입니다 — 이 모든 것이 JSON으로 선언적으로 표현됩니다.

A Vega-Lite specification declares the data, the encoding channels (which data fields map to x, y, color, size, etc.), and the mark type (bar, point, line, etc.). The system handles scales, axes, legends, and layout automatically. What sets Vega-Lite apart from similar tools is its sophisticated support for interaction (selections, brushing, zooming) and multi-view composition (layering, faceting, concatenation, repeating) — all expressed declaratively in JSON.

Vega-Lite는 활발한 생태계를 가지고 있습니다: Altair(Python), VegaLite.jl(Julia), ggvega(R)가 언어별 래퍼를 제공합니다. Vega Editor는 브라우저 기반 플레이그라운드를 제공합니다. 학술 연구, Jupyter 노트북, Observable 노트북에서 널리 사용되며, 그 명세는 본질적으로 이식 가능하고 버전 관리가 가능합니다.

Vega-Lite has a thriving ecosystem: Altair (Python), VegaLite.jl (Julia), and ggvega (R) provide language-specific wrappers. The Vega Editor offers a browser-based playground. It is widely used in academic research, Jupyter notebooks, and Observable notebooks, and its specifications are inherently portable and version-controllable.

강점 / Strengths

• 선언적 JSON 명세로 시각화가 완전히 재현 가능하고 버전 관리 가능
• Declarative JSON spec makes visualizations fully reproducible and version-controllable
• 지능적인 기본값으로 척도, 축, 범례, 제목을 자동 생성
• Automatic scales, axes, legends, and titles with intelligent defaults
• 강력한 인터랙션 기본 요소: 점 선택, 구간 선택, 조건부 인코딩
• Powerful interaction primitives: point selection, interval selection, conditional encoding
• 다중 뷰 구성: 레이어링, 패싯팅, 연결, 반복
• Multi-view composition: layering, faceting, concatenation, repeating
• 완전한 Vega로 컴파일되어 고급 커스터마이징을 위한 탈출구 제공
• Compiles to full Vega, providing an escape hatch for advanced customization
• 뛰어난 Python 래퍼(Altair)가 Jupyter와 pandas와 통합
• Excellent Python wrapper (Altair) integrates with Jupyter and pandas
• 명세가 이식 가능함 — 동일한 JSON이 모든 Vega-Lite 렌더러에서 작동
• Specs are portable — same JSON works in any Vega-Lite renderer
• 정기적인 논문 발표와 릴리스가 있는 활발한 학술적 개발
• Active academic development with regular publications and releases
• Vega Editor가 실시간 브라우저 기반 작성과 디버깅을 제공
• Vega Editor provides live browser-based authoring and debugging
• 명세에 내장된 데이터 변환(필터, 집계, 구간화, 계산, 폴드)
• Data transformations (filter, aggregate, bin, calculate, fold) built into the spec

한계 / Limitations

• 복잡한 시각화의 경우 JSON 명세가 장황해질 수 있음
• JSON specs can become verbose for complex visualizations
• 약 1만 행을 넘는 데이터셋에서는 성능이 저하됨(캔버스 렌더러가 도움이 됨)
• Performance degrades with datasets larger than ~10K rows (Canvas renderer helps)
• 애니메이션 지원이 제한적(Vega에는 일부 있으며 Vega-Lite는 부분적으로만 상속)
• Animation support is limited (Vega has some, Vega-Lite inherits partially)
• 명세 언어를 배우려면 특유의 추상화를 이해해야 함
• Learning the specification language requires understanding its particular abstractions
• 제공된 테마 옵션을 넘어서는 스타일링에는 Vega 수준의 커스터마이징이 필요
• Styling beyond the provided theme options requires Vega-level customization
• 명세가 잘못되었을 때 오류 메시지가 이해하기 어려울 수 있음
• Error messages can be cryptic when specs are malformed
• D3나 Plotly보다 커뮤니티 예제가 적음
• Fewer community examples than D3 or Plotly
• 컴파일 단계(Vega-Lite → Vega → SVG/Canvas)가 디버깅에 복잡성을 더함
• The compilation step (Vega-Lite → Vega → SVG/Canvas) adds complexity for debugging

이런 용도에 최적 / Best For

Vega-Lite는 재현성과 선언적 명세가 중요한 연구 및 분석 환경에서 탁월합니다. Jupyter 노트북에서 인터랙티브 차트를 원하는 Python(Altair 경유) 데이터 과학자, 명령형 코드 없이 조율된 다중 뷰 대시보드를 구축하려는 경우, 그리고 시각화 명세를 데이터와 함께 버전 관리 가능한 JSON 아티팩트로 저장하고자 하는 팀에게 이상적입니다. 그래픽 문법(grammar of graphics) 철학을 중시하고 기본 내장 인터랙티비티를 원한다면, Vega-Lite는 최상위 선택입니다.

Vega-Lite excels in research and analysis environments where reproducibility and declarative specification matter. It is ideal for data scientists using Python (via Altair) who want interactive charts in Jupyter notebooks, for building coordinated multi-view dashboards without imperative code, and for teams that want to store visualization specifications as versionable JSON artifacts alongside their data. If you value the grammar-of-graphics philosophy and want built-in interactivity, Vega-Lite is a top choice.

시작하기 / Getting Started

브라우저에서 Vega-Lite JavaScript API 사용:

In the browser with the Vega-Lite JavaScript API:

npm install vega-lite vega vega-embed

import vegaEmbed from "vega-embed";

const spec = {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": { "url": "data/cars.json" },
  "mark": "point",
  "encoding": {
    "x": { "field": "Horsepower", "type": "quantitative" },
    "y": { "field": "Miles_per_Gallon", "type": "quantitative" },
    "color": { "field": "Origin", "type": "nominal" }
  }
};

vegaEmbed("#chart", spec);

Python(Altair)으로:

With Python (Altair):

pip install altair vega_datasets

import altair as alt
from vega_datasets import data

cars = data.cars()
alt.Chart(cars).mark_point().encode(
    x='Horsepower:Q',
    y='Miles_per_Gallon:Q',
    color='Origin:N'
).interactive()

지원 차트 유형 / Supported Chart Types

Vega-Lite는 막대 차트, 누적 막대 차트, 선 그래프, (누적, 정규화, 스트림그래프) 영역 그래프, 산점도, 버블 차트, 히스토그램, 히트맵, 박스 플롯, 파이 차트, 도넛 차트, (GeoJSON을 통한) 코로플레스 맵, 스트립 플롯, 틱 플롯, 오차 막대/밴드, 밀도 플롯, 회귀선, LOESS 평활화, 텍스트 플롯을 지원합니다. 구성 연산자(레이어, 패싯, 연결, 반복)를 통해 스몰 멀티플, 연결된 브러싱 대시보드, 스파크라인 같은 임베디드 차트를 만들 수 있습니다. 트리맵, 샌키 다이어그램, 네트워크 다이어그램은 Vega-Lite에서 직접 사용할 수 없지만 상위 언어인 Vega에서 만들 수 있습니다.

Vega-Lite supports bar charts, stacked bar charts, line graphs, area graphs (stacked, normalized, streamgraph), scatterplots, bubble charts, histograms, heatmaps, box plots, pie charts, donut charts, choropleth maps (via GeoJSON), strip plots, tick plots, error bars/bands, density plots, regression lines, LOESS smoothing, and text plots. Its composition operators (layer, facet, concat, repeat) allow construction of small multiples, linked brushing dashboards, and sparkline-like embedded charts. Treemaps, Sankey diagrams, and network diagrams are not directly available in Vega-Lite but can be created in the parent Vega language.