D3 Viz
Specialfremstillede interaktive d3.js-diagrammer, kort og netværksdiagrammer
Testet · Virker
Hvad det gør
Vejledning og referencemønstre til opbygning af brugerdefinerede SVG-visualiseringer med d3.js — skalaer, akser, overgange, brushing, force layouts og geografiske projektioner. Udløses når du har brug for finkornet kontrol ud over et standarddiagrambibliotek, i React, Vue, Svelte eller vanilla JS.
Testrapport
Opgave: grupperet søjlediagram (omsætning pr. kvartal × 3 regioner), begge versioner faktisk udført i node 24 med d3 7.9.0 + jsdom, resultat målt ved endelig SVG. Baseline-version (uden skill) beregnede søjlebredde manuelt som i*barWidth — 12 rektangler, 0 fejl, men afstanden mellem søjler inden for en gruppe var præcis 0px, søjler flettet sammen, paletten var tilfældig (steelblue/orange/grøn). Skill-versionen bruger en indlejret x1Scale med padding(0.05) fra references/d3-patterns.md — samme 12 rektangler og 18 akseticks, men målt afstand 2.59px og d3.schemeCategory10-palet. En reel begrænsning fundet: mønsteret sætter strengt domæne [0, max], og for en negativ værdi producerede det et ugyldigt SVG-rektangel med højde=-78.46 — skillen dækker ikke negative søjler. Alle 6 filer fra references/ og assets/ er på plads, og sample-data.json er gyldig (6 datasæt), men SKILL.md navngiver skabeloner chart-template.js, hvorimod de på disken er .jsx. Stage 0 ren: læste hele SKILL.md (820 linjer) og 3 referencefiler, ingen eksfiltrering, skjulte instruktioner eller netværkskald.
Testet: 2026-07-16 · Claude Code 2.x (agent harness)
Installation
git clone https://github.com/chrisvoncsefalvay/claude-d3js-skill.git && mkdir -p ~/.claude/skills && cp -r claude-d3js-skill ~/.claude/skills/d3-viz
Kommandoer og eksempelprompter
/d3-vizSpecialfremstillede interaktive d3.js-diagrammer, kort og netværksdiagrammer
Skills udløses af almindelige forespørgsler — ingen kommandoer at huske. Efter installationen aktiverer prompter som disse skillen (på engelsk):
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