skill-037

D3.js Visualization Skill

Use this skill to turn structured data (CSV/TSV/JSON) into clean, reproducible visualizations using D3.js. The goal is to produce stable outputs that can be verified by diffing files or hashing.

When to use

Activate this skill when the user asks for any of the following:

• “Make a chart/plot/graph/visualization”
• bar/line/scatter/area/histogram/box/violin/heatmap
• timelines, small multiples, faceting
• axis ticks, scales, legends, tooltips
• data-driven SVG output for a report or web page
• converting data to a static SVG or HTML visualization

If the user only needs a quick table or summary, don’t use D3—use a spreadsheet or plain markdown instead.

---

Inputs you should expect

• One or more local data files: *.csv, *.tsv, *.json
• A chart intent:
  • chart type (or you infer the best type)
  • x/y fields and aggregation rules
  • sorting/filtering rules
  • dimensions (width/height) and margins
  • color rules (categorical / sequential)
  • any labeling requirements (title, axis labels, units)
• Output constraints:
  • “static only”, “no animation”, “must be deterministic”, “offline”, etc.

If details are missing, make reasonable defaults and document them in comments near the top of the output file.

---

Outputs you should produce

Prefer producing all of the following when feasible:

1. dist/chart.html — standalone HTML that renders the visualization
2. dist/chart.svg — exported SVG (stable and diff-friendly)
3. (Optional) dist/chart.png — if the task explicitly needs a raster image

Always keep outputs in a predictable folder (default: dist/), unless the task specifies paths.

---

Determinism rules (non-negotiable)

To keep results stable across runs and machines:

Data determinism

• Sort input rows deterministically before binding to marks (e.g., by x then by category).
• Use stable grouping order (explicit Array.from(grouped.keys()).sort()).
• Avoid locale-dependent formatting unless fixed (use d3.format, d3.timeFormat with explicit formats).