D3.js Visualization

Patterns de construction de graphiques D3.js : scales, data joins, tooltips, responsive resize, accessibility.

par AutumnsGrove · AutumnsGrove/ClaudeSkills

Testé · Fonctionne ★ 8.4/10

D3.js Visualization — Patterns de construction de graphiques D3.js : scales, data joins, tooltips, responsive resize, accessibility.

Ce que fait

Fournit des patterns de workflow D3.js pour la construction de graphiques et de tableaux de bord interactifs et responsives - conventions de marges, configuration d'échelles/axes, tooltips, transitions, redimensionnement avec debounce, et une checklist d'accessibilité. Se déclenche sur les demandes de graphiques D3 personnalisés, de tableaux de bord, de graphes de réseau ou de visualisations géographiques/séries temporelles ; délègue correctement à Chart.js/matplotlib pour les demandes de graphiques simples ou statiques.

Rapport de test

Le graphique guidé par la compétence a ajouté un gestionnaire de redimensionnement avec debounce de 250ms, une mise à l'échelle responsive basée sur viewBox, et une checklist d'accessibilité/palette pour daltoniens - des détails qu'une réponse D3 improvisée a omis ; les bases de D3 sont déjà solides dans la référence, donc l'écart est réel mais pas énorme.

Testé le: 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

Commandes et exemples de prompts

/d3js-visualizationPatterns de construction de graphiques D3.js : scales, data joins, tooltips, responsive resize, accessibility.

Les skills se déclenchent sur des demandes en langage courant — aucune commande à retenir. Après installation, des prompts comme ceux-ci l'activent (en anglais) :

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

Rapport complet →