v5.4.4
Event Analysis Team · Live Chart Catalog

20종 차트 · entry 애니메이션
실시간 렌더

production src/templates/static/charts.js 가 그대로 동작 — 스크롤하면 IntersectionObserver 가 각 카드에 entry 애니메이션 발사 (CHART-AP-18 가드: ≤700ms, prefers-reduced-motion 정적 폴백, 1회 재생). bar 는 좌→우 grow, donut 은 zero-arc 에서 펼침, line/area 는 stroke-dashoffset 그리기, 나머지는 opacity fade.

VERSION v5.4.4 20 chart types ★ 7 new (v5.3.0) CHART-AP-18 guarded 2026-05-20
Core · v4.x ~ v5.2

기본 12종 — 안정 운영 (safe tier)

Chart Critic / Sanity Gate 통과율 90%↑ 검증된 type. composer 가 자유롭게 emit 가능.

01 · safe

bar — 가로 막대 (시나리오 확률)

categorical 비교의 기본. 좌→우 grow 애니메이션 (v5.3.1 — width 0→final, stagger 40ms). data: [{name, value, tag?}]
시나리오 확률 분포
3개 시나리오 — base / risk / shock
02 · safe

donut — 도넛 (비중 분배)

part-of-whole. zero-arc 에서 startAngle 위치 펼침 (v5.3.1 — attrTween, 680ms). 2-segment 금지 (CHART-AP-16). data: [{label, value}]
매출 사업부 비중
03 · safe

line — 단일 시계열

trend 의 기본. stroke-dashoffset 으로 좌→우 그리기. data: [{x, y, event?}]
KOSPI 3개월 추이
04 · safe

area — 영역 시계열

line + gradient fill 강조. fill path 는 opacity fade (v5.3.1). 단일 series 의 누적/강조용. data: [{x, y, event?}]
WTI 원유 6개월
05 · safe

gantt — 타임라인 막대

duration 있는 이벤트 시각화. zero-duration 금지 (CHART-AP-15). day-precision (v5.2.11). data: [{label, start, end, note?}]
제재 단계 타임라인
06 · safe

stacked — 누적 막대 (시나리오별 구성)

같은 100% 안에서 구성비 비교. 45° 패턴으로 카테고리 구분. data: {scenarios:[{name, parts:[{label, value}]}]}
시나리오별 영향 구성
07 · safe

bubble — 영향·확률 매트릭스

x/y/size 3축. 위험 매트릭스의 기본. data: [{label, x, y, size?}]
위험 매트릭스 (영향 × 확률)
08 · safe

heatmap — 행렬 강도 시각화

시간 × 카테고리 또는 행위자 × 행위자. CSS 기반이라 PDF 캡처 안전. data: [{title, severity}] 또는 행렬
단계별 위험 강도
09 · safe

dual_line — 두 지표 동시 비교

상관·디커플링 시각화. 두 line 의 stroke-dashoffset 그리기 + 점선 보존 (v5.3.1 silent fix). data: {series:[{name, data:[{x,y}]}]}
KOSPI vs DXY
10 · safe

forecast — 시계열 + 신뢰구간 cone

history + 예측 + 90%/50% cone. data: {history:[{x,y}], forecast:[{x, lo90, lo50, mid, hi50, hi90}]}
미국 기준금리 전망
11 · safe

network — 행위자 관계망

노드 + edge (관계 부호). force layout. data: {nodes:[{id, group?}], links:[{source, target, rel?}]}
중동 행위자 관계
12 · safe · v5.2.0

candle — OHLC 캔들스틱

market_fetcher 실데이터 전용 (KRX/Yahoo). 상승/하락 mono fill. data: [{date, open, high, low, close}]
삼성전자 1개월 OHLC (예시 데이터)
★ FT/Economist Style · v5.3.0

신규 7종 + sankey — guarded tier

Chart Critic 7-질문 + Sanity Gate C 통과 필수. line/bar default bias 차단을 위해 결정 트리에 명시 분기 (재무 → sankey/waterfall 강제 — v5.4.3 step 0).

13 · ★ guarded

scatter — 라벨 산점도

bubble 과 구분 — size 인코딩 X, 점 + label. FT 좌측 스타일. data: [{label, x, y}]
PER vs ROE (반도체)
14 · ★ guarded

stacked_area — 누적 영역 (점유율 변화)

FT 우측 스타일. 시계열 위에서 점유율 연속 변화. data: {series:[{name, data:[{x,y}]}]}
LLM API 시장 점유율 (분기별)
15 · ★ guarded

lollipop — bar 의 우아한 대안

8-15 항목의 비교에 적합. 막대 잉크 줄이고 값 위치 강조. data: [{name, value}]
국가별 반도체 자급률
16 · ★ guarded

slope — 2 시점 비교 + 순위 역전

before/after 2개 점 + 연결선. 3-10 항목. data: {items:[{label, before, after}]}
2024 → 2026 OS 점유율
17 · ★ guarded

small_multiples — 패널 그리드

4-9 패널 같은 축으로 비교. Tufte 의 *small multiples* 원칙. data: {panels:[{title, series:[{x,y}]}]}
주요 지수 6개월 (4개 비교)
18 · ★ guarded

waterfall — 양/음 누적 분해 (재무)

시작 → 가감 → 종착. v5.4.3 결정 트리 step 0 — 재무·수익성 보고서는 sankey 또는 waterfall 강제. data: [{name, value, type?}]
2026 1Q 영업이익 분해 (조 원)
19 · ★ guarded

range_bar — 신뢰구간 막대

low/high 구간 + 중앙값. 예측 분포 / 합의 vs 이상 비교. data: [{name, low, high, mid?}]
2026 GDP 성장률 전망 (기관별)
20 · ★ v5.3.0

sankey — 흐름 분해 (자본·매출)

노드 간 양적 flow. 재무 분해의 정공법 (CHART-AP-19 fix). data: {nodes:[{id}], links:[{source, target, value, negative?}]}
매출 → 사업부 → 손익 (1Q 분기 흐름)