Bar Chart Race Data Visualization

12,805

8

3

Introduction: Bar Chart Race Data Visualization

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!

Be the First to Share

    Recommendations

    • Pi Day Speed Challenge

      Pi Day Speed Challenge
    • Trash to Treasure Contest

      Trash to Treasure Contest
    • Microcontroller Contest

      Microcontroller Contest

    3 Comments

    0
    kk3297
    kk3297

    3 months ago

    Hi can you please Let me know about Racing Bar Charts Do these video channels get Monetize By YouTube

    0
    yuvrajan155
    yuvrajan155

    8 months ago on Step 6

    It is asking me to pay monthly charges. How can I get this for free?

    1
    187sang
    187sang

    Question 11 months ago on Step 7

    Which screen recorder software do you use to record the animation?
    I would be very grateful and thankful if you could answer me.