web-data-visualization

Web Data Visualization Skill

web/_design/data.jsonas input to create interactive charts in web/scripts/workflow implemented.

Workflow

Step 1: Library selection (using CDN)

Chart type	Recommended library	CDN
Line/Bar/Donut/Combo	Chart.js v4	cdn.jsdelivr.net/npm/chart.js@4
Heatmap·sankey·complex interactions	Apache ECharts v5	cdn.jsdelivr.net/npm/echarts@5
Custom fan chart·composite SVG	D3.js v7 (only when needed)	d3js.org/d3.v7.min.js
Auxiliary: tween animation	GSAP (share if motion-designer is using it)	-

Principles: Only 1–2 libraries per single site. Chart.js for standard charts, ECharts for special charts (matrix·sankey).

Step 2: Chart component mapping

Chart ID	Data source	Library	Chart type
chart-price	data.priceHistory + data.snapshot.high52w/low52w	Chart.js	Line + area fill + markers
chart-revenue-trend	data.revenueByYear	Chart.js	Combo (bars: revenue/OP, line: OPM secondary axis)
chart-hbm-share	data.hbmShare2026	Chart.js	3 donuts (bit / revenue / hbm4 toggle)
chart-nvidia-supply	data.nvidiaSupplyMatrix	ECharts	Heatmap (rows: GPU, columns: supplier)
chart-consensus	data.consensus.targets	Chart.js	Horizontal dot chart + average line
chart-scenarios	data.scenarios	Chart.js or D3	Fan chart or box (Bear/Base/Bull)
chart-risk-matrix	data.riskMatrix	ECharts	3×3 heatmap + labels

Step 3: Implementation per chart (each file web/scripts/chart-configs/)

3-1. price-chart.js — 1Y price chart

• Area fill (period toggle: 1M/3M/6M/1Y/YTD)
• Show exact price·date·change on hover
• 52-week high/low markers
• Line color: bull(#10b981) / bear(#ef4444) gradient (by gain/loss area)

3-2. revenue-trend.js — 5-year revenue/OP/OPM

• Revenue·OP bars (grouped or stacked), OPM secondary-axis line
• FY26E shown as estimate with dashed line or pattern
• FY23 loss shown as negative

3-3. hbm-share.js — HBM market share donut

• Toggle: bit / revenue / HBM4 forecast
• SK 50%·Samsung 28%·Micron 22% (bit 2026)
• Center: currently selected item name·SK share emphasized

3-4. nvidia-supply.js — NVIDIA supplier matrix

• ECharts heatmap
• 행: H100/H200/B100/B200/B300/Rubin/Rubin Ultra
• 열: SK / Samsung / Micron
• Values: 0=no supply, 1=secondary, 2=primary, 3=sole
• Cell click shows details (HBM generation·capacity, etc.)

3-5. consensus.js — consensus distribution

• Horizontal dot chart (1 dot per securities firm)
• X-axis: target price, Y-axis: securities firm name
• Current price vertical line + average vertical line
• Color: Buy=green / Hold=orange / Sell=red

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

• Fan chart: horizontal axis=current price→12 months, vertical axis=stock price range
• 3 scenario areas color-coded (Bear=red / Base=slate / Bull=green)
• Probability percentage label for each scenario
• Interactive: when a scenario is toggled, emphasize only that one

3-7. risk-matrix.js — Impact × Likelihood Heatmap

• ECharts heatmap 3×3
• Label inside cell: risk item name (e.g., "(D) NVIDIA single customer")
• Right panel: detailed risk information when a cell is clicked

Step 4: Common Interaction Patterns

// 스크롤 진입 시 애니메이션 (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: Chart Container Specification (shared with frontend-engineer)

Each chart mounts into the following HTML structure:

<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>

Share this markup specification with frontend-engineer via SendMessage.

Step 6: Unified Entry Point — 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: Write Visualization Notes

web/_design/visualization-notes.mdOrganize the following into:

• Libraries used, versions, CDN URLs
• Data mapping and interaction specifications for the 7 charts
• Color token mapping
• Mobile simplification rules
• How to handle items with no data available (N/A)

Working Principles

• Data Accuracy: Use data.json as the single source. Do not arbitrarily modify. If changes are needed, request them from design-lead
• Use only color tokens: Do not arbitrarily add colors other than viz-1~8
• Responsive Charts: ResponsiveContainer or Chart.js responsive: true + maintainAspectRatio: false. Simplify labels on mobile
• Accessibility: Provide a text summary next to the chart (for screen readers, <table> or aria-label)
• Performance: Lazy init (on scroll entry), reuse chart instances when possible

Team Communication

• Receive data.json, color tokens, and recommended chart types from design-lead
• SendMessage chart container HTML structure + initialization function specification to frontend-engineer
• Coordinate scroll-entry stagger with motion-designer (prevent motion conflicts)
• Provide visualization-notes.md to web-qa + request data consistency verification

On Subsequent Runs

Preserve previous chart code, modify only charts that need changes. When data.json changes, update only the affected charts.