D3.js Visualization

D3.js diagram-byggemønstre: skalaer, data-joins, verktøytips, responsiv endring, tilgjengelighet.

av AutumnsGrove · AutumnsGrove/ClaudeSkills

Bestått ★ 8.4/10

D3.js Visualization — D3.js diagram-byggemønstre: skalaer, data-joins, verktøytips, responsiv endring, tilgjengelighet.

Hva den gjør

Tilbyr D3.js arbeidsflytmønstre for å bygge interaktive, responsive diagrammer og dashbord - margin-konvensjoner, skala/akse-oppsett, verktøytips, overganger, debounced resize, og en tilgjengelighets-sjekkliste. Utløses ved forespørsler om egendefinerte D3-diagrammer, dashbord, nettverksgrafer, eller geografiske/tidsseriedata-visualiseringer; henviser korrekt til Chart.js/matplotlib for enkle eller statiske diagramforespørsler.

Testrapport

Ferdighets-veiledet diagram la til en debounced 250ms resize-handler, viewBox-basert responsiv skalering, og en tilgjengelighets/fargeblind-palett-sjekkliste - detaljer en frittstående D3-svaret hoppet over; D3-grunnleggende er allerede solide i baselinen, så gapet er reelt, men ikke natt og dag.

Testet på: 2026-07-14 · Claude Code 2.x (agent harness)

Installer

git clone https://github.com/AutumnsGrove/ClaudeSkills
cd ClaudeSkills
mkdir -p ~/.claude/skills
cp -r d3js-visualization ~/.claude/skills/d3js-visualization

Kommandoer og eksempelprompter

/d3js-visualizationD3.js diagram-byggemønstre: skalaer, data-joins, verktøytips, responsiv endring, tilgjengelighet.

Skills utløses av vanlige forespørsler — ingen kommandoer å huske. Etter installasjonen aktiverer prompter som disse skillen (på engelsk):

Build a responsive D3 bar chart with hover tooltips
Add window-resize handling to my D3 line chart
Make this D3 dashboard accessible for colorblind users

Full rapport →