d3-viz

SKILL.md

This skill provides guidance for creating sophisticated, interactive data visualisations using d3.js. D3.js (Data-Driven Documents) excels at binding data to DOM elements and applying data-driven transformations to create custom, publication-quality visualisations with precise control over every visual element. The techniques work across any JavaScript environment, including vanilla JavaScript, React, Vue, Svelte,...

All modules (scales, axes, shapes, transitions, etc.) are accessible through the d3 namespace.

Pattern A: Direct DOM manipulation (recommended for most cases) Use d3 to select DOM elements and manipulate them imperatively. This works in any JavaScript environment:

使用 d3.js 创建交互式数据可视化。在创建自定义图表、图形、网络图、地理可视化或任何需要对视觉元素、过渡或交互进行细粒度控制的复杂的基于 SVG 的数据可视化时，应使用此技能。使用它来实现标准图表库之外的定制可视化，无论是在 React、Vue、Svelte、vanilla JavaScript 还是任何其他环境中。 来源：jackspace/claudeskillz。

查看原文