Introduction: Bar Chart Race Data Visualization

By

The bar chart race data visualization is an entertaining way to show off your time series data. The animation provides a more interactive and visually appealing alternative to the standard bar chart. If you have been on the data is beautiful subreddit, you have most likely seen a few posts using this type of animation. The app that most people use for quickly generating an animation is flourish studio.

Keep in mind, I am in no way affiliated with flourish studio. Their app is merely a quick and dirty way to create solid looking data visualization with no coding experience.

To format my data, the only other piece of software I will be using is python. However, you can do the same thing using typical spreadsheet software.

The example below shows the top-selling cars in the United States over the last 20 years.

Supplies

  • A Free Flourish Studio Account
  • Data
    • Excel, CSV, TSV, Etc...
  • Optional Python or Spreadsheet Software
    • Python:
      • Numpy
      • Pandas
    • Software:
      • Excel
      • LibreOffice

Step 1: Create a Free Account

Create a Free Account on Flourish Studio's website.

You can do so by visiting this link.

The only con to using their free service is that your data will be public. In order to keep your data private, you will need a paid account.

Step 2: Select the Bar Chart Race Template

Any of the three options will be sufficient.

The two most popular are the images on bars and the images with captions templates.

Step 3: Format Your Data

In my instructional video, I go over exactly how I went about formatting the data for this project. If you want to jump straight to the part where I discuss formatting, start at 1:20.

I also have a gist on github so you can copy the python notebook seen in the video.

If you would like the code and the data, the full repository is on my github page.

Step 4: Import the Data

If you followed the steps to format your data correctly. Creating the custom plot should be as simple as uploading your CSV file.

Optionally you can add image links to your dataset. You can do that in Flourish Studio's web application or you can add them to your CSV before uploading.

Step 5: Customize the Visualization

The customization options in Flourish are limited.

Some of the main things that I like to tweak are the font style, animation speed, and color palette.

For my visualization, I also toggled off the legend, and changed the bar height to fill space so that it would fit the page better.

If you are savvy with SVG and HTML animation, I am sure that you would be able to manually customize the way some of the elements are styled.

Step 6: Export

By selecting the full page preview button (see the element circled in red), it will open the visualization in its own webpage. You will have two options with the free version of flourish.

1. Right click on the page and click save as. Then you can download the visualization as webpage complete with a filename of your choosing. This will save a copy of the web page itself.

2. Use screen capture to record a video of the animation. This is what I normally do for my presentations. I prefer to share my animations in a video format versus embedding the raw code in a webpage.

Step 7: Thanks for Viewing!

Let me know if you have any questions or suggestions. Thanks!