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

當使用 D3.js 創建自定義的交互式數據可視化時使用 - 從頭開始​​構建條形圖/折線圖/散點圖、創建網絡圖或地理地圖、將更改的數據綁定到可視元素、添加縮放/平移/畫筆交互、動畫圖表轉換，或者當圖表庫（Highcharts、Chart.js）不支持您的特定可視化設計並且您需要對數據驅動的 DOM 操作、比例、形狀和佈局進行低級控制時使用。 來源：lyndonkl/claude。

查看原文