Web Data Visualization

Web Data Visualization Skill

web/_design/data.json을 입력으로 받아 인터랙티브 차트를 web/scripts/에 구현하는 워크플로우.

워크플로우

Step 1: 라이브러리 선택 (CDN 사용)

원칙: 단일 사이트에 라이브러리 1~2개만. 표준 차트는 Chart.js, 특수 차트(매트릭스·sankey)는 ECharts.

Step 2: 차트 컴포넌트 매핑

Step 3: 차트별 구현 (각 파일 web/scripts/chart-configs/)

3-1. price-chart.js — 1Y 가격 차트

• 영역 채우기(기간 토글: 1M/3M/6M/1Y/YTD)
• 호버 시 정확한 가격·날짜·등락 표시
• 52주 고저점 마커
• 라인 컬러: bull(#10b981) / bear(#ef4444) 그라데이션 (gain/loss 영역별)

3-2. revenue-trend.js — 5년 매출/OP/OPM

• 매출·OP 막대 (그룹 또는 스택), OPM 보조축 라인
• FY26E는 점선 또는 패턴으로 추정 표시
• FY23 적자는 음수 표현

3-3. hbm-share.js — HBM 점유율 도넛

• 토글: bit / revenue / HBM4 forecast
• SK 50%·삼성 28%·마이크론 22% (bit 2026)
• 중앙: 현재 선택된 항목명·SK 점유율 강조

3-4. nvidia-supply.js — NVIDIA 공급사 매트릭스

• ECharts heatmap
• 행: H100/H200/B100/B200/B300/Rubin/Rubin Ultra
• 열: SK / Samsung / Micron
• 값: 0=공급 없음, 1=보조, 2=주력, 3=단독
• 셀 클릭 시 상세 (HBM 세대·용량 등)

3-5. consensus.js — 컨센서스 분포

• 가로 도트 차트 (각 증권사 1점)
• X축: 목표가, Y축: 증권사명
• 현재가 vertical line + 평균 vertical line
• 색: Buy=초록 / Hold=주황 / Sell=빨강

3-6. scenarios.js — Bear/Base/Bull

• Fan chart: 가로축=현재가→12개월, 세로축=주가 범위
• 3개 시나리오 영역을 색상별로 (Bear=빨강 / Base=회청 / Bull=초록)
• 각 시나리오 확률 백분율 라벨
• 인터랙티브: 시나리오 토글 시 해당만 강조

3-7. risk-matrix.js — 영향력 × 가능성 히트맵

• ECharts heatmap 3×3
• 셀 안 라벨: 리스크 항목명 (예: "(D) NVIDIA 단일 고객")
• 우측 패널: 셀 클릭 시 상세 리스크 정보

Step 4: 공통 인터랙션 패턴

// 스크롤 진입 시 애니메이션 (motion-designer와 협업)
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting && !entry.target.dataset.animated) {
      entry.target.dataset.animated = 'true';
      initChartFor(entry.target.id);  // 진입 시점에 차트 생성
    }
  });
}, { threshold: 0.3 });

document.querySelectorAll('[data-chart]').forEach(el => observer.observe(el));

// prefers-reduced-motion 대응
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
const chartOptions = {
  animation: prefersReducedMotion ? false : { duration: 800, easing: 'easeOutCubic' },
  // ...
};

Step 5: 차트 컨테이너 명세 (frontend-engineer와 공유)

각 차트는 다음 HTML 구조에 마운트:

<div class="chart-container" data-chart>
  <header class="chart-header">
    <h3 class="chart-title">차트 제목</h3>
    <p class="chart-subtitle">설명</p>
    <!-- 토글 버튼 (필요 시) -->
  </header>
  <div class="chart-body">
    <canvas id="chart-price"></canvas>  <!-- 또는 <div id="..."> for ECharts -->
  </div>
  <footer class="chart-footer">
    <p class="chart-source">출처: ...</p>
  </footer>
</div>

이 마크업 명세를 frontend-engineer에게 SendMessage로 공유.

Step 6: 통합 진입점 — web/scripts/charts.js

import { initPriceChart } from './chart-configs/price-chart.js';
import { initRevenueTrend } from './chart-configs/revenue-trend.js';
// ... 7개 차트 import

export async function initAllCharts() {
  const data = await fetch('/web/_design/data.json').then(r => r.json());
  
  // IntersectionObserver로 lazy init
  const chartInitializers = {
    'chart-price': () => initPriceChart(data),
    'chart-revenue-trend': () => initRevenueTrend(data),
    // ...
  };
  
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      const id = entry.target.querySelector('canvas, div[id]')?.id;
      if (entry.isIntersecting && chartInitializers[id]) {
        chartInitializers[id]();
        observer.unobserve(entry.target);
      }
    });
  }, { threshold: 0.2 });
  
  document.querySelectorAll('[data-chart]').forEach(el => observer.observe(el));
}

Step 7: 시각화 노트 작성

web/_design/visualization-notes.md에 다음 정리:

• 사용 라이브러리·버전·CDN URL
• 7개 차트의 데이터 매핑·인터랙션 명세
• 색상 토큰 매핑
• 모바일 단순화 규칙
• 데이터 미확보(N/A) 항목 처리 방식

작업 원칙

• 데이터 정확성: data.json을 단일 소스로. 임의 가공 금지. 수정 필요 시 design-lead에게 요청
• 컬러 토큰만 사용: viz-1~8 외 컬러 임의 추가 금지
• 반응형 차트: ResponsiveContainer 또는 Chart.js responsive: true + maintainAspectRatio: false. 모바일에서 레이블 단순화
• 접근성: 차트 옆에 텍스트 요약(스크린리더용 <table> 또는 aria-label) 제공
• 성능: lazy init (스크롤 진입 시), 차트 인스턴스는 재사용 가능하면 재사용

팀 통신

• design-lead로부터 data.json·color tokens·차트 권장 종류 수신
• frontend-engineer에게 차트 컨테이너 HTML 구조 + 초기화 함수 명세 SendMessage
• motion-designer와 스크롤 진입 stagger 조율 (모션 충돌 방지)
• web-qa에게 visualization-notes.md 제공 + 데이터 정합성 검증 요청

후속 실행 시

이전 차트 코드 보존, 변경 필요 차트만 수정. data.json 변경 시 영향받는 차트만 갱신.