D3 Viz
Op maat gemaakte interactieve d3.js grafieken, kaarten en netwerkdiagrammen.
Getest · Werkt
Wat het doet
Leidraad en referentiepatronen voor het bouwen van aangepaste SVG visualisaties met d3.js — schalen, assen, overgangen, brushing, force layouts en geografische projecties. Activeert wanneer u fijne controle nodig heeft buiten een standaard charting library, in React, Vue, Svelte of vanilla JS.
Testrapport
Taak: gegroepeerd staafdiagram (omzet per kwartaal × 3 regio's), beide versies daadwerkelijk uitgevoerd in node 24 met d3 7.9.0 + jsdom, resultaat gemeten door finale SVG. Baseline versie (zonder skill) berekende staafbreedte handmatig als i*barWidth — 12 rects, 0 fouten, maar de opening tussen staven binnen een groep was precies 0px, staven samengevoegd, palet was willekeurig (steelblue/orange/green). Skill versie gebruikt een geneste x1Scale met padding(0.05) van references/d3-patterns.md — zelfde 12 rects en 18 as-ticks, maar gemeten opening 2.59px en d3.schemeCategory10 palet. Een echte beperking gevonden: het patroon stelt strikt domein [0, max] in, en voor een negatieve waarde produceerde het een ongeldige SVG rect met height=-78.46 — de skill dekt geen negatieve staven. Alle 6 bestanden van references/ en assets/ zijn aanwezig en sample-data.json is geldig (6 datasets), maar SKILL.md noemt templates chart-template.js, terwijl ze op schijf .jsx zijn. Stage 0 schoon: hele SKILL.md (820 regels) en 3 referentiebestanden gelezen, geen exfiltratie, verborgen instructies of netwerkoproepen.
Getest op: 2026-07-16 · Claude Code 2.x (agent harness)
Installatie
git clone https://github.com/chrisvoncsefalvay/claude-d3js-skill.git && mkdir -p ~/.claude/skills && cp -r claude-d3js-skill ~/.claude/skills/d3-viz
Commando's en voorbeeldprompts
/d3-vizOp maat gemaakte interactieve d3.js grafieken, kaarten en netwerkdiagrammen.
Skills reageren op gewone verzoeken — geen commando's om te onthouden. Na installatie activeren prompts zoals deze de skill (in het Engels):
Build a grouped bar chart in d3 comparing quarterly revenue by regionI need a force-directed network diagram with brushing in vanilla JSAdd a geographic projection map with d3 scales and smooth transitions