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。

查看原文