D3.js Visualization

Pattern di costruzione di grafici D3.js: scales, data joins, tooltips, responsive resize, accessibility.

di AutumnsGrove · AutumnsGrove/ClaudeSkills

Promosso ★ 8.4/10

D3.js Visualization — Pattern di costruzione di grafici D3.js: scales, data joins, tooltips, responsive resize, accessibility.

Cosa fa

Fornisce pattern di workflow D3.js per la costruzione di grafici e dashboard interattivi e responsivi - convenzioni di margine, impostazione di scale/assi, tooltips, transizioni, resize debounced e una checklist di accessibilità. Si attiva su richieste di grafici D3 personalizzati, dashboard, grafici di rete o visualizzazioni geografiche/serie temporali; delega correttamente a Chart.js/matplotlib per richieste di grafici semplici o statici.

Rapporto di test

Il grafico guidato dalla skill ha aggiunto un handler di resize debounced di 250ms, scaling responsivo basato su viewBox e una checklist di accessibilità/palette per daltonici - dettagli che una risposta D3 a mano libera ha saltato; le basi di D3 sono già solide nella baseline, quindi il divario è reale ma non enorme.

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

Installazione

git clone https://github.com/AutumnsGrove/ClaudeSkills
cd ClaudeSkills
mkdir -p ~/.claude/skills
cp -r d3js-visualization ~/.claude/skills/d3js-visualization

Comandi e prompt di esempio

/d3js-visualizationPattern di costruzione di grafici D3.js: scales, data joins, tooltips, responsive resize, accessibility.

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 responsive D3 bar chart with hover tooltips
Add window-resize handling to my D3 line chart
Make this D3 dashboard accessible for colorblind users

Rapporto completo →