D3 Viz
Niestandardowe interaktywne wykresy, mapy i diagramy sieciowe d3.js.
Testowano · Działa
Co robi ten skill
Wskazówki i wzorce referencyjne do tworzenia niestandardowych wizualizacji SVG za pomocą d3.js — skale, osie, przejścia, szczotkowanie, układy siłowe i projekcje geograficzne. Uruchamia się, gdy potrzebujesz precyzyjnej kontroli wykraczającej poza standardową bibliotekę wykresów, w React, Vue, Svelte lub czystym JS.
Raport z testu
Zadanie: zgrupowany wykres słupkowy (przychody kwartalne × 3 regiony), obie wersje faktycznie wykonane w node 24 z d3 7.9.0 + jsdom, wynik mierzony przez końcowy SVG. Wersja bazowa (bez umiejętności) obliczyła szerokość słupka ręcznie jako i*barWidth — 12 prostokątów, 0 błędów, ale odstęp między słupkami w grupie wynosił dokładnie 0px, słupki się połączyły, paleta była losowa (steelblue/orange/green). Wersja umiejętności używa zagnieżdżonej x1Scale z padding(0.05) z references/d3-patterns.md — te same 12 prostokątów i 18 znaczników osi, ale zmierzony odstęp 2.59px i paleta d3.schemeCategory10. Znaleziono prawdziwe ograniczenie: wzorzec ściśle ustawia domenę [0, max], a dla wartości ujemnej wygenerował nieprawidłowy prostokąt SVG o wysokości=-78.46 — umiejętność nie obejmuje słupków ujemnych. Wszystkie 6 plików z references/ i assets/ jest na miejscu, a sample-data.json jest prawidłowy (6 zestawów danych), ale SKILL.md nazywa szablony chart-template.js, podczas gdy na dysku są to .jsx. Etap 0 czysty: przeczytano cały SKILL.md (820 linii) i 3 pliki referencyjne, brak eksfiltracji, ukrytych instrukcji lub wywołań sieciowych.
Testowano: 2026-07-16 · Claude Code 2.x (agent harness)
Instalacja
git clone https://github.com/chrisvoncsefalvay/claude-d3js-skill.git && mkdir -p ~/.claude/skills && cp -r claude-d3js-skill ~/.claude/skills/d3-viz
Komendy i przykładowe prompty
/d3-vizNiestandardowe interaktywne wykresy, mapy i diagramy sieciowe d3.js.
Skille uruchamiają się na zwykłe polecenia — bez komend do zapamiętania. Po instalacji aktywują go prompty takie jak te (po angielsku):
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