D3 Viz
Bespoke interactive d3.js charts, maps and network diagrams
Test report
- Verdict
- Tested · Works
- Score
- Tested
- Jul 16, 2026
- Environment
- Claude Code 2.x (agent harness)
- Upstream re-checked
- Aug 10, 2026 · 2023442
Task: grouped bar chart (revenue by quarter × 3 regions), both versions actually executed in node 24 with d3 7.9.0 + jsdom, result measured by final SVG. Baseline version (without skill) calculated bar width manually as i*barWidth — 12 rects, 0 errors, but the gap between bars within a group was exactly 0px, bars merged, palette was random (steelblue/orange/green). Skill version uses a nested x1Scale with padding(0.05) from references/d3-patterns.md — same 12 rects and 18 axis ticks, but measured gap 2.59px and d3.schemeCategory10 palette. A real limitation found: the pattern strictly sets domain [0, max], and for a negative value, it produced an invalid SVG rect with height=-78.46 — the skill does not cover negative bars. All 6 files from references/ and assets/ are in place and sample-data.json is valid (6 datasets), but SKILL.md names templates chart-template.js, whereas on disk they are .jsx. Stage 0 clean: read entire SKILL.md (820 lines) and 3 reference files, no exfiltration, hidden instructions, or network calls.
Scored on four weighted criteria — install, triggering, output vs. baseline, docs. How scoring works
- Installs cleanly 5/5
- Triggers reliably 5/5
- Output vs. baseline 7/10
- Docs & honesty 4/5
What D3 Viz does
Guidance and reference patterns for building custom SVG visualisations with d3.js — scales, axes, transitions, brushing, force layouts and geographic projections. Triggers when you need fine-grained control beyond a standard charting library, in React, Vue, Svelte or vanilla JS.
How to install D3 Viz
git clone https://github.com/chrisvoncsefalvay/claude-d3js-skill.git && mkdir -p ~/.claude/skills && cp -r claude-d3js-skill ~/.claude/skills/d3-viz
Skills live in ~/.claude/skills/ (global) or .claude/skills/
(per-project). Restart Claude Code after installing.
Commands — how to trigger D3 Viz
-
/d3-vizBespoke interactive d3.js charts, maps and network diagrams
It also activates on plain-language prompts like these:
-
Build a grouped bar chart in d3 comparing quarterly revenue by region -
I need a force-directed network diagram with brushing in vanilla JS -
Add a geographic projection map with d3 scales and smooth transitions
Frequently asked questions
- Is the D3 Viz skill free?
- Yes. The skill itself is free from chrisvoncsefalvay/claude-d3js-skill. SkillProof publishes the install command and an independent test verdict at no cost.
- Does D3 Viz work with Claude Code?
- We tested it with Claude Code 2.x (agent harness) on Jul 16, 2026. Verdict: Tested · Works. Task: grouped bar chart (revenue by quarter × 3 regions), both versions actually executed in node 24 with d3 7.9.0 + jsdom, result measured by final SVG. Baseline version (without skill) calculated bar width manually as i*barWidth — 12 rects, 0 errors, but the gap between bars within a group was exactly 0px, bars merged, palette was random (steelblue/orange/green). Skill version uses a nested x1Scale with padding(0.05) from references/d3-patterns.md — same 12 rects and 18 axis ticks, but measured gap 2.59px and d3.schemeCategory10 palette. A real limitation found: the pattern strictly sets domain [0, max], and for a negative value, it produced an invalid SVG rect with height=-78.46 — the skill does not cover negative bars. All 6 files from references/ and assets/ are in place and sample-data.json is valid (6 datasets), but SKILL.md names templates chart-template.js, whereas on disk they are .jsx. Stage 0 clean: read entire SKILL.md (820 lines) and 3 reference files, no exfiltration, hidden instructions, or network calls.
- What is the D3 Viz SkillProof Score?
- 8.4/10 — installs cleanly 5/5, triggers reliably 5/5, output vs. baseline 7/10, docs & honesty 4/5.
- How do I install D3 Viz?
- Copy the install command from this page, run it in your terminal, and restart Claude Code. Skills live in ~/.claude/skills/ (global) or .claude/skills/ inside a project.
- Can I use D3 Viz with Cursor, Copilot, Gemini CLI, Codex or other AI tools?
- The SKILL.md format is native to Claude (Claude Code, Desktop, claude.ai). The instructions inside adapt to other assistants: Cursor rules, GitHub Copilot instructions, Windsurf rules, Custom GPTs, AGENTS.md for OpenAI Codex, and GEMINI.md for Google Gemini CLI — our conversion guides cover each, and the free converter on the tools page does the wrapping for you.