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、バニラ JavaScript、その他の環境を問わず、標準のチャート ライブラリを超えたオーダーメイドの視覚化に使用できます。 ソース: jackspace/claudeskillz。

原文を見る