D3 Viz
Skräddarsydda interaktiva d3.js-diagram, kartor och nätverksdiagram.
Testad · Fungerar
Vad den gör
Vägledning och referensmönster för att bygga anpassade SVG-visualiseringar med d3.js — skalor, axlar, övergångar, borstning, kraftlayouter och geografiska projektioner. Utlöses när du behöver finkornig kontroll utöver ett standarddiagrambibliotek, i React, Vue, Svelte eller vanilla JS.
Testrapport
Uppgift: grupperat stapeldiagram (intäkter per kvartal × 3 regioner), båda versionerna exekverades faktiskt i node 24 med d3 7.9.0 + jsdom, resultat mättes med slutlig SVG. Baslinjeversionen (utan skill) beräknade stapelbredden manuellt som i*barWidth — 12 rektanglar, 0 fel, men gapet mellan staplar inom en grupp var exakt 0px, staplar slogs samman, paletten var slumpmässig (steelblue/orange/green). Skill-versionen använder en nästlad x1Scale med padding(0.05) från references/d3-patterns.md — samma 12 rektanglar och 18 axeltickar, men mätt gap 2.59px och d3.schemeCategory10-palett. En verklig begränsning hittades: mönstret sätter strikt domän [0, max], och för ett negativt värde producerade det en ogiltig SVG-rektangel med height=-78.46 — skillen täcker inte negativa staplar. Alla 6 filer från references/ och assets/ är på plats och sample-data.json är giltig (6 dataset), men SKILL.md namnger mallar chart-template.js, medan de på disk är .jsx. Steg 0 rent: läste hela SKILL.md (820 rader) och 3 referensfiler, ingen exfiltrering, dolda instruktioner eller nätverksanrop.
Testad: 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
Kommandon och exempelprompter
/d3-vizSkräddarsydda interaktiva d3.js-diagram, kartor och nätverksdiagram.
Skills triggas av vanliga förfrågningar — inga kommandon att memorera. Efter installationen aktiverar prompter som dessa skillen (på engelska):
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