How to make Bar Chart Race visualizations without coding

It all started with a tweet¹. 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...!

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

— Matt Navarra (@MattNavarra) February 21, 2019

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:

Make a bar chart race »

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:

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

— John Burn-Murdoch (@jburnmurdoch) 18 March 2019

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?
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

— Tom Forth (@thomasforth) 18 March 2019

Growth of the world's population over the last 12,000 years with respect to present-day national territories.

Population estimates from the History Database of the Global Environment (HYDE) which was developed by @nlenvironagency. pic.twitter.com/UdSIYyEcd4

— Robert Rohde (@RARohde) 20 March 2019

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.

Make your own bar chart race now »

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!