Data Race

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