D3 Viz

Graphiques, cartes et diagrammes de réseau interactifs d3.js sur mesure

par chrisvoncsefalvay · chrisvoncsefalvay/claude-d3js-skill

Testé · Fonctionne ★ 8.4/10

D3 Viz — Graphiques, cartes et diagrammes de réseau interactifs d3.js sur mesure

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 region
  • I need a force-directed network diagram with brushing in vanilla JS
  • Add a geographic projection map with d3 scales and smooth transitions