Learn-skills.dev d3-visualization

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

install

source · Clone the upstream repo

git clone https://github.com/NeverSight/learn-skills.dev

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/NeverSight/learn-skills.dev "$T" && mkdir -p ~/.claude/skills && cp -r "$T/data/skills-md/7spade/black-tortoise/d3-visualization" ~/.claude/skills/neversight-learn-skills-dev-d3-visualization && rm -rf "$T"

manifest: data/skills-md/7spade/black-tortoise/d3-visualization/SKILL.md

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-brush

d3-hierarchy

d3-force

d3-sankey

d3-geo

d3-contour

References

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