How to make Bar Chart Race visualizations without coding
Animated bar charts are taking social media by storm. You can now make one in seconds by uploading a spreadsheet to Flourish.
It all started with a tweet1. To be precise, this one from Matt Navarra, a British digital media consultant who used to be the director of social media at The Next Web.
WOAH...!
— Matt Navarra (@MattNavarra) February 21, 2019
Top 15 BEST global brands ranking for the last 19 years...
Watch big name tech companies take-over at the end!
h/t @Interbrand pic.twitter.com/oRdO7QH6js
As Navarra’s tweet bounced around Twitter, racking up thousands of likes and retweets and hundreds of replies, the driver of its virality seemed to be an overwhelming enthusiasm for the visualization he had included. In the words of one of Navarra’s repliers, “This is mesmerising & strangely soporific!”
So yes, you can now make these mesmerising and strangely soporific bar chart races yourself, in Flourish, just by uploading a spreadsheet. Here’s an example:
Cool features!
We had such a great response to the Bar Chart Race template that we’ve added a whole bunch of extra features. You can:
- Let the user filter by category just by clicking on the legend
- Add circular or rectangular images positioned at either end of the bar
- Show the labels on the bars or to the left
- Show a totaliser to show the total across all rows in the data sheet
- Fix the height of a bar and have the embedded graphic change size to accommodate them
- Lock the axis if you want to focus the viewer’s eye on the absolute changes
- Sort the bars to show the lowest values instead of the highest
- Choose what happens when there are blank cells in the data
How we got here
After Navarra’s tweet went viral, these Bar Chart Race visualizations began popping up more and more. Football data was particularly popular.
Woah. Fascinating and mesmerising. pic.twitter.com/CXvVAADbDx
— MUNDIAL (@MundialMag) 16 March 2019
Then earlier this week, John Burn-Murdoch, a data visualization journalist at the Financial Times in London, fanned the flames, tweeting out his own code for making one of these bar chart races.
New project:
— John Burn-Murdoch (@jburnmurdoch) 18 March 2019
A Bar Chart Race animation showing the changing ranks of the 10 biggest cities in the world since 1500.
Fascinating to watch giant cities vanish after falling in conquests, and amazing that three UK cities were in the top 8 in the late 1800s. pic.twitter.com/KglMZbYobr
After Burn-Murdoch’s tweet there was no stopping them – suddenly bar chart races were everywhere.
My verdict on @jburnmurdoch's visualization library bar chart races?
— Tom Forth (@thomasforth) 18 March 2019
Excellent! It's taken me a few hours, because I've never used observable before, and I'm not great at D3, and I started in a bit of a silly place. But it works....
So here's GDP/head of EU regions since 1900. pic.twitter.com/2ghdqEe4Od
Growth of the world's population over the last 12,000 years with respect to present-day national territories.
— Robert Rohde (@RARohde) 20 March 2019
Population estimates from the History Database of the Global Environment (HYDE) which was developed by @nlenvironagency. pic.twitter.com/UdSIYyEcd4
The thing is, these bar chart races are cool – they really are. But while copying Burn-Murdoch’s code and tinkering with it to make something new is easy and fun for developers and journalists who know JavaScript, it’s a bit baffling for the non-coding majority who want to make one of their own.
Enter Flourish!
After a couple of days of watching our Twitter timelines fill up with hand-coded bar chart races, we thought, Hey, this can’t be that hard! Also, “bar chart race”, doesn’t that sound a lot like “horserace”?. So we quickly added a Flourish template for this in-vogue visualization style. Check it out and let us know what other templates you’d like to see.
1. Although the brand example was the first viral bar chart race, it surely wasn't the first visualization in this style. Flourish's creators, Kiln, made a bar chart race of sorts for the British Council about six years ago. It's still live here. But that seems unlikely to have been the first too! Does anyone know of an earlier example? Tell us on Twitter if so!