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。

原文を見る