Corrida de linhas

Visão geral

Gráficos do tipo “line race” animam várias séries ao longo do tempo, destacando como mudam suas posições relativas e seus valores. Conforme os anos avançam, as linhas sobem ou descem conforme a renda, oferecendo uma visualização dinâmica da concorrência econômica e dos padrões de crescimento. Essa técnica dá vida a dados históricos, ajudando a identificar líderes, histórias de alcance e viradas drásticas no ranking.

Quando usar

• Mostrar evolução competitiva de indicadores econômicos entre países ou regiões
• Revelar mudanças dramáticas no desempenho relativo em longos períodos
• Criar narrativas envolventes com tendências históricas
• Destacar vencedores e retardatários ao longo de décadas
• Apresentar desigualdade ou convergência de renda
• Tornar dados de longo prazo mais memoráveis

Não é ideal

• Histórias em que uma comparação estática já basta
• Audiências que preferem controlar o ritmo por conta própria
• Situações em que os valores exatos importam mais que a posição relativa
• Mídia impressa ou estática sem suporte a animação
• Mais de 10 séries simultâneas (fica caótico)

Variações-chave

• Velocidade da animação (2–10 segundos por década)
• Etiquetas finais com o valor de cada série
• Curvas suaves vs. segmentos retos
• Destaque do líder atual
• Controles interativos para reproduzir ou explorar

Casos de uso

• Evolução da renda nacional na Europa desde 1950
• Rankings de PIB per capita por década
• Convergência ou divergência econômica regional
• Comparação de crescimento de renda por indústria
• Taxas de adoção tecnológica por país
• Melhora da expectativa de vida entre nações

Dados (CSV)

Year,Finland,France,Germany,Iceland,Norway,Poland,Russia,United Kingdom
1950,8200,9500,7100,10500,11200,5400,6100,9800
...
2020,36900,40200,42100,44800,49800,30100,28300,38100

Configuração do Gráfico (JSON)

Dicas de design

• Use cores distintas para cada país e mantenha a identidade durante a animação
• Ative etiquetas finais para mostrar ranking e valores finais
• Configure 8–12 segundos para percorrer 70 anos confortavelmente
• Mantenha smooth: false para respeitar medições históricas
• Reserve 120–150 px no lado direito para etiquetas finais
• Considere foco no hover para explorar cada série

Dicas de desempenho

• Limite a visualização a 5–8 séries para preservar clareza
• Se houver mais de 50 pontos de tempo, amostre a cada 5 anos
• Use showPoints: false para melhor renderização
• Ajuste a velocidade de animação com sua audiência: rápido demais confunde

Perguntas frequentes

Qual ritmo de animação é adequado? Para décadas de dados, 8–12 segundos no total costumam funcionar (~0,15–0,2 s por ano). Para períodos curtos, 3–5 segundos bastam.

Como funcionam as etiquetas finais? Elas aparecem na borda direita com nome e valor final, dispensando a lenda para ver o ranking final.

Todas as linhas devem aparecer ao mesmo tempo? Devem: o efeito de “corrida” depende disso. Se houver mais de 8 séries, mostre as top 5 e uma série de comparação.

E se as séries se cruzarem muito? Isso cria interesse visual. Use cores bem diferenciadas e foco no hover para que cada pessoa siga a série de interesse.

Dá para pausar ou reiniciar? Apesar da configuração estar em Markdown, a maioria das bibliotecas permite botões de play/pausa ou reinício via eventos.

E se os valores forem muito discrepantes? Se uma série for 10× outra, use eixo log ou apresente taxas de crescimento (%). Você também pode dividir a história em várias seções ou escalas.