D3 Viz
Grafici, mappe e diagrammi di rete interattivi d3.js su misura
Promosso
Cosa fa
Guida e pattern di riferimento per la costruzione di visualizzazioni SVG personalizzate con d3.js — scale, assi, transizioni, brushing, layout a forza e proiezioni geografiche. Si attiva quando è necessario un controllo granulare oltre una libreria di grafici standard, in React, Vue, Svelte o JS vanilla.
Rapporto di test
Task: grafico a barre raggruppate (ricavi per trimestre × 3 regioni), entrambe le versioni effettivamente eseguite in node 24 con d3 7.9.0 + jsdom, risultato misurato tramite SVG finale. Versione baseline (senza skill) ha calcolato la larghezza della barra manualmente come i*barWidth — 12 rect, 0 errori, ma lo spazio tra le barre all'interno di un gruppo era esattamente 0px, le barre si sono fuse, la palette era casuale (steelblue/orange/green). La versione skill utilizza una x1Scale annidata con padding(0.05) da references/d3-patterns.md — stessi 12 rect e 18 tick dell'asse, ma spazio misurato 2.59px e palette d3.schemeCategory10. Trovata una limitazione reale: il pattern imposta strettamente il dominio [0, max], e per un valore negativo, ha prodotto un rect SVG non valido con height=-78.46 — la skill non copre le barre negative. Tutti i 6 file da references/ e assets/ sono a posto e sample-data.json è valido (6 dataset), ma SKILL.md nomina i template chart-template.js, mentre su disco sono .jsx. Fase 0 pulita: letto l'intero SKILL.md (820 righe) e 3 file di riferimento, nessuna esfiltrazione, istruzioni nascoste o chiamate di rete.
Testato il: 2026-07-16 · Claude Code 2.x (agent harness)
Installazione
git clone https://github.com/chrisvoncsefalvay/claude-d3js-skill.git && mkdir -p ~/.claude/skills && cp -r claude-d3js-skill ~/.claude/skills/d3-viz
Comandi e prompt di esempio
/d3-vizGrafici, mappe e diagrammi di rete interattivi d3.js su misura
Gli skill si attivano con richieste in linguaggio naturale, senza comandi da ricordare. Dopo l'installazione, prompt come questi lo attivano (in inglese):
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