---
name: "d3-data-driven-svg-visuals"
description: "Bind tabular data to SVG DOM elements with D3 scales, projections, and force layouts."
metadata:
  author: "Mike Bostock"
  version: "1.0.0"
  runtime_compatibility:
    - "codex"
    - "claude-code"
    - "cursor"
    - "windsurf"
triggers:
  - "create d3 bar chart"
  - "use d3 linear scale"
  - "build force directed graph d3"
permissions:
  fs_read: true
  fs_write: "workspace"
  shell_exec: false
  net_access: false
---

# D3.js Data-Driven SVG Projections & Layouts

Powers custom data visualizations using D3.js: d3-scale, d3-selection, d3-shape, d3-geo geographic projections, d3-force network simulations, and smooth enter/update/exit transitions.

## When to Invoke
Invoke this skill whenever you need to:
- create d3 bar chart
- use d3 linear scale
- build force directed graph d3

## Execution SOP & Rules
1. Map domain values to pixel ranges with d3.scaleLinear(), d3.scaleTime(), or d3.scaleBand().
2. Draw clean axes using d3.axisBottom(scale) and call via selection.call(axis).
3. Generate path data using d3.line(), d3.area(), or d3.arc() generator functions.
4. Manage DOM updates efficiently using selection.join(enter, update, exit) syntax.

## Verification Checklist
- Run local linting, syntax validation, and type-checks before reporting completion.
- Ensure all created or modified files adhere to workspace boundaries and avoid uncommitted secrets.
- Verify tests or build commands exit cleanly with return code 0.