claude-d3js-skill
Crea visualizaciones de datos interactivas con D3.js
Crea visualizaciones de datos personalizadas y de calidad de publicación sin la complejidad. Esta skill proporciona orientación experta de D3.js con plantillas listas para usar para gráficos, diagramas y gráficos interactivos que funcionan con cualquier framework de JavaScript.
Télécharger le ZIP du skill
Importer dans Claude
Allez dans Paramètres → Capacités → Skills → Importer un skill
Activez et commencez à utiliser
Tester
Utilisation de "claude-d3js-skill". Crea un gráfico de líneas mostrando tendencias de temperatura mensual
Résultat attendu:
Un componente React D3.js completo con gráfico de líneas SVG, incluyendo eje x (meses), eje y (temperatura), interpolación de curva suave, área de relleno degradado bajo la línea, y tooltip que muestra valores exactos al pasar el mouse.
Utilisation de "claude-d3js-skill". Construye un gráfico circular para comparación de participación de mercado
Résultat attendu:
Un gráfico circular D3.js interactivo con transiciones de entrada animadas, porciones separadas al pasar el mouse, etiquetas de porcentaje, leyenda externa con codificación de color, y animación de clic para explotar la porción seleccionada.
Audit de sécurité
SûrAll 392 static analyzer findings were evaluated and dismissed as false positives. The pattern detections for 'external_commands', 'weak cryptographic algorithm', 'C2 keywords', 'network', and 'filesystem' operations were triggered by markdown documentation code blocks, D3.js API method names (schemeCategory10, nodes, desc), hex color codes in colour scheme documentation, and standard CDN import examples. This is a legitimate D3.js data visualization skill containing only documentation and code templates with no executable security risks.
Score de qualité
Ce que vous pouvez construire
Desarrollador de Dashboard de Negocios
Crea dashboards ejecutivos con gráficos KPI, visualizaciones de tendencias y filtros interactivos para plataformas de análisis de negocios.
Periodista de Datos
Construye narrativas interactivas y atractivas con gráficos y mapas personalizados que ayudan a los lectores a explorar historias basadas en datos.
Analista de Investigación
Genera visualizaciones científicas de calidad de publicación con control preciso sobre escalas, ejes y representaciones estadísticas.
Essayez ces prompts
Crea un gráfico de barras responsive usando D3.js que muestre datos de ingresos trimestrales. Incluye etiquetas de ejes apropiadas, tooltips al pasar el mouse y usa una paleta accesible para daltónicos. Proporciona el código completo del componente React.
Construye un diagrama de dispersión interactivo con D3.js donde cada punto representa un producto. Agrega funcionalidad de zoom y paneo, resaltado de puntos individuales al hacer clic, y una leyenda que se actualiza dinámicamente cuando cambian los filtros de datos.
Crea un diagrama de red de fuerza dirigida mostrando relaciones entre entidades. Implementa arrastre de nodos, detección de colisiones, estilo de enlaces personalizado basado en el tipo de relación, y transiciones animadas cuando se agregan o eliminan nodos.
Construye un mapa coropleta geográfico usando proyecciones geo de D3.js. Muestra datos regionales con codificación de color, agrega transiciones de zoom entre niveles de país y estado, y muestra tooltips con estadísticas detalladas al pasar el mouse.
Bonnes pratiques
- Siempre limpia el contenido SVG anterior con selectAll('*').remove() antes de volver a renderizar para prevenir elementos duplicados
- Usa la convención de margen para espaciado apropiado de ejes y acomodar el desbordamiento de etiquetas en las dimensiones del gráfico
- Implementa tamaño responsive con ResizeObserver o listeners de redimensionamiento de ventana para diseños adaptativos
Éviter
- No codifique dimensiones - usa siempre contenedores responsive que se adapten al tamaño del elemento padre
- Evita crear escalas dentro de bucles o transiciones - definelas una vez y reutilízalas para rendimiento
- Nunca uses D3 para gráficos estáticos simples - prefiere CSS o bibliotecas ligeras para visualizaciones básicas