D3 Viz
Maßgeschneiderte interaktive d3.js-Diagramme, Karten und Netzwerkdiagramme.
Getestet · Funktioniert
Was es kann
Anleitung und Referenzmuster für die Erstellung benutzerdefinierter SVG-Visualisierungen mit d3.js — Skalen, Achsen, Übergänge, Brushing, Force-Layouts und geografische Projektionen. Wird ausgelöst, wenn Sie eine feingranulare Kontrolle über eine Standard-Charting-Bibliothek hinaus benötigen, in React, Vue, Svelte oder Vanilla JS.
Testbericht
Aufgabe: gruppiertes Balkendiagramm (Umsatz pro Quartal × 3 Regionen), beide Versionen tatsächlich in node 24 mit d3 7.9.0 + jsdom ausgeführt, Ergebnis gemessen am finalen SVG. Baseline-Version (ohne Skill) berechnete die Balkenbreite manuell als i*barWidth — 12 Rechtecke, 0 Fehler, aber der Abstand zwischen den Balken innerhalb einer Gruppe betrug genau 0px, Balken verschmolzen, Palette war zufällig (steelblue/orange/green). Skill-Version verwendet eine verschachtelte x1Scale mit padding(0.05) aus references/d3-patterns.md — dieselben 12 Rechtecke und 18 Achsen-Ticks, aber gemessener Abstand 2.59px und d3.schemeCategory10-Palette. Eine reale Einschränkung gefunden: das Muster setzt den Domänenbereich strikt auf [0, max], und für einen negativen Wert produzierte es ein ungültiges SVG-Rechteck mit height=-78.46 — der Skill deckt negative Balken nicht ab. Alle 6 Dateien aus references/ und assets/ sind vorhanden und sample-data.json ist gültig (6 Datensätze), aber SKILL.md benennt Vorlagen chart-template.js, während sie auf der Festplatte .jsx sind. Stufe 0 sauber: gesamte SKILL.md (820 Zeilen) und 3 Referenzdateien gelesen, keine Exfiltration, versteckte Anweisungen oder Netzwerkaufrufe.
Getestet am: 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
Befehle & Beispiel-Prompts
/d3-vizMaßgeschneiderte interaktive d3.js-Diagramme, Karten und Netzwerkdiagramme.
Skills reagieren auf normale Anfragen — keine Slash-Befehle nötig. Nach der Installation aktivieren Prompts wie diese den Skill (auf Englisch):
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