d3-visualization

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()

網絡圖 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

Common D3 building blocks (preferred)

References

Source Transparency