Sistema de Visualização de Dados

O que Sistema de Visualização de Dados faz?

Propósito

O Sistema de Visualização de Dados fornece uma metodologia para projetar gráficos e tabelas que se situam acima do nível de métricas individuais. Ele garante que relações quantitativas—como tendências ao longo do tempo, comparações entre categorias e distribuições de valores—sejam comunicadas de forma clara, precisa e acessível. Este sistema previne "ruído visual" e sobrecarga cognitiva, estabelecendo regras para seleção de gráficos, normalização óptica, codificação de cores acessível e reflow responsivo.

Casos de Uso

• Dashboards SaaS: Visualizando crescimento de usuários, tendências de receita ou desempenho do sistema.
• Relatórios Financeiros: Mostrando distribuições de portfólio, categorias de despesas ou flutuações de mercado.
• Plataformas de Analytics: Exibindo fontes de tráfego, funis de conversão ou coortes comportamentais.
• Relatórios de Impacto e Sustentabilidade: Visualizando métricas ambientais ou dados de impacto social ao longo do tempo.
• Aplicativos de Saúde e Fitness: Acompanhando sinais vitais, níveis de atividade ou progresso em direção a metas.

Quando NÃO Usar

• Números Únicos de Alto Impacto: Para KPIs isolados (ex: "Receita Total: $10k"), use sistema-de-metricas-e-estatisticas.
• Dados Brutos com Múltiplos Atributos: Se o usuário precisar ler valores específicos para 20+ itens em várias colunas, use sistema-de-tabela-de-dados-ui.
• Infográficos Puramente Decorativos: Quando o objetivo é expressão artística ou narrativa com gráficos não dinâmicos e não orientados a dados.
• Status Passo a Passo: Para processos lineares (ex: "Etapa 2 de 4"), use sistema-de-progresso-por-etapas.

Entradas

1. Objetivo do Usuário: O que o usuário está tentando entender? (Comparação, Tendência, Distribuição ou Parte-Todo).
2. Tipo de Dado: Os dados são categóricos (ex: "Tipo de Navegador"), temporais (ex: "Vendas por Mês") ou quantitativos (ex: "Preço vs. Qualidade")?
3. Cardinalidade: Quantos itens ou séries precisam ser exibidos simultaneamente?
4. Restrições de Dispositivo: Viewports alvo e modos de interação (Toque vs. Mouse).
5. Tokens da Marca: Paleta, tipografia e espaçamento do sistema de design pai.

Saídas

1. Mapa de Seleção de Gráfico: O tipo de gráfico escolhido (Linha, Barra, Pizza, Dispersão) com base no objetivo e nos dados.
2. Especificação de Cores Acessível: Uma paleta que permanece distinguível para usuários com daltonismo (Protanopia, Deuteranopia, Tritanopia).
3. Especificação de Anatomia e Rotulagem: Regras para títulos de eixos, legendas, dicas de ferramentas e marcadores de dados.
4. Mapa de Transição Responsiva: Como o gráfico se adapta de desktop para mobile (ex: mudanças de orientação, simplificação de dados).

Fluxo de Trabalho

1. Identificar o Objetivo de Comunicação

Antes de escolher um gráfico, defina o que os dados devem "dizer":

• Tendência ao Longo do Tempo: Use um Gráfico de Linha ou Gráfico de Área.
• Comparação de Categorias: Use um Gráfico de Barras (Vertical ou Horizontal).
• Relação Parte-Todo: Use um Gráfico de Rosca ou Treemap (Evite gráficos de Pizza padrão para >3 categorias).
• Correlação/Distribuição: Use um Gráfico de Dispersão ou Histograma.

2. Selecionar e Normalizar o Tipo de Gráfico

Aplique as regras "Verdade nos Dados" para garantir precisão:

• A Regra da Linha de Base Zero: Gráficos de barras DEVEM começar em uma linha de base zero no eixo de valores para evitar exagerar diferenças.
• A Regra da "Proporção de Aspecto": Para gráficos de linha, mantenha uma proporção de aspecto equilibrada (geralmente 2:1 ou 3:2) para que as inclinações não sejam artificialmente acentuadas ou suavizadas.
• Geometria Minimalista: Remova elementos não essenciais "lixo de gráfico" como efeitos 3D, linhas de grade pesadas ou sombras que não transmitem dados.

3. Estabelecer Hierarquia Visual e Rotulagem

Aplique sistema-de-hierarquia-visual aos componentes do gráfico:

