jpskill.com
🎨 デザイン コミュニティ

d3-visualization

AngularでインタラクティブなD3チャートを、アクセシビリティとパフォーマンスを考慮して設計・実装するSkill。

📜 元の英語説明(参考)

D3 ecosystem guidance for designing and implementing interactive charts/diagrams in Angular (signals-first, accessible, performant).

🇯🇵 日本人クリエイター向け解説

一言でいうと

AngularでインタラクティブなD3チャートを、アクセシビリティとパフォーマンスを考慮して設計・実装するSkill。

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⬇ このSkillをダウンロード(.skill) 元のソースを見る ↗

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-17
取得日時
2026-05-17
同梱ファイル
1

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

スキル: D3 可視化とダイアグラムデザイン

使用場面

  • Angular UI で D3 (SVG/Canvas) を使用してインタラクティブな可視化を実装する場合。
  • ダイアグラムタイプを選択し、それを D3 レイアウト/モジュールにマッピングする必要がある場合。

ワークフロー

  1. 目的を明確にする: 比較 / ランク付け / 全体に対する部分 / フロー / 階層 / ネットワーク / 地理 / スケジュール。
  2. 質問に答える最もシンプルな表現を選択する（目新しいチャートは避ける）。
  3. アプリケーション境界でチャートビューモデル (VM) を定義し、UI はそれを Signals として受け取ります。
  4. レンダリング技術を選択する:
    • SVG は可読性 + アクセシビリティのため（小/中規模）
    • Canvas/ハイブリッドは密度/パフォーマンスのため（大規模）
  5. 認知負荷を軽減する場合にのみインタラクションを追加する（ズーム/パン/ホバー/選択/フィルター）。
  6. アクセシビリティを組み込む: テキスト要約 + キーボードナビゲーション + 動作の軽減。

ダイアグラム → D3 マッピング (クイックガイド)

  • 森林圖 Forest Plot: scales/axes (d3-scale, d3-axis) + points/CI lines (d3-shape)
  • 徑向樹 Radial Tree: d3-hierarchy.tree()/cluster() + radial links (d3-shape)
  • 旭日圖 Sunburst: d3-hierarchy.partition()
  • 桑基圖 Sankey: d3-sankey
  • 環狀樹/圓形樹 Circular Tree:
    • Circle Packing: d3-hierarchy.pack()
    • Radial Dendrogram: d3-hierarchy.cluster() + radial links
  • 網絡圖 Network Graph: d3-force (force simulation)
  • 熱力圖 Heatmap: band scales + rect grid (Canvas for dense grids)
  • 樹狀圖 Tree Diagram: d3-hierarchy.tree()
  • 甘特圖 Gantt: time scale + band rows (compute schedule in Application)
  • 時間線 Timeline: d3-scale time + annotations (d3-shape)
  • 日曆圖 Calendar Heatmap: time bucketing + grid layout (Canvas if needed)
  • 里程碑圖 Milestone Chart: timeline + point/label layout
  • 時序圖 Sequence Diagram: ドキュメントには Mermaid を推奨。インタラクティブな編集が必要な場合にのみ D3 を使用
  • 關鍵路徑圖 Critical Path: アプリケーションで CPM を計算。ハイライトされた Gantt/ネットワークとしてレンダリング
  • 組織圖 Org Chart: d3-hierarchy.tree() with compact node layout
  • 心智圖 Mind Map: tree/radial tree with collapsible nodes
  • 因果圖 Fishbone (Ishikawa): custom layout (bones as angled branches) + labels
  • 等值線圖 Contour Map: d3-contour (grid → isolines/filled contours)
  • 分級著色 Choropleth: d3-geo + region fill scale
  • 點密度 Dot Density: d3-geo + point placement (within polygons or sampled points)

一般的な D3 構成要素 (推奨)

  • d3-selection, d3-scale, d3-axis, d3-shape, d3-zoom, d3-drag, d3-brush
  • d3-hierarchy, d3-force, d3-sankey, d3-geo, d3-contour

参照

  • .github/instructions/70-d3-data-visualization-copilot-instructions.md
📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

SKILL: D3 Visualization & Diagram Design

Use when

  • Implementing interactive visualizations using D3 (SVG/Canvas) in the Angular UI.
  • You need to choose a diagram type and map it to a D3 layout/module.

Workflow

  1. Clarify purpose: compare / rank / part-to-whole / flow / hierarchy / network / geo / schedule.
  2. Choose the simplest representation that answers the question (avoid novelty charts).
  3. Define a chart view model (VM) at the Application boundary; UI receives it as Signals.
  4. Pick render tech:
    • SVG for readability + a11y (small/medium)
    • Canvas/hybrid for density/perf (large)
  5. Add interaction only if it reduces cognitive load (zoom/pan/hover/select/filter).
  6. Build in a11y: text summary + keyboard navigation + reduced motion.

Diagram → D3 mapping (quick guide)

  • 森林圖 Forest Plot: scales/axes (d3-scale, d3-axis) + points/CI lines (d3-shape)
  • 徑向樹 Radial Tree: d3-hierarchy.tree()/cluster() + radial links (d3-shape)
  • 旭日圖 Sunburst: d3-hierarchy.partition()
  • 桑基圖 Sankey: d3-sankey
  • 環狀樹/圓形樹 Circular Tree:
    • Circle Packing: d3-hierarchy.pack()
    • Radial Dendrogram: d3-hierarchy.cluster() + radial links
  • 網絡圖 Network Graph: d3-force (force simulation)
  • 熱力圖 Heatmap: band scales + rect grid (Canvas for dense grids)
  • 樹狀圖 Tree Diagram: d3-hierarchy.tree()
  • 甘特圖 Gantt: time scale + band rows (compute schedule in Application)
  • 時間線 Timeline: d3-scale time + annotations (d3-shape)
  • 日曆圖 Calendar Heatmap: time bucketing + grid layout (Canvas if needed)
  • 里程碑圖 Milestone Chart: timeline + point/label layout
  • 時序圖 Sequence Diagram: prefer Mermaid for docs; D3 only if interactive editing is required
  • 關鍵路徑圖 Critical Path: compute CPM in Application; render as highlighted Gantt/network
  • 組織圖 Org Chart: d3-hierarchy.tree() with compact node layout
  • 心智圖 Mind Map: tree/radial tree with collapsible nodes
  • 因果圖 Fishbone (Ishikawa): custom layout (bones as angled branches) + labels
  • 等值線圖 Contour Map: d3-contour (grid → isolines/filled contours)
  • 分級著色 Choropleth: d3-geo + region fill scale
  • 點密度 Dot Density: d3-geo + point placement (within polygons or sampled points)

Common D3 building blocks (preferred)

  • d3-selection, d3-scale, d3-axis, d3-shape, d3-zoom, d3-drag, d3-brush
  • d3-hierarchy, d3-force, d3-sankey, d3-geo, d3-contour

References

  • .github/instructions/70-d3-data-visualization-copilot-instructions.md