AgentSkillsCN

d3-visualization

针对 Angular 采用信号优先架构、提供无障碍支持并优化性能的 D3 生态系统指南，适用于交互式图表与示意图的设计与实现。当您需要创建数据可视化、交互式图表、示意图，或基于自定义 SVG 的图形时，可使用此技能。

SKILL.md
--- frontmatter
name: d3-visualization
description: D3 ecosystem guidance for designing and implementing interactive charts and diagrams in Angular with signals-first architecture, accessibility support, and performance optimization. Use when creating data visualizations, interactive charts, diagrams, or custom SVG-based graphics.

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