HTML 외에도 Vega를 사용하여 그래프를 그리는 방법은 여러 가지가 있습니다. Vega는 다양한 환경에서 사용할 수 있는 도구와 라이브러리를 제공합니다. 아래는 Vega를 활용할 수 있는 다른 방법들입니다.
| 방법 | 주요 사용 환경 | 장점 |
| Vega CLI | 명령줄 | 빠르게 그래프 파일 생성. 서버 사이드 작업에 적합. |
| Python (Altair/Vega) | 데이터 분석 | Python의 데이터 분석 도구와 통합 용이. |
| Node.js | 서버 환경 | 동적으로 그래프 생성 및 파일 출력 가능. |
| Jupyter Notebook | 데이터 실험 | 데이터 분석 및 시각화를 실시간으로 확인 가능. |
| Vega Editor | 브라우저 | 실시간 수정 및 시각화 확인. 개발 초기 실험에 적합. |
1. Vega CLI (명령줄 인터페이스)
Vega CLI를 사용하면 그래프를 직접 생성하고 이미지를 파일로 저장할 수 있습니다. 이 방법은 서버 사이드 환경이나 CI/CD 파이프라인에서 유용합니다.
설치
npm install -g vega-cli
사용 방법
1. Vega 스펙을 JSON 파일로 작성합니다 (예: chart_config.json).
2. 명령줄에서 Vega CLI를 사용해 PNG 또는 SVG로 내보냅니다.
vg2png chart_config.json -o chart.png
vg2svg chart_config.json -o chart.svg
2. Python 환경에서 Vega
Python 사용자라면 vega 또는 altair 라이브러리를 사용해 Vega 그래프를 그릴 수 있습니다.
Vega 라이브러리
Vega의 Python 라이브러리를 사용하면 Vega JSON 스펙을 Python 코드로 작성하거나 렌더링할 수 있습니다.
설치
pip install vega
예제
from vega import Vega
spec = {
"$schema": "https://vega.github.io/schema/vega/v5.json",
"width": 400,
"height": 200,
"padding": 5,
"data": [
{"name": "table", "values": [
{"category": "A", "amount": 28},
{"category": "B", "amount": 55},
{"category": "C", "amount": 43}
]}
],
"marks": [
{
"type": "rect",
"from": {"data": "table"},
"encode": {
"enter": {
"x": {"scale": "xscale", "field": "category"},
"y": {"scale": "yscale", "field": "amount"},
"width": {"scale": "xscale", "band": 1},
"y2": {"scale": "yscale", "value": 0}
}
}
}
],
"scales": [
{"name": "xscale", "type": "band", "domain": {"data": "table", "field": "category"}, "range": "width"},
{"name": "yscale", "domain": {"data": "table", "field": "amount"}, "nice": True, "range": "height"}
],
"axes": [
{"orient": "bottom", "scale": "xscale"},
{"orient": "left", "scale": "yscale"}
]
}
vega_chart = Vega(spec)
vega_chart.display()
Altair 라이브러리
Altair는 Vega-Lite를 기반으로 한 Python 라이브러리로, 더 간단한 문법을 제공합니다.
설치
pip install altair
예제
import altair as alt
import pandas as pd
# 데이터 준비
data = pd.DataFrame({
'category': ['A', 'B', 'C', 'D'],
'amount': [28, 55, 43, 91]
})
# Altair 그래프 생성
chart = alt.Chart(data).mark_bar().encode(
x='category',
y='amount'
)
chart.show() # 웹 브라우저에 렌더링
3. Node.js 환경에서 Vega
Node.js를 사용해 서버 사이드에서 Vega를 실행하고 차트를 렌더링할 수 있습니다.
설치
npm install vega vega-cli canvas
사용 방법
Node.js 스크립트에서 Vega를 호출하여 그래프를 생성할 수 있습니다.
const fs = require('fs');
const vega = require('vega');
// Vega 스펙 불러오기
const spec = require('./chart_config.json');
// Vega View 생성
const view = new vega.View(vega.parse(spec), { renderer: 'none' });
// PNG 출력
view.toCanvas().then(canvas => {
fs.writeFileSync('chart.png', canvas.toBuffer());
console.log('Chart saved as chart.png');
}).catch(err => {
console.error(err);
});
4. Jupyter Notebook에서 Vega
Jupyter Notebook 환경에서 Vega 시각화를 직접 실행할 수 있습니다.
설치
pip install altair vega3
사용방법
Jupyter Notebook 셀에 Altair 또는 Vega3를 사용해 그래프를 렌더링할 수 있습니다.
from IPython.display import display
import json
# Vega JSON 스펙 불러오기
with open('chart_config.json') as f:
spec = json.load(f)
# Vega 그래프 표시
from vega import Vega
vega_chart = Vega(spec)
display(vega_chart)
5. Vega Editor
Vega Editor는 브라우저에서 Vega 스펙을 작성하고 결과를 실시간으로 확인할 수 있는 도구입니다.
1. Vega Editor에 접속.
2. JSON 스펙 작성.
3. 결과 확인 및 PNG/SVG로 내보내기.
위 방법들 중에서 작업 환경에 맞는 방법을 선택하면 됩니다!