Bump chart (ranking)

Visão geral

Gráficos bump mostram como os rankings mudam ao longo do tempo exibindo a posição de cada entidade (1.º, 2.º, 3.º etc.) em vez dos valores absolutos. As linhas se cruzam quando as entidades trocam de lugar, e o eixo y invertido coloca o posto #1 no topo. Linhas ascendentes indicam melhoria no ranking; linhas descendentes mostram quedas.

Quando usar

Rastrear rankings competitivos por período
Mostrar mudanças de posição em ligas, concursos ou mercados
Enfatizar a ordem relativa mais do que a magnitude absoluta
Comparar entidades em que o posto importa mais que o valor
Visualizar a progressão de torneios ou competições
Destacar mudanças dramáticas em posições competitivas

Não é ideal

Histórias em que os valores absolutos importam mais que o ranking
Rankings estáveis com poucos cruzamentos (o gráfico fica monótono)
Audiências que precisam de valores numéricos exatos
Mídia impressa ou estática sem suporte a animação
Mais de 12 entidades simultâneas (dificulta o acompanhamento)

Variações-chave

Eixo y invertido (posto #1 no topo)
Curvas suaves vs. linhas retas entre pontos
Destacar trajetórias-chave com ênfase
Mostrar empates com segmentos horizontais
Rótulos finais para indicar a posição final
Hover interativo para seguir cada caminho
Codificação de cor para destacar subidas/descidas

Casos de uso

Tabelas de ligas esportivas por temporada
Rankings universitários ao longo dos anos
Desempenho de equipes de vendas por trimestre
Líderes de categorias de produtos ao longo do tempo
Rankings em lojas de apps ou buscadores (SEO)
Mudanças na preferência de marca ou em pesquisas
Evolução de pesquisas eleitorais

Dados (CSV)

Year,Orange,Tomato,Apple,Sakana,Banana,Iwashi,Snappy Fish,Lemon,Pasta
2001,2,8,4,7,9,6,1,7,3
2002,2,8,4,3,9,6,1,7,4
2003,3,3,6,8,7,6,1,9,5
2004,2,7,4,8,8,5,1,9,3
2005,2,4,3,5,3,6,1,9,3
2006,2,8,4,5,9,6,1,7,3

Configuração do Gráfico (JSON)

Dicas de design

Use cores vibrantes e distintas para cada entidade
Ative curvas suaves para um acabamento fluido
Mostre pontos destacados (symbolSize: 20) em cada observação
Inverta o eixo y para que o #1 fique no topo
Reserve margem direita (110–150 px) para rótulos finais
Ajuste a largura da linha para 3–4 px para boa visibilidade
Adicione linhas de grade no eixo x para alinhar períodos
Formate rótulos do eixo y como "#1", "#2" etc. para reforçar o contexto
Ative ênfase no hover para destacar trajetórias individuais

Dicas de desempenho

Limite a visualização a 9–12 entidades para legibilidade
Use cores bem diferenciadas para acompanhar cada linha
Adicione hover interativo para destacar e seguir trajetórias
Considere filtrar para o "top N" quando houver muitas entidades
Em séries com muitos pontos, amostre intervalos regulares
Mantenha curvas suaves para reduzir ruído quando as linhas se cruzam

Perguntas frequentes

O posto #1 deve ficar no topo ou embaixo? Em contextos competitivos, costuma ficar no topo (eixo invertido), pois posições melhores são lidas como mais altas. Use o que fizer mais sentido para seu público, mas o eixo invertido geralmente é preferido.

Como lidar com empates? Mostre as entidades empatadas na mesma altura, com segmentos horizontais. Se quebrar empates visualmente, explique nas notas como fez isso.

Posso mostrar ranking e valor? Sim. Use tooltips duplos com posição e valor subjacente. Porém, mantenha a visualização principal focada no ranking; se os valores forem igualmente importantes, avalie outro tipo de gráfico.

E se o ranking tiver lacunas ou posições puladas? Decida entre mostrar posições consecutivas (1, 2, 3) ou preservar lacunas reais (1, 3, 7). Em bump charts, posições consecutivas costumam funcionar melhor. Documente claramente se optar por colapsar lacunas.

Quantas entidades são “demais”? Acima de 12, fica difícil acompanhar por causa dos cruzamentos. Filtre para o "top N", divida em vários gráficos ou permita filtragem interativa para focar subconjuntos.

Curvas suaves ou linhas retas? Curvas suaves (smooth: true) dão acabamento fluido e reduzem ruído quando as linhas cruzam. Linhas retas funcionam para períodos discretos em que você quer enfatizar os pontos exatos. Na maioria dos casos, curvas suaves aumentam a legibilidade.

Como enfatizar entidades-chave? Use ênfase no hover, aumente a largura da linha para entidades importantes ou intensifique a cor (mais brilhante para o que é chave, mais suave para contexto). Rótulos finais ajudam a identificar posições sem depender de legenda.

Example

Guide