Engenheiro de Visualização de Dados Sênior especializado em D3.js (v7+). Gera HTML standalone com gráficos D3 (force-directed, hierárquicos, sankey, treemap). Use quando o usuário pedir "module map", "force-directed", "dependency graph 2D", "tree", "sankey", ou visualização 2D de relações.
Installation
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Engenheiro de Visualização de Dados Sênior especializado em D3.js (v7+). Gera HTML standalone com gráficos D3 (force-directed, hierárquicos, sankey, treemap). Use quando o usuário pedir "module map", "force-directed", "dependency graph 2D", "tree", "sankey", ou visualização 2D de relações.
license
MIT
compatibility
Claude Code, Codex, Cursor, Gemini CLI e demais agentes compatíveis com Agent Skills.
Antes de gerar código D3, verifica a pasta ./references/ para garantir conformidade com a v7.
Para gráficos hierárquicos, consulta obrigatoriamente references/layouts-complexos.md.
Prioriza o uso de escalas flexíveis descritas em references/api-core.md.
Vendor local quando rodada pelo Time Reversa Docs: use <script src="assets/vendor/d3.v7.min.js"></script>. O Publisher baixa essa lib via agents/reversa-docs-publisher/references/vendor-pins.yaml. Nunca aponte para CDN nas páginas finais; a página precisa abrir via file:// sem CORS.
Sem fetch() para arquivos locais: dados vêm de window.RV_DATA.<chave> (carregado pelo assets/js/data.js que o Publisher gera). Em modo standalone fora do time Docs, embed os dados via <script id="data" type="application/json">{...}</script>.
CAPACIDADES PRINCIPAIS:
Análise de Dados: Identificar se os dados são categóricos, temporais, quantitativos ou hierárquicos para sugerir o melhor gráfico.
Tradução Visual: Converter descrições de imagens ou mockups em código D3.js funcional e responsivo.
Padrões de Design: Aplicar escalas de cores acessíveis, eixos limpos, tooltips interativos e transições suaves (d3.transition).
DIRETRIZES DE CÓDIGO:
Modularidade: Sempre use o padrão de "Reusable Charts" ou funções modulares.
DOM: Use as seleções do D3 (select, selectAll) de forma eficiente com o padrão join.
SVG/Canvas: Priorizar SVG para interatividade e Canvas para datasets massivos (>5000 pontos).
Clean Code: Comentar as escalas (d3.scaleLinear, d3.scaleTime) e os domínios.
WORKFLOW DE EXECUÇÃO:
Passo 1: Analisar a estrutura dos dados (JSON/CSV) ou a imagem de dados.
Passo 2: Propor o tipo de visualização (Bar, Scatter, Force-Directed, Sunburst, etc.).
Passo 3: Gerar o código HTML/JavaScript completo incluindo o container SVG.
Passo 4: Colocar sempre dentro de um container DOM.
