D3.js Visualization
Patrones de construcción de gráficos D3.js: escalas, uniones de datos, tooltips, redimensionamiento responsivo, accesibilidad.
Probado · Funciona
Qué hace
Proporciona patrones de flujo de trabajo de D3.js para construir gráficos y paneles interactivos y responsivos - convenciones de margen, configuración de escala/ejes, tooltips, transiciones, redimensionamiento con debounce y una lista de verificación de accesibilidad. Se activa en solicitudes de gráficos D3 personalizados, paneles, gráficos de red o visualizaciones geográficas/de series de tiempo; delega correctamente en Chart.js/matplotlib para solicitudes de gráficos simples o estáticos.
Informe de la prueba
El gráfico guiado por la habilidad añadió un manejador de redimensionamiento con debounce de 250ms, escalado responsivo basado en viewBox y una lista de verificación de accesibilidad/paleta para daltónicos - detalles que una respuesta D3 a mano alzada omitió; los fundamentos de D3 ya son sólidos en la línea base, por lo que la brecha es real pero no abismal.
Probado el: 2026-07-14 · Claude Code 2.x (agent harness)
Instalación
git clone https://github.com/AutumnsGrove/ClaudeSkills cd ClaudeSkills mkdir -p ~/.claude/skills cp -r d3js-visualization ~/.claude/skills/d3js-visualization
Comandos y prompts de ejemplo
/d3js-visualizationPatrones de construcción de gráficos D3.js: escalas, uniones de datos, tooltips, redimensionamiento responsivo, accesibilidad.
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 responsive D3 bar chart with hover tooltipsAdd window-resize handling to my D3 line chartMake this D3 dashboard accessible for colorblind users