d3 v7 + 자체 디자인 토큰. 모든 차트 hover 인터랙션 + 진입 애니메이션. 모바일 적응 (가로 600 기준 SVG viewBox + preserveAspectRatio).
1. 시나리오 확률 분포
가로 막대 — 각 시나리오 확률 비교 (gradient + tag 색띠)
data [{name, tag, prob}]타입 bar
2. 핵심 수치 분배
도넛 — 핵심 지표의 상대 비중. 중심에 합계/카운트.
data [{label, value, context?}]타입 donut
3. 인과 사슬 위험도
히트맵 — 단계별 severity 를 색띠 그리드로. CSS 기반이라 PDF/캡처 안전.
data [{title, severity}]타입 heatmap (css)
4. 신뢰도 3축 분해
3축 막대 — 출처 다양성 / 데이터 신선도 / 전문가 합의.
data {source_diversity, data_freshness, expert_consensus}타입 triple
5. 시계열 라인
가격/수치 시간 추이 — area gradient + animated path.
data {label, points: [{x, y}], unit?}타입 line
6. 시나리오 × 영향 누적
누적 막대 — 시나리오별로 행위자 영향 분해.
data {scenarios: [{name, segments: [{label, value}]}]}타입 stacked
7. 리스크 매트릭스
버블 — 확률 × 영향. 4사분면 (고확률·고영향이 우상단).
data [{label, x, y, size, color?}]타입 bubble
8. 타임라인 (Gantt)
사건/시나리오 시간선 — start/end 기준.
data [{label, start, end, color?}]타입 gantt
9. 행위자 네트워크 그래프
force-directed — 행위자 간 동맹/대립/중립 관계. 대립은 점선.
data {nodes: [{id, label, group}], links: [{source, target, type}]}타입 network