Tipos de Gráficos Explicados
O Data Race oferece nove modos de gráfico distintos para cada conjunto de dados, além de uma tabela de dados para números exatos. Cada modo destaca um aspecto diferente dos dados — classificações, tendências, composição, padrões geográficos, trajetórias de classificação, o fluxo do todo ou comparação direta de magnitude. Este guia explica o que cada visualização mostra, como lê-la e quando é mais útil.
Corrida de Gráfico de Barras
A corrida de gráfico de barras é a visualização característica do Data Race. Mostra entidades classificadas como barras horizontais, com a barra mais longa representando o maior valor. Conforme a animação avança, as barras sobem e descem para refletir as mudanças de ranking, criando um efeito dinâmico de corrida. Cada barra tem uma cor e é rotulada com o nome da entidade, bandeira (para países) e valor atual.
Quando usar: Use a corrida de gráfico de barras quando quiser ver como os rankings mudam ao longo do tempo. É especialmente eficaz para comparar um número moderado de entidades (10–20) e identificar ascensões ou quedas dramáticas.
- O comprimento da barra representa o valor — barras mais longas significam valores maiores
- A posição da barra mostra o ranking — a barra do topo é o 1º lugar
- Transições suaves entre períodos mostram mudanças de ranking
- As cores são consistentes por entidade ao longo da animação
Gráfico de Saltos
O gráfico de saltos plota a classificação de cada entidade ao longo do tempo em um eixo 1..N, com a classificação #1 no topo. As linhas sobem e descem sempre que os rankings mudam, e os cruzamentos marcam os momentos de ultrapassagem. O foco está na ordem, não nos valores absolutos — uma disputa acirrada pelo 1.º lugar parece igual, seja a diferença um dólar ou um trilhão. Entidades fixadas são desenhadas com uma linha mais brilhante e um halo ao redor do ponto.
Quando usar: Use o gráfico de saltos quando a ordem de classificação é a história — medalhas olímpicas, as 10 maiores economias ao longo de um século, classificações onde as posições se embaralham. É a visão mais clara de quem ultrapassou quem e quando.
- O eixo Y é o ranking: #1 no topo, #N na base
- Uma linha descendo ou subindo mostra que a entidade ganha ou perde posição
- Duas linhas se cruzando = uma entidade ultrapassando outra naquele período
- Linhas horizontais planas significam que o ranking permaneceu estável
- Entidades fora do top-N visível aparecem como chips na borda inferior
Gráfico de Linha
O gráfico de linha traça o valor de cada entidade ao longo do tempo como uma linha contínua. Todas as entidades são mostradas nos mesmos eixos, facilitando a comparação de tendências de longo prazo. O gráfico destaca o período atual com um marcador vertical, e você pode passar o mouse sobre qualquer ponto para ver o valor exato. Entidades fixadas são enfatizadas com linhas mais espessas enquanto outras ficam em segundo plano.
Quando usar: Use o gráfico de linha quando quiser acompanhar tendências ao longo do tempo, comparar trajetórias de crescimento ou identificar pontos de cruzamento onde uma entidade supera outra.
- O eixo Y mostra a escala de valores, o eixo X mostra os períodos de tempo
- Cada linha representa uma entidade — siga uma linha para ver sua trajetória
- Inclinações mais acentuadas indicam crescimento ou queda mais rápidos
- Linhas que se cruzam mostram mudanças de ranking entre entidades
Streamgraph
O streamgraph empilha os valores brutos de cada entidade como faixas coloridas ao redor de uma linha de base centralizada, crescendo simetricamente para cima e para baixo. A altura total em qualquer momento equivale ao valor combinado de todas as entidades, permitindo ver composição E magnitude total ao mesmo tempo. Ao reproduzir, o fluxo entra pela esquerda — faixas aparecem, incham e se reequilibram em uma massa orgânica. Melhor em conjuntos de dados em crescimento monotônico onde o quadro geral é a história.
Quando usar: Use o streamgraph quando quiser sentir o todo evoluir como uma única forma fluente — o PIB mundial explodindo enquanto as regiões se reequilibram, o ecossistema OSS se expandindo enquanto novas bibliotecas substituem as antigas, a capitalização de mercado crescendo enquanto os setores giram.
- A espessura da faixa em qualquer ponto = valor bruto daquela entidade naquele período
- Altura total do gráfico = soma de todas as entidades visíveis (Top-N + Outros)
- As faixas se estendem da esquerda conforme a animação avança — a borda dianteira é o momento atual
- O centro permanece em y=0; o gráfico cresce simetricamente para cima e para baixo
- Bandeiras aparecem dentro de cada faixa; faixas finas se reduzem a uma faixa de cor
Gráfico de Pizza
O gráfico de pizza mostra a composição dos valores para um único período de tempo. Cada fatia representa a participação de uma entidade no total. Conforme a animação avança, os tamanhos das fatias se ajustam para refletir as proporções em mudança. O gráfico é mais informativo quando poucas grandes entidades dominam o total, revelando padrões de concentração ou diversificação.
Quando usar: Use o gráfico de pizza quando quiser entender que participação cada entidade detém do total — por exemplo, quais países produzem mais CO₂ ou detêm a maior participação no PIB.
- O tamanho da fatia representa a participação da entidade no total
- Passe o mouse sobre uma fatia para ver o percentual exato e o valor
- Fatias pequenas são agrupadas em 'Outros' para manter a legibilidade
- Observe as fatias crescendo ou diminuindo ao longo do tempo para identificar mudanças de dominância
Mapa em árvore
O mapa em árvore divide a área do gráfico em retângulos, cada um dimensionado proporcionalmente ao valor de uma entidade — quanto maior o valor, maior o retângulo. O algoritmo d3-treemapResquarify mantém as formas quadradas em todos os períodos, para que os retângulos deslizem e redimensionem suavemente, em vez de se reorganizarem caoticamente. Entidades de cauda longa abaixo do top-N colapsam em um bloco 'Outros' que cresce e diminui com o restante.
Quando usar: Use o mapa em árvore quando a história for 'quanto do total cada entidade ocupa' e você quiser que todas as entidades estejam agrupadas em um único quadro — sem rolagem, sem divisão em visualizações separadas.
- A área do retângulo é proporcional ao valor da entidade
- O maior retângulo é a classificação #1 — geralmente ancorado no canto superior esquerdo
- As formas permanecem quadradas à medida que o layout é atualizado entre os períodos, preservando a legibilidade
- Os blocos abaixo do top-N se reúnem em um retângulo 'Outros'
- Bandeira, nome e valor ficam dentro de cada retângulo; blocos finos omitem a bandeira para caber
Mapa coroplético
O mapa-múndi colore os países de acordo com seus valores usando uma escala de cores contínua. Cores mais escuras ou mais intensas indicam valores maiores. O mapa fornece uma visão geográfica imediata, destacando padrões e clusters regionais que são difíceis de perceber em outros tipos de gráficos. Passe o mouse sobre qualquer país para ver seu nome, valor e ranking.
Quando usar: Use o mapa-múndi quando a geografia importa — para identificar clusters regionais, comparar países vizinhos ou ver como uma variável se distribui pelos continentes.
- A intensidade da cor corresponde ao valor — consulte a legenda para ver a escala
- Países cinzas não têm dados disponíveis para o período selecionado
- Padrões regionais (ex.: cluster europeu, cinturão sub-saariano) são fáceis de identificar
- Passe o mouse para valores exatos; clique para fixar um país para comparação
Mapa de bolhas
O mapa de bolhas é um mapa de símbolos proporcionais: cada entidade é desenhada como um círculo fixado no centro de seu país (ou região), com o raio do círculo proporcional ao valor. A posição nunca se move — apenas o raio e a cor são animados. O resultado é um instantâneo geográfico que cresce e diminui no lugar à medida que o tempo avança, tornando fácil ver tanto 'onde' quanto 'qual o tamanho' em uma única visualização.
Quando usar: Use o mapa de bolhas quando quiser uma única visualização que combine geografia com magnitude — por exemplo, observando a capitalização de mercado se concentrar em algumas cidades costeiras dos EUA enquanto bolhas menores se acendem na Ásia e na Europa.
- A posição do círculo é fixada no centro de cada país
- O raio do círculo é proporcional ao valor no período atual
- O valor é centralizado dentro do círculo (sem bandeira — a localização identifica a entidade)
- A cor segue a paleta de categoria da entidade, desaparecendo à medida que ela sai do top-N
- Períodos sem dados não mostram círculo para essa entidade
Bolhas
O gráfico de bolhas agrupa cada entidade como um círculo flutuante dimensionado por valor, com d3-force resolvendo colisões para que os círculos se agrupem firmemente sem sobreposição. O layout de agrupamento é recalculado por período e interpolado entre períodos adjacentes para uma animação suave. Não há eixos — a posição não carrega significado quantitativo; apenas o tamanho o faz. Uma escala global √(value) mantém a maior entidade confiavelmente a maior à medida que os dados evoluem.
Quando usar: Use o gráfico de bolhas quando quiser uma comparação de magnitude pura, livre de eixos e geografia — ideal para 'qual é maior e por quanto' entre as principais entidades de relance.
- O raio do círculo é proporcional a √(value) — a maior entidade obtém o maior círculo
- A posição é decorativa; os círculos flutuam, mas sua localização em pixels não tem significado de valor
- A bandeira fica em 18px quando há espaço; oculta em círculos menores que 4px
- O modo agregado (região/grupo) centraliza o valor sem bandeira
- A cor segue a paleta de categoria da entidade
Tabela de Dados
A tabela de dados apresenta todos os valores em uma grade classificável e rolável. Cada linha mostra uma entidade com seu ranking, nome, valor, participação global e variação anual. Ao contrário dos gráficos animados, a tabela mostra números precisos, sendo ideal para comparações detalhadas e verificação de dados. Ordene por qualquer coluna para encontrar os melhores desempenhos, maiores movimentos ou entidades específicas.
Quando usar: Use a tabela de dados quando precisar de números exatos em vez de impressões visuais — para verificação de fatos, comparações detalhadas ou exportação de dados para análise posterior.
- Ordene pela coluna 'Valor' para ver as entradas mais altas ou mais baixas
- A coluna 'Variação' mostra crescimento ou queda em relação ao período anterior
- Use a coluna 'Participação' para comparar a porção de cada entidade do total global
- Baixe a tabela como CSV para uso em planilhas ou pesquisas
Escolhendo o Gráfico Certo
Cada tipo de gráfico responde a uma pergunta diferente. O gráfico de Barra responde 'Quem está ganhando agora?' O gráfico de Ranking responde 'Quem ultrapassou quem na classificação?' O gráfico de Linha responde 'Como cada valor evoluiu?' O Gráfico de fluxo responde 'Como o todo flui como um só?' O gráfico de Pizza responde 'Qual a participação de cada um neste momento?' O Mapa em árvore responde 'Quanto do total cada um ocupa?' O Mapa coroplético responde 'Onde os valores são mais altos geograficamente?' O Mapa de bolhas responde 'Qual o tamanho — e onde?' O gráfico de Bolhas responde 'Como as magnitudes brutas se comparam?' E a tabela responde 'Quais são os números exatos?' Alternar entre as visualizações no mesmo conjunto de dados oferece uma imagem completa dos dados de múltiplos ângulos.
- Classificações e competição → Barra
- Trajetórias de classificação e ultrapassagens → Ranking
- Tendências e trajetórias de longo prazo → Linha
- Composição fluindo através do tempo → Gráfico de fluxo
- Participação em um momento → Pizza
- Todas as entidades agrupadas em um quadro → Mapa em árvore
- Padrões geográficos → Mapa coroplético
- Geografia + magnitude em uma visualização → Mapa de bolhas
- Comparação de magnitude pura → Bolhas
- Valores exatos e exportação → Tabela de Dados