D3.js Visualization

D3.js diagram-bygge mønstre: scales, data joins, tooltips, responsiv resize, tilgængelighed.

Af AutumnsGrove · AutumnsGrove/ClaudeSkills

Testet · Virker ★ 8.4/10

D3.js Visualization — D3.js diagram-bygge mønstre: scales, data joins, tooltips, responsiv resize, tilgængelighed.

Hvad det gør

Leverer D3.js workflow mønstre til at bygge interaktive, responsive diagrammer og dashboards - margin konventioner, scale/akse opsætning, tooltips, overgange, debounced resize, og en tilgængelighedscheckliste. Triggers ved anmodninger om brugerdefinerede D3 diagrammer, dashboards, netværksgrafer, eller geografiske/tidsbaserede visualiseringer; henviser korrekt til Chart.js/matplotlib for simple eller statiske diagramanmodninger.

Testrapport

Skill-vejledt diagram tilføjede en debounced 250ms resize-handler, viewBox-baseret responsiv skalering, og en tilgængeligheds/farveblind-palette checkliste - detaljer som et fritstående D3-svar sprang over; D3-grundlæggende er allerede solide i baselinen, så forskellen er reel, men ikke nat-og-dag.

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

Installation

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-bygge mønstre: scales, data joins, tooltips, responsiv resize, tilgængelighed.

Skills udløses af almindelige forespørgsler — ingen kommandoer at huske. Efter installationen 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

Læs hele rapporten →