D3.js Visualization

D3.js Chart-Erstellungsmuster: scales, data joins, tooltips, responsive resize, accessibility.

von AutumnsGrove · AutumnsGrove/ClaudeSkills

Getestet · Funktioniert ★ 8.4/10

D3.js Visualization — D3.js Chart-Erstellungsmuster: scales, data joins, tooltips, responsive resize, accessibility.

Was es kann

Bietet D3.js Workflow-Muster für die Erstellung interaktiver, responsiver Diagramme und Dashboards – Margin-Konventionen, Skalen-/Achsen-Setup, Tooltips, Übergänge, debounced resize und eine Zugänglichkeits-Checkliste. Wird ausgelöst bei Anfragen für benutzerdefinierte D3-Diagramme, Dashboards, Netzwerkdiagramme oder geografische/Zeitreihen-Visualisierungen; verweist korrekt auf Chart.js/matplotlib für einfache oder statische Diagrammanfragen.

Testbericht

Skill-geführtes Diagramm fügte einen debounced 250ms resize handler, viewBox-basierte responsive Skalierung und eine Zugänglichkeits-/Farbenblind-Palette-Checkliste hinzu – Details, die eine freihändige D3-Antwort übersprang; D3-Grundlagen sind in der Basislinie bereits solide, daher ist die Lücke real, aber nicht gravierend.

Getestet am: 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

Befehle & Beispiel-Prompts

/d3js-visualizationD3.js Chart-Erstellungsmuster: scales, data joins, tooltips, responsive resize, accessibility.

Skills reagieren auf normale Anfragen — keine Slash-Befehle nötig. Nach der Installation aktivieren Prompts wie diese den Skill (auf Englisch):

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

Vollständiger Testbericht (Englisch) →