d3js-1-data-binding
Acerca de
Esta habilidad proporciona los fundamentos del enlace de datos de D3.js para crear visualizaciones basadas en datos. Cubre la vinculación de conjuntos de datos a elementos DOM utilizando los patrones enter/update/exit, la creación de escalas y ejes para posicionamiento, y la implementación de transiciones suaves. Úsala cuando necesites generar o actualizar dinámicamente elementos SVG basados en datos cambiantes en gráficos y diagramas.
Instalación rápida
Claude Code
Recomendadonpx skills add vamseeachanta/workspace-hub -a claude-code/plugin add https://github.com/vamseeachanta/workspace-hubgit clone https://github.com/vamseeachanta/workspace-hub.git ~/.claude/skills/d3js-1-data-bindingCopia y pega este comando en Claude Code para instalar esta habilidad
Repositorio GitHub
Habilidades relacionadas
d3js
OtroEsta habilidad permite a los desarrolladores crear visualizaciones de datos interactivas y completamente personalizadas utilizando D3.js, ofreciendo control total sobre los elementos SVG y el enlace de datos. Es ideal para construir gráficos únicos y complejos con transiciones e interacciones sofisticadas que las bibliotecas estándar no pueden lograr. Úsala cuando necesites visualizaciones personalizadas y basadas en datos, en lugar de gráficos simples con estilos predefinidos.
chartjs-1-use-responsive-containers
OtroEsta habilidad proporciona las mejores prácticas de Chart.js para contenedores de gráficos responsivos y una gestión adecuada del ciclo de vida. Muestra cómo envolver gráficos en divs responsivos con control de proporción adecuado y demuestra la destrucción de gráficos antes de su recreación para prevenir fugas de memoria. Utilice esto al implementar visualizaciones dinámicas o redimensionables de Chart.js en aplicaciones web.
plotly-with-pandas
OtroEsta habilidad proporciona integración de Plotly con Pandas para una visualización de datos optimizada desde DataFrames. Permite graficar directamente desde datos CSV e incluye compatibilidad con NumPy para visualizaciones matemáticas. Úsala cuando trabajes con datos tabulares en entornos Jupyter donde se requieran gráficos interactivos.
plotly-vertical-legends-avoid-toolbar-clash
OtroEsta habilidad proporciona configuraciones de diseño de Plotly para posicionar leyendas verticalmente en el lado derecho, evitando superposiciones con la barra de herramientas horizontal. Incluye ajustes específicos de márgenes y un estilo compacto para garantizar que la leyenda disponga de espacio adecuado. La habilidad también recomienda una estrategia de ordenamiento de trazas para gráficos con múltiples conjuntos de datos, a fin de agrupar las entradas de la leyenda de manera lógica.
