D3 Viz
Graphiques, cartes et diagrammes de réseau interactifs d3.js sur mesure
Testé · Fonctionne
Ce que fait
Conseils et modèles de référence pour la construction de visualisations SVG personnalisées avec d3.js — échelles, axes, transitions, brossage, layouts de force et projections géographiques. Se déclenche lorsque vous avez besoin d'un contrôle précis au-delà d'une bibliothèque de graphiques standard, en React, Vue, Svelte ou JS vanilla.
Rapport de test
Tâche : graphique à barres groupées (revenus par trimestre × 3 régions), les deux versions exécutées dans node 24 avec d3 7.9.0 + jsdom, résultat mesuré par le SVG final. Version de base (sans compétence) a calculé la largeur des barres manuellement comme i*barWidth — 12 rectangles, 0 erreur, mais l'espace entre les barres au sein d'un groupe était exactement de 0px, les barres fusionnées, la palette était aléatoire (steelblue/orange/green). La version de la compétence utilise une x1Scale imbriquée avec padding(0.05) de references/d3-patterns.md — mêmes 12 rectangles et 18 graduations d'axe, mais un espace mesuré de 2.59px et une palette d3.schemeCategory10. Une limitation réelle trouvée : le pattern définit strictement le domaine [0, max], et pour une valeur négative, il a produit un rect SVG invalide avec height=-78.46 — la compétence ne couvre pas les barres négatives. Les 6 fichiers de references/ et assets/ sont en place et sample-data.json est valide (6 ensembles de données), mais SKILL.md nomme les modèles chart-template.js, alors qu'ils sont .jsx sur le disque. Stage 0 propre : lu l'intégralité de SKILL.md (820 lignes) et 3 fichiers de référence, pas d'exfiltration, d'instructions cachées ou d'appels réseau.
Testé le: 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
Commandes et exemples de prompts
/d3-vizGraphiques, cartes et diagrammes de réseau interactifs d3.js sur mesure
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 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