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 還是任何其他環境中。 來源：chrisvoncsefalvay/claude-d3js-skill。

查看原文