Agent skill · data analytics · aiskillstore
d3-viz
Create interactive data visualizations using D3.js. Use this when creating charts, graphs, network diagrams, geographic visualizations, or custom SVG-based data visualization.
Why this skill is useful
Provides specific D3.js patterns and code snippets for creating various types of data visualizations that the AI wouldn't reliably generate on its own.
What it needs
Requires d3 installed locally. About 2k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
D3.js Visualization D3.js를 사용한 인터랙티브 데이터 시각화 가이드입니다. When to Use D3.js 적합한 경우: 커스텀 차트 (표준 라이브러리에 없는) 인터랙티브 탐색 (pan, zoom, brush) 네트워크/그래프 시각화 지리 시각화 (커스텀 projection) 애니메이션 transition 출판 품질 그래픽 대안 고려: 3D 시각화 → Three.js 간단한 차트 → Chart.js, Recharts Setup Core Workflow Common Patterns Bar Chart Line Chart Pie Chart Interactivity Tooltips Zoom & Pan Transitions Scales Reference Scale Type Use Case ------------ ---------- scaleLinear 연속 수치 scaleLog 지수 데이터 scaleTime 시간/날짜 scaleBand Bar chart 카테고리 scaleOrdinal 색상 매핑 scaleSequential 연속 색상 Color Schemes Best Practices 1. Data Validation: null/NaN 체크 2. Responsive: ResizeObserver 사용 3. Performance: 1000+ 요소 시 Canvas 고려 4. Accessibility: ARIA labels 추가 5. Clean Up: 이전 렌더링 제거
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/d3-viz