• Rotulagem Direta: Sempre que possível, rotule as séries de dados diretamente ao lado das linhas/barras em vez de usar uma legenda separada para reduzir a fadiga de rastreamento ocular.
• Ênfase: Use uma cor de alto contraste para a série de dados "Atual" ou "Alvo" e neutros suaves para dados históricos ou de referência.
• Hierarquia de Contexto: Os títulos dos eixos devem estar presentes, mas subordinados (menores/mais claros) em relação aos dados primários e ao título do gráfico.

4. Aplicar Cor e Padrão Acessíveis

Garanta que os dados sejam perceptíveis por todos:

• Paletas Seguras para Daltônicos: Use matizes distintos e passos de luminosidade variados. Evite emparelhar apenas Vermelho e Verde para indicar "Ruim" vs. "Bom"; use Vermelho/Azul ou adicione ícones/símbolos.
• Codificação Redundante: Use mais do que apenas cor. Adicione linhas tracejadas, formas de marcadores diferentes (círculos, quadrados, triângulos) ou padrões/texturas distintos para diferenciar séries.
• Contraste: Garanta que todo o texto (rótulos, eixos) atenda ao contraste WCAG AA (4,5:1) contra o fundo.

5. Projetar para Interação e Responsividade

• Divulgação Progressiva: Use dicas de ferramentas para mostrar valores exatos ao passar o mouse/tocar, para que o gráfico permaneça limpo e escaneável.
• Reflow Responsivo:
  • Horizontal para Vertical: Um gráfico de barras verticais largo no desktop deve mudar para um gráfico de barras horizontais no mobile para evitar rolagem horizontal.
  • Redução de Dados: No mobile, reduza o número de rótulos do eixo X (ex: mostrar a cada dois meses) ou agregue pontos de dados.
  • Bloqueio de Proporção de Aspecto: Garanta que o gráfico mantenha sua legibilidade; use aspect-ratio em CSS para reservar espaço e evitar CLS.

Regras de Decisão

• A "Regra Sem Pizza": Evite gráficos de Pizza/Rosca se você tiver mais de 5 categorias ou se as diferenças entre as categorias forem pequenas. Use um gráfico de Barras Horizontais.
• Rotulagem em vez de Legendas: Se uma legenda for necessária, coloque-a o mais próximo possível dos dados (ex: acima do gráfico ou alinhada à direita) em vez de no fundo absoluto.
• Sucesso Monocromático: Um bom gráfico ainda deve ser compreensível se impresso em escala de cinza. Se não for, as escolhas de cor ou marcadores são muito dependentes apenas do matiz.
• Precisão vs. Escaneamento: Em dashboards, arredonde valores (ex: 1,2M vs. 1.242.301) para escaneamento instantâneo. Mantenha alta precisão para as dicas de ferramentas.

Restrições

• Acessibilidade: Os gráficos devem ter uma tabela de dados acompanhante ou um aria-label descritivo resumindo o insight principal. Use role="graphics-document" ou role="img" com um aria-label. Garanta que todos os elementos interativos (marcadores) atendam ao tamanho mínimo alvo de 24x24px.
• Responsividade: Os gráficos nunca devem ter uma largura fixa em pixels; devem ser fluidos. Para gráficos SVG complexos, use viewBox para escalonamento.
• Hierarquia: O título do gráfico deve ser o texto mais proeminente, seguido pelos próprios dados.

Padrões Comuns de Falha

• Sobrecarga de Gráfico de Pizza: Tentar mostrar 10 fatias em um gráfico de pizza, tornando as menores impossíveis de distinguir.
• Eixo Truncado: Iniciar um gráfico de barras em um valor diferente de zero para fazer uma pequena diferença parecer enorme (design enganoso).
• Dependência Apenas de Cor: Diferenciar 5 linhas em um gráfico de linha usando apenas tons semelhantes de azul, tornando-o inacessível para usuários daltônicos.
• Fadiga de Legenda: Forçar o usuário a olhar para frente e para trás entre uma chave de cores e os dados 10 vezes para entender o gráfico.
• Gráficos Mobile Transbordantes: Não ajustar o tipo de gráfico ou a rotulagem para mobile, resultando em texto minúsculo e ilegível ou layouts quebrados.

Critérios de Validação

• A seleção do tipo de gráfico corresponde ao objetivo de comunicação (ex: Linha para Tendência).
• Gráficos de barras começam em uma linha de base zero.
• A paleta de cores é segura para daltônicos e usa codificação redundante (marcadores/padrões).
• A rotulagem direta é usada onde o espaço permite; legendas são colocadas em proximidade próxima.
• O gráfico é fluido e se adapta corretamente ao mobile (ex: reflow horizontal).
• Acessibilidade: aria-label fornece um resumo dos dados/insight.
• Interação: Dicas de ferramentas fornecem dados precisos ao passar o mouse/tocar.
• Todo o texto atende ao contraste WCAG AA (4,5:1).