claude-d3js-skill について
カスタムでインタラクティブな出版品質の可視化に D3.js を使うためのスキルです。複雑なレイアウトや操作に適し、3D 可視化には Three.js を検討するよう案内します。
主な機能
- 01独自の視覚表現とレイアウト
- 02パン、ズーム、ブラシ操作
- 03ネットワーク図と階層図
- 04カスタム地図投影
- 05アニメーションと細かなスタイル調整
活用シーン
- 01力学ベースのネットワーク可視化
- 02カスタム投影を使った地理チャート
- 03出版向けの独自チャート制作
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/ / github.com/ sickn33/ agentic-awesome-skills --skill claude-d3js-skillインストール後、Claude Code で/claude-d3js-skillを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
assets/chart-template.jsxinteractive-template.jsxsample-data.jsonreferences/colour-schemes.mdd3-patterns.mddetailed-guide.mdscale-reference.md詳細
D3.js による可視化
詳細ガイド
このスキルを実行する前に、詳細ガイドをお読みください。完全な手順と参考資料が記載されています。その安全性、前提条件、検証要件は必須事項として扱ってください。焦点を絞った作業では関連するセクションを読み込み、エンドツーエンドの作業ではガイドを完全に読んでください。
d3.js をいつ使用するか
d3.js を使用する場合:
- 独自の視覚エンコーディングやレイアウトが必要なカスタム可視化
- 複雑なパン、ズーム、ブラシ操作を伴うインタラクティブな探索
- ネットワーク/グラフの可視化(力学指向レイアウト、ツリー図、階層、コード図)
- カスタム投影を用いた地理的可視化
- スムーズで振り付けされたトランジションが必要な可視化
- きめ細かなスタイル制御が可能な出版品質のグラフィックス
- 標準ライブラリでは利用できない新しい種類のチャート
代替手段を検討する場合:
- 3D 可視化 - 代わりに Three.js を使用してください
制限事項
- このスキルは、タスクが上記の範囲に明確に一致する場合にのみ使用してください。
- 出力を、環境固有の検証、テスト、専門家によるレビューの代替として扱わないでください。
- 必要な入力、権限、安全境界、成功基準が欠けている場合は、停止して明確化を求めてください。
コメント
Markdown 対応