Crea gráficos, redes y visualizaciones personalizadas con control preciso. Esta habilidad te ayuda a crear gráficos interactivos de calidad editorial usando D3.js para cualquier framework de JavaScript.
スキルZIPをダウンロード
Claudeでアップロード
設定 → 機能 → スキル → スキルをアップロードへ移動
オンにして利用開始
テストする
「d3-viz」を使用しています。 Crea un gráfico de barras mostrando datos de ventas: Producto A (150), Producto B (230), Producto C (180)
期待される結果:
Genera componente React con gráfico de barras D3.js incluyendo: configuración SVG, eje x con scaleBand, eje y con scaleLinear, axisBottom y axisLeft, barras estilizadas con relleno steelblue, etiquetas de ejes para productos y valores
「d3-viz」を使用しています。 Construye un diagrama de dispersión interactivo con tooltips
期待される結果:
Crea diagrama de dispersión D3.js con: elementos circle vinculados a datos, listeners de eventos hover mostrando div de tooltip, efectos de transición en mouseover, escalas x/y calculadas con padding, generadores de ejes y etiquetas
「d3-viz」を使用しています。 Haz un grafo de fuerza dirigida de mis datos de red
期待される結果:
Implementa D3.js forceSimulation con: forceManyBody para repulsión de nodos, forceLink para conexiones de aristas, forceCenter para posicionamiento, nodos arrastrables con handlers de eventos drag, cálculos dinámicos de distancia y fuerza de enlaces
セキュリティ監査
安全All static analysis findings are false positives from documentation files containing code examples. The 'Ruby/shell backtick execution' detections are markdown code blocks with JavaScript examples for D3.js. The 'MD5 hash' and 'C2 keyword' detections are legitimate terms in documentation context (hash properties in JSON, command in D3.js API). No actual security risks present - this is a legitimate visualization skill with safe template code and reference materials.
品質スコア
作れるもの
Constructor de dashboards
Crea dashboards interactivos con visualización de datos en tiempo real para métricas de negocio, análisis o sistemas de monitoreo
Visualizador de investigación
Transforma datos de investigación en gráficos de calidad editorial para trabajos académicos o presentaciones
Diseñador de gráficos personalizados
Crea visualizaciones únicas y de marca que van más allá de las bibliotecas de gráficos estándar para marketing o narrativa
これらのプロンプトを試す
Crea un gráfico de barras usando D3.js que muestre datos de ventas mensuales. Incluye etiquetas de ejes, un título y usa el color steelblue para las barras. El gráfico debe tener 800px de ancho y 400px de alto.
Construye un gráfico de líneas interactivo con D3.js que muestre tendencias de temperatura a lo largo del tiempo. Agrega tooltips hover que muestren valores cuando el mouse se mueva sobre los puntos de datos. Incluye una función de zoom para examinar rangos de tiempo específicos.
Crea un diagrama de red de fuerza dirigida con D3.js que muestre las relaciones entre entidades. Los nodos deben dimensionarse por importancia y colorearse por categoría. Agrega funcionalidad de arrastre para que los usuarios puedan reposicionar los nodos.
Diseña un gráfico de áreas apiladas usando D3.js que compare múltiples series de datos a lo largo del tiempo. Implementa transiciones suaves cuando los datos se actualizan. Incluye una leyenda y asegúrate de que la paleta sea accesible para daltónicos.
ベストプラクティス
- Siempre selecciona y limpia los elementos SVG antes de renderizar para prevenir fugas de memoria y visualizaciones duplicadas cuando los componentes se renderizan nuevamente
- Usa escalas de D3.js para todos los mapeos dimensionales en lugar de cálculos manuales - esto asegura un dimensionado consistente y un diseño responsivo más fácil
- Implementa accesibilidad adecuada agregando etiquetas ARIA, títulos y descripciones a los elementos SVG, y prueba los esquemas de color para usuarios con daltonismo
回避
- Evita manipular directamente el DOM manejado por React con D3.js después del renderizado inicial - esto rompe la reconciliación virtual de React y causa problemas de rendimiento
- No codifiques las dimensiones del gráfico - siempre usa container queries o resize observers para hacer las visualizaciones responsivas a los cambios de viewport
- Nunca omitas la validación de datos antes de vincular a las selecciones de D3 - los datos no validados pueden causar fallos silenciosos o errores de renderizado crípticos