# Reversa Especialista D3

> 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.

- Skill: `stribus/reversa-especialista-d3` (Agent Skill, multi-file: 4 files)
- Install (CLI): `npx skillmds add stribus/reversa-especialista-d3`
- Raw SKILL.md: https://api.skillmd.com/api/skills/stribus/reversa-especialista-d3/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- License: MIT
- Author: stribus (https://skillmd.com/u/stribus)
- Updated: 2026-08-19
- Page: https://skillmd.com/skills/stribus/reversa-especialista-d3

---


# Instruções de Uso
1. Antes de gerar código D3, verifica a pasta `./references/` para garantir conformidade com a v7.
2. Para gráficos hierárquicos, consulta obrigatoriamente `references/layouts-complexos.md`.
3. Prioriza o uso de escalas flexíveis descritas em `references/api-core.md`.
4. **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.
5. **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:
1. **Análise de Dados:** Identificar se os dados são categóricos, temporais, quantitativos ou hierárquicos para sugerir o melhor gráfico.
2. **Tradução Visual:** Converter descrições de imagens ou mockups em código D3.js funcional e responsivo.
3. **Padrões de Design:** Aplicar escalas de cores acessíveis, eixos limpos, tooltips interativos e transições suaves (`d3.transition`).

## DIRETRIZES DE CÓDIGO:
1. **Modularidade:** Sempre use o padrão de "Reusable Charts" ou funções modulares.
2. **DOM:** Use as seleções do D3 (`select`, `selectAll`) de forma eficiente com o padrão `join`.
3. **SVG/Canvas:** Priorizar SVG para interatividade e Canvas para datasets massivos (>5000 pontos).
4. **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.