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
- Clarify purpose: compare / rank / part-to-whole / flow / hierarchy / network / geo / schedule.
- Choose the simplest representation that answers the question (avoid novelty charts).
- Define a chart view model (VM) at the Application boundary; UI receives it as Signals.
- Pick render tech:
- SVG for readability + a11y (small/medium) - Canvas/hybrid for density/perf (large)
- Add interaction only if it reduces cognitive load (zoom/pan/hover/select/filter).
- 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-scaletime + 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-brushd3-hierarchy,d3-force,d3-sankey,d3-geo,d3-contour
References
.github/instructions/70-d3-data-visualization-copilot-instructions.md