d3-visualization

SKILL.md

This skill helps you create custom, interactive data visualizations using D3.js (Data-Driven Documents). D3 provides low-level building blocks for data-driven DOM manipulation, visual encoding, layout algorithms, and interactions—enabling bespoke visualizations that chart libraries can't provide.

Data Joins: Bind arrays to DOM elements, creating one-to-one correspondence Scales: Transform data values → visual values (pixels, colors, sizes) Shapes: Generate SVG paths for lines, areas, arcs from data Layouts: Calculate positions for complex visualizations (networks, trees, maps) Transitions: Animate smooth changes between states

Use when: Building bar, line, or scatter charts from scratch

막대/선/분산형 차트를 처음부터 작성하고, 네트워크 다이어그램 또는 지리 지도를 작성하고, 변경 데이터를 시각적 요소에 바인딩하고, 확대/축소/이동/브러시 상호 작용을 추가하고, 차트 전환에 애니메이션을 적용하거나 차트 라이브러리(Highcharts, Chart.js)가 특정 시각화 디자인을 지원하지 않고 데이터 기반 DOM 조작, 배율, 모양 및 레이아웃에 대한 하위 수준 제어가 필요한 경우 D3.js를 사용하여 사용자 정의 대화형 데이터 시각화를 만들 때 사용합니다. 출처: lyndonkl/claude.

원본 보기