claude-d3js-skill
Build interactive D3.js data visualisations
Crie visualizações de dados personalizadas e de qualidade para publicação sem a complexidade. Esta skill fornece orientação especializada em D3.js com modelos prontos para uso para gráficos, imagens e visualizações interativas que funcionam em qualquer framework 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". Create a line chart showing monthly temperature trends
Résultat attendu:
Um componente React completo de D3.js com gráfico de linha SVG, incluindo eixo x (meses), eixo y (temperatura), interpolação de curva suave, área de preenchimento gradiente sob a linha, e tooltip mostrando valores exatos ao passar o mouse.
Utilisation de "claude-d3js-skill". Build a pie chart for market share comparison
Résultat attendu:
Um gráfico de pizza interativo de D3.js com transições de entrada animadas, fatias separadas ao passar o mouse, rótulos de porcentagem, legenda externa com codificação de cores, e animação de explosão ao clicar na fatia selecionada.
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
Desenvolvedor de Dashboard Empresarial
Crie dashboards executivos com gráficos de KPIs, visualizações de tendências e filtros interativos para plataformas de análise de negócios.
Jornalista de Dados
Construa histórias interativas envolventes com gráficos e mapas personalizados que ajudam os leitores a explorar narrativas baseadas em dados.
Analista de Pesquisa
Gere visualizações científicas de qualidade para publicação com controle preciso sobre escalas, eixos e representações estatísticas.
Essayez ces prompts
Create a responsive bar chart using D3.js that displays quarterly revenue data. Include proper axis labels, tooltips on hover, and use a colour-blind accessible palette. Provide the complete React component code.
Build an interactive scatter plot with D3.js where each point represents a product. Add zoom and pan functionality, click-to-highlight individual points, and a legend that updates dynamically when data filters change.
Create a force-directed network diagram showing relationships between entities. Implement node dragging, collision detection, custom link styling based on relationship type, and animated transitions when nodes are added or removed.
Build a geographic choropleth map using D3.js geo projections. Display regional data with colour encoding, add zoom transitions between country and state levels, and show tooltips with detailed statistics on hover.
Bonnes pratiques
- Sempre limpe o conteúdo SVG anterior com selectAll('*').remove() antes de renderizar novamente para evitar elementos duplicados
- Use a convenção de margem para espaçamento adequado dos eixos e acomode o transbordamento de rótulos nas dimensões do gráfico
- Implemente dimensionamento responsivo com ResizeObserver ou listeners de redimensionamento de janela para layouts adaptativos
Éviter
- Não codifique dimensões - sempre use contêineres responsivos que se adaptam ao tamanho do elemento pai
- Evite criar escalas dentro de loops ou transições - defina-as uma vez e reutilize para desempenho
- Nunca use D3 para gráficos estáticos simples - prefira CSS ou bibliotecas leves para visualizações básicas