Visualização de dados com D3.js e Claude Code

Comece pela tela real

O objetivo não é uma demo bonita, mas uma implementação estável em mobile, teclado, textos longos, dados vazios e CTA de negócio. O Claude Code é mais útil quando o prompt contém limites: quais arquivos podem mudar, o que deve continuar visível, o que precisa de suporte a teclado e como o resultado será verificado.

Guias relacionados: claude code chart library, claude code data visualization, claude code dashboard development. Referências oficiais: D3 getting started, D3 scales, D3 axes.

Decomponha o panorama geral

A base do D3.js é “converter dados em pixels e desenhá-los como elementos SVG”. Quando você organiza os termos difíceis primeiro, o pedido ao Claude Code fica bem mais concreto.

Peça	Explicação simples	Papel no nosso código
selection	Operação que escolhe elementos do DOM	Adicionar um svg em #chart
scale	Converte número ou categoria em posição na tela	Nome do canal no eixo X, número de conversões no eixo Y
axis	Marcações e rótulos	Mostrar o canal no eixo X e as conversões no eixo Y
mark	A forma que de fato aparece	Desenhar barras com rect e linhas com path
join	Associa dados a elementos do DOM	Atualizar as barras mesmo quando a quantidade de dados muda

Não peça só “faça um gráfico de barras com D3”. Passe a estrutura de dados, a unidade de exibição, a acessibilidade, o comportamento na atualização e o método de verificação. Assim o Claude Code consegue gerar algo manutenível, e não um gráfico que funciona mas é difícil de manter.

Prompt para Claude Code

Implemente com a menor mudança segura. Mantenha rotas, estilos e CTA. Retorne código copiável, use case, pitfall, revisão mobile e rollback.

Use case checklist

1. Busca, gráficos, artigos relacionados e CTA em conteúdo.
2. Listas, boards, dashboards e formulários SaaS.
3. Rotas de receita em produto e consultoria.
4. Fluxo de revisão em equipe, em que o Claude Code retorna implementação, riscos e checagens manuais juntos.

Exemplo de implementação

<figure>
  <svg id="revenue-chart" width="640" height="360" role="img" aria-labelledby="chart-title"></svg>
  <figcaption id="chart-title">Monthly revenue trend</figcaption>
</figure>

import * as d3 from "d3";

const data = [
  { month: "Jan", revenue: 12000 },
  { month: "Feb", revenue: 16400 },
  { month: "Mar", revenue: 15100 },
  { month: "Apr", revenue: 20100 },
];

const svg = d3.select("#revenue-chart");
const width = 640;
const height = 360;
const margin = { top: 24, right: 24, bottom: 44, left: 72 };

const x = d3
  .scaleBand()
  .domain(data.map((d) => d.month))
  .range([margin.left, width - margin.right])
  .padding(0.2);

const y = d3
  .scaleLinear()
  .domain([0, d3.max(data, (d) => d.revenue) ?? 0])
  .nice()
  .range([height - margin.bottom, margin.top]);

svg.append("g").attr("transform", `translate(0,${height - margin.bottom})`).call(d3.axisBottom(x));
svg.append("g").attr("transform", `translate(${margin.left},0)`).call(d3.axisLeft(y));

svg
  .append("g")
  .selectAll("rect")
  .data(data)
  .join("rect")
  .attr("x", (d) => x(d.month) ?? 0)
  .attr("y", (d) => y(d.revenue))
  .attr("width", x.bandwidth())
  .attr("height", (d) => y(0) - y(d.revenue))
  .attr("fill", "#2563eb");

Pitfall checklist

• Não otimize apenas para um screenshot de desktop.
• Não deixe texto longo, tabelas, SVG ou blocos de código criarem overflow horizontal.
• Não esconda o CTA, o preço, o formulário ou o espaço de anúncio atrás de uma interação decorativa.
• Não dependa só de cor ou de arrastar com o ponteiro; teclado e alternativas em texto importam.
• Não deixe o Claude Code reescrever arquivos sem relação, porque o custo de revisão sobe rápido.

Verificação

Após o build, teste 375px: sem overflow, blocos de código com scroll, CTA visível, foco claro e erros estáveis. Peça ao Claude Code uma segunda passada de revisão que liste arquivos alterados, suposições arriscadas, complexidade removível e passos de rollback.

Monetização

Para virar processo de equipe, use treinamento e consultoria Claude Code. O ponto não é só uma UI melhor: é proteger anúncios, cards de produto, links de consultoria, tabelas de preço e formulários enquanto se melhora a manutenibilidade.

Revisão adicional

Antes de publicar, compare a página antes e depois da mudança. Confirme que a ação de negócio continua óbvia, que o layout não pula e que a implementação é pequena o bastante para outro colega revisar. Se a melhoria não couber em um parágrafo de explicação, divida em um patch menor.

Nota de verificação prática

Testei largura mobile, blocos de código, CTA e teclado. Separar implementação e review foi mais estável. O maior tropeço inicial no D3 não é desenhar a barra em si, mas entender onde scaleBand, axisLeft e selection.join se conectam; depois de passar esse contexto ao Claude Code junto com os dados, o gráfico ficou estável da largura de 375px até telas largas.