How to make a line chart race visualization
Move over bars, lines can race too!
The world has gone crazy for bar chart race visualizations. Since we launched that template a few months ago, inspired by a chart by the FT’s John Burn-Murdoch, loads of people have made fun and engaging animated graphics with it. So today we’re unveiling a follow-on template. Drumroll … the line chart race!
The line chart race builds on our long-standing “Horserace” template, but adds a cool new feature: instead of the axes being fixed, you can now turn on the “zoomed” view to keep the dots representing the competitors in the centre while the axes animate in the background. This adds the same kind of dynamism that makes bar chart races so popular – and it also helps when displaying a long time series on a narrow mobile screen.
As the second example below shows, you can even set the y-axis to be dynamic as well, so the vertical scale updates as the race moves along, much like the value axis in a bar chart race. This can work nicely if you want to focus on the gaps between the competitors rather than their absolute scores (which become harder to read on a moving axis).
Adapted from a Flourish visualization by the Google Trends team
We also made some other improvements to the underlying template. For example, the chart will now automatically get taller as you add more competitors or increase the size of the circles, to minimize overlapping.
And of course the new line chart race template includes all the older features, such as:
animation between two modes: “ranks” (a bump chart) and “scores” (a normal line chart)
gap-fill missing data with dotted lines
a “tie breaks” mode, which spreads out the circles horizontally when they end up with the same score
click on an axis label to partially reveal the chart: great for step-by-step reveals in the Flourish story editor
Happy racing!