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-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-brushd3-hierarchy, d3-force, d3-sankey, d3-geo, d3-contour
References
.github/instructions/70-d3-data-visualization-copilot-instructions.md
