blog-chart

Blog Chart – Visualização de Dados SVG Integrada

Gera gráficos SVG inline compatíveis com modo escuro para posts de blog. Invocado internamente por blog-write e blog-rewrite quando dados adequados para gráficos são identificados. Não é um comando de usuário independente.

Fonte de verdade de estilo: references/visual-media.md

Formato de Entrada

O escritor ou pesquisador passa uma solicitação de gráfico:

Solicitação de Gráfico:
- Tipo: barra horizontal
- Título: "Fontes de Citação de IA por Plataforma"
- Dados: ChatGPT 43,8%, Perplexity 6,6%, Google AI Overviews 2,2%, Reddit 7,15%
- Fonte: Ahrefs, Dezembro de 2025
- Plataforma: mdx (ou html)

Seleção do Tipo de Gráfico

Selecione com base no padrão dos dados. A diversidade é obrigatória – nunca repita um tipo dentro de um mesmo post.

Padrão de Dados	Melhor Tipo de Gráfico
Comparação antes/depois	Gráfico de barras agrupadas
Fatores ranqueados / correlações	Gráfico de pirulito
Partes de um todo / participação de mercado	Gráfico de rosca
Tendência ao longo do tempo	Gráfico de linhas
Melhoria percentual	Gráfico de barras horizontal
Distribuição / intervalo	Gráfico de área
Pontuação multidimensional	Gráfico radar

Regras de Estilo (Innegociáveis)

Todos os gráficos devem funcionar tanto em fundos escuros quanto claros:

Elementos de texto:     fill="currentColor"
Linhas de grade:        stroke="currentColor" opacity="0.08"
Linhas de eixo:         stroke="currentColor" opacity="0.3"
Fundo:                  transparente (sem fill no SVG raiz)
Texto de subtítulo:     fill="currentColor" opacity="0.45"
Texto de fonte:         fill="currentColor" opacity="0.35"
Texto de rótulo:        fill="currentColor" opacity="0.8"

Paleta de Cores

Cor	Hex	Uso
Laranja	#f97316	Primário / maior valor
Azul Celeste	#38bdf8	Secundário / comparação
Roxo	#a78bfa	Terciário / categoria especial
Verde	#22c55e	Quaternário / indicador positivo

Para texto dentro de elementos coloridos: fill="white" com fontWeight="800".

Estrutura Padrão SVG (HTML)

<svg
  viewBox="0 0 560 380"
  style="max-width: 100%; height: auto; font-family: 'Inter', system-ui, sans-serif"
  role="img"
  aria-label="Descrição do gráfico com ponto de dado chave"
>
  <title>Título do Gráfico</title>
  <desc>Descrição para leitores de tela com todos os pontos de dado chave e fonte</desc>

  <!-- Conteúdo do gráfico -->

  <text x="280" y="372" text-anchor="middle" font-size="10" fill="currentColor" opacity="0.35">
    Fonte: Nome da Fonte (Ano)
  </text>
</svg>

Estrutura JSX/MDX (atributos camelCase)

<svg
  viewBox="0 0 560 380"
  style={{maxWidth: '100%', height: 'auto', fontFamily: "'Inter', system-ui, sans-serif"}}
  role="img"
  aria-label="Descrição do gráfico"
>
  <title>Título do Gráfico</title>
  <desc>Descrição para leitores de tela</desc>

  {/* Conteúdo do gráfico */}

  <text x="280" y="372" textAnchor="middle" fontSize="10" fill="currentColor" opacity="0.35">
    Fonte: Nome da Fonte (Ano)
  </text>
</svg>

Conversão de Atributos JSX (Obrigatório para MDX)

HTML	JSX
stroke-width	strokeWidth
stroke-dasharray	strokeDasharray
stroke-linecap	strokeLinecap
text-anchor	textAnchor
font-size	fontSize
font-weight	fontWeight
font-family	fontFamily
class	className
style="..."	style={{...}}

Construção por Tipo de Gráfico

Gráfico de Barras Horizontal

Melhor para: melhorias percentuais, comparações de métrica única.

1. Definir área do gráfico: x=80, y=40, largura=440, altura=280
2. Calcular altura da barra: alturaGrafico / quantidadeDados - gap (gap=8)
3. Calcular largura da barra: (valor / valorMaximo) * larguraGrafico
4. Posicionar barras: y = chartY + indice * (alturaBarra + gap)
5. Rótulo à esquerda (alinhado à direita em x=75): nome da categoria
6. Rótulo de valor no final da barra: porcentagem ou número
7. Texto da fonte centralizado na parte inferior

Gráfico de Barras Agrupadas

