D3 Viz

Gráficos, mapas y diagramas de red interactivos d3.js a medida.

Por chrisvoncsefalvay · chrisvoncsefalvay/claude-d3js-skill

Probado · Funciona ★ 8.4/10

D3 Viz — Gráficos, mapas y diagramas de red interactivos d3.js a medida.

Qué hace

Orientación y patrones de referencia para construir visualizaciones SVG personalizadas con d3.js — escalas, ejes, transiciones, pincelado, diseños de fuerza y proyecciones geográficas. Se activa cuando se necesita un control granular más allá de una biblioteca de gráficos estándar, en React, Vue, Svelte o JS vanilla.

Informe de la prueba

Tarea: gráfico de barras agrupadas (ingresos por trimestre × 3 regiones), ambas versiones ejecutadas en node 24 con d3 7.9.0 + jsdom, resultado medido por SVG final. Versión de línea base (sin skill) calculó el ancho de barra manualmente como i*barWidth — 12 rects, 0 errores, pero la brecha entre barras dentro de un grupo era exactamente 0px, las barras se fusionaron, la paleta era aleatoria (steelblue/orange/green). La versión de skill utiliza una x1Scale anidada con padding(0.05) de references/d3-patterns.md — los mismos 12 rects y 18 ticks de eje, pero la brecha medida fue de 2.59px y la paleta d3.schemeCategory10. Se encontró una limitación real: el patrón establece estrictamente el dominio [0, max], y para un valor negativo, produjo un SVG rect inválido con height=-78.46 — la skill no cubre barras negativas. Los 6 archivos de references/ y assets/ están en su lugar y sample-data.json es válido (6 conjuntos de datos), pero SKILL.md nombra las plantillas chart-template.js, mientras que en disco son .jsx. Etapa 0 limpia: se leyó todo SKILL.md (820 líneas) y 3 archivos de referencia, sin exfiltración, instrucciones ocultas ni llamadas de red.

Probado el: 2026-07-16 · Claude Code 2.x (agent harness)

Instalación

git clone https://github.com/chrisvoncsefalvay/claude-d3js-skill.git && mkdir -p ~/.claude/skills && cp -r claude-d3js-skill ~/.claude/skills/d3-viz

Comandos y prompts de ejemplo

  • /d3-vizGráficos, mapas y diagramas de red interactivos d3.js a medida.

Los skills se activan con peticiones en lenguaje natural, sin comandos que memorizar. Tras instalarlo, prompts como estos lo activan (en inglés):

  • 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