D3 Viz
Skreddersydde interaktive d3.js-diagrammer, kart og nettverksdiagrammer
Bestått
Hva den gjør
Veiledning og referansemønstre for å bygge tilpassede SVG-visualiseringer med d3.js — skalaer, akser, overganger, børsting, kraftoppsett og geografiske projeksjoner. Utløses når du trenger finkornet kontroll utover et standard diagrambibliotek, i React, Vue, Svelte eller vanilla JS.
Testrapport
Oppgave: gruppert søylediagram (inntekter per kvartal × 3 regioner), begge versjonene faktisk utført i node 24 med d3 7.9.0 + jsdom, resultat målt av endelig SVG. Grunnlinjeversjonen (uten ferdighet) beregnet søylebredde manuelt som i*barWidth — 12 rektangler, 0 feil, men gapet mellom søylene innenfor en gruppe var nøyaktig 0px, søylene smeltet sammen, paletten var tilfeldig (steelblue/orange/green). Ferdighetsversjonen bruker en nestet x1Scale med padding(0.05) fra references/d3-patterns.md — samme 12 rektangler og 18 aksetikker, men målt gap 2.59px og d3.schemeCategory10-palett. En reell begrensning funnet: mønsteret setter strengt domenet [0, max], og for en negativ verdi produserte det et ugyldig SVG-rektangel med høyde=-78.46 — ferdigheten dekker ikke negative søyler. Alle 6 filer fra references/ og assets/ er på plass og sample-data.json er gyldig (6 datasett), men SKILL.md navngir maler chart-template.js, mens de på disk er .jsx. Trinn 0 rent: leste hele SKILL.md (820 linjer) og 3 referansefiler, ingen eksfiltrering, skjulte instruksjoner eller nettverkskall.
Testet på: 2026-07-16 · Claude Code 2.x (agent harness)
Installer
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-vizSkreddersydde interaktive d3.js-diagrammer, kart og nettverksdiagrammer
Skills utløses av vanlige forespørsler — ingen kommandoer å huske. Etter installasjonen 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