Melhor para: antes/depois, comparação A vs B.

1. Definir grupos ao longo do eixo Y, barras dentro de cada grupo
2. Usar 2 cores (primária + secundária) para as duas séries
3. Adicionar legenda no topo: quadrado colorido + rótulo para cada série
4. Espaçamento entre grupos > espaçamento dentro dos grupos

Gráfico de Rosca

Melhor para: partes de um todo, participação de mercado.

1. Centro: cx=280, cy=180, raio externo=140, raio interno=80
2. Calcular segmentos de arco usando ângulos acumulados
3. Cada segmento: <path d="M... A... L... A... Z" fill="color" />
4. Texto central: total ou rótulo chave
5. Legenda abaixo do gráfico com quadrados coloridos + rótulos + valores

Gráfico de Linhas

Melhor para: tendências ao longo do tempo.

1. Eixo X: períodos de tempo, espaçados uniformemente
2. Eixo Y: intervalo de valores com 4-5 linhas de grade
3. Desenhar linhas de grade: stroke="currentColor" opacity="0.08"
4. Plotar pontos de dados: <circle cx=... cy=... r="4" fill="color" />
5. Conectar com: <polyline points="..." fill="none" stroke="color" strokeWidth="2" />
6. Opcional: preenchimento de área abaixo da linha com opacity="0.1"

Gráfico de Pirulito

Melhor para: fatores ranqueados, correlações.

1. Orientação horizontal (como gráfico de barras, mas com círculos)
2. Linha fina do eixo ao ponto de dados: stroke="currentColor" opacity="0.15" strokeWidth="1"
3. Círculo no ponto de dados: r="6" com cor de preenchimento
4. Rótulo de valor ao lado do círculo
5. Categorias no eixo Y (alinhadas à esquerda)

Gráfico de Área

Melhor para: distribuição, dados cumulativos.

1. Mesmo que gráfico de linhas, mas com área preenchida abaixo
2. Preenchimento da área: <path d="M... L... L... Z" fill="color" opacity="0.15" />
3. Linha no topo: stroke="color" strokeWidth="2" fill="none"
4. Linhas de grade atrás da área

Gráfico Radar

Melhor para: pontuação multidimensional (5-7 eixos).

1. Centro: cx=280, cy=190
2. Desenhar polígonos concêntricos para grade (3-4 níveis)
3. Calcular pontos finais dos eixos em ângulos iguais
4. Plotar pontos de dados em cada eixo proporcionais ao valor
5. Conectar pontos de dados com polígono preenchido: fill="color" opacity="0.2" stroke="color"
6. Rotular cada eixo na borda externa

Formato de Saída

Encapsule cada gráfico em um elemento <figure>:

HTML:

<figure>
  <svg viewBox="0 0 560 380" style="max-width: 100%; height: auto; font-family: 'Inter', system-ui, sans-serif" role="img" aria-label="[descrição]">
    <title>[Título do Gráfico]</title>
    <desc>[Descrição completa com pontos de dados para leitores de tela]</desc>
    <!-- conteúdo do gráfico -->
    <text x="280" y="372" text-anchor="middle" font-size="10" fill="currentColor" opacity="0.35">
      Fonte: [Nome da Fonte] ([Ano])
    </text>
  </svg>
</figure>

MDX:

<figure className="chart-container" style={{margin: '2.5rem 0', textAlign: 'center', padding: '1.5rem', borderRadius: '12px'}}>
  <svg viewBox="0 0 560 380" style={{maxWidth: '100%', height: 'auto', fontFamily: "'Inter', system-ui, sans-serif"}} role="img" aria-label="[descrição]">
    <title>[Título do Gráfico]</title>
    <desc>[Descrição completa]</desc>
    {/* conteúdo do gráfico com atributos camelCase */}
    <text x="280" y="372" textAnchor="middle" fontSize="10" fill="currentColor" opacity="0.35">
      Fonte: [Nome da Fonte] ([Ano])
    </text>
  </svg>
</figure>

Checklist de Qualidade (Verifique Antes de Retornar)

• Nenhuma cor de texto codificada (todas usam currentColor)
• Nenhum fundo branco/claro (transparente ou nenhum)
• Texto de atribuição da fonte presente na parte inferior
• role="img" e aria-label presentes no <svg>
• <title> e <desc> presentes dentro do <svg>
• Tipo de gráfico ainda não usado neste post
• Se MDX: todos os atributos em camelCase (sem hífens nos nomes dos atributos)
• Valores dos dados correspondem exatamente aos dados de origem
• Paleta de cores usa apenas cores aprovadas
• ViewBox é 0 0 560 380 (padrão) ou alternativa justificada