Mini linhas (sparklines) em matriz

Visão geral

Matrizes de sparklines organizam diversos mini-gráficos de linha em uma grade para comparar rapidamente tendências entre várias entidades. Cada sparkline é minimalista—sem eixos nem legendas—e foca na forma e direção da mudança.

Quando usar

Comparar tendências de produtos, regiões ou métricas
Resumos de KPI em dashboards
Acompanhar portfólios com muitas ações
Painéis de status de servidores ou sensores
Mostrar padrões gerais antes de detalhar

Não é ideal

Quando valores exatos são críticos
Menos de seis entidades (prefira um gráfico convencional)
Audiências que precisem ver eixos detalhados

Variações-chave

Rótulos opcionais de valor final
Codificação por cor conforme desempenho (verde/vermelho)
Destaque de mínimos/máximos
Escalas Y uniformes vs. independentes
Expansão interativa ao clicar ou passar o mouse

Casos de uso

Visão de portfólio (uma sparkline por ativo)
Analytics web (visitas por página)
Dashboards de vendas (receita por linha de produto)
Monitoramento de servidores (CPU/memória por instância)
Campanhas de marketing (conversões por campanha)
Estatísticas esportivas (desempenho do jogador)

Dados (CSV)

entity,week1,week2,week3,week4,week5,week6
Product A,120,125,130,128,135,140
...
Product F,90,88,92,95,93,98

Configuração do Gráfico (JSON)

Dicas de desempenho

Renderize como SVG para nitidez ou Canvas para maior velocidade
Limite cada sparkline a 20–30 pontos para legibilidade
Use virtualização se tiver mais de 100 células
Faça cache quando os dados mudam pouco

Perguntas frequentes

Quantas sparklines posso mostrar? Entre 20 e 50 funcionam bem. Se passar de 100, ofereça paginação ou filtros.

Mesma escala Y para todos? Depende. Escala comum permite comparar magnitudes; escalas independentes ressaltam a forma da tendência.

Posso adicionar interatividade? Sim: hover com tooltip, clique para expandir ou links para vistas detalhadas.

Quão minimalista deve ser? Seguindo Tufte: sem eixos nem rótulos, só a linha. Adicione valor final ou min/máx apenas se indispensável.

Como lidar com dados faltantes? Mostre lacunas ou linhas interrompidas, mas não interpole sem avisar.

Como destaco anomalias? Use cores, maior espessura ou marcadores nos outliers. Você também pode incluir uma coluna de alertas.

Example

Guide