SJ Visualizer
Open source Python library to create engaging animated data visualizations for time series data.
GitHub: https://github.com/SjoerdTilmans/sjvisualizer
Supported Plot Types:
✔️ Bar Chart Race
✔️ Pie Chart Race
Video Tutorial
Example Code
The following content is also covered in the video above, but if written documentation is more your thing you can use the following content :)
End result
Setup
Before starting we need to tick off a couple of prerequisites.
1. Have python installed on your computer. Python is THE programming language for data analysts and data scientists. It can be downloaded from here: https://www.python.org/
2. We need to install the sjvisualizer module. The whl file can be downloaded from here: https://github.com/SjoerdTilmans/sjvisualizer/tree/main/dist
Save this file to a local directory and run in your command line:
pip install sjvisualizer-0.0.3-py2.py3-none-any.whl
To make sure it is installed successfully, you can type pip list in the command line. The sjvisualizer module should appear in the list.
Data Format
This python module will load data from Excel and expects it in a particular format. Is expects dates in the first column, each of the subsequent column headers are your data categories with the values for each date underneath. See the example below:
Code setup
In this section we create the most simple working example. Each section of the code is commented to explain what it does. In a later section we take a look at more advanced options like: adding icons, adding custom colors, and resizing the visualization.
WARNING: something funny happens with the indentation when you copy and past the code snippets, you might need to unindent the entire block a couple of times (select all, SHIFT+TAB in pycharm)
And there you have it! In just a couple of lines of code you can make an animated bar chart race!
I must say, this animation is pretty bare bones, the next sections will help you spice up the animation to share it on social media.
Adding a logo
It is very simple to add your custom logo to this animation. Simply paste the following code in your script. Make sure to update the file name accordingly.
Adding custom colors
Colors can be added from a dictionary file holding the desired color for each of your data categories. The key of the dictionary should be the name of the data category (header name) and the value should be the RGB value of the desired color.
To keep the code clean we can store this content in a separate json file (.json). We can read this file using the json module in python.
And we can pass this dictionary to our bar_race object to update the colors.
Adding custom images to each bar
To add custom images we do not need to do any coding! You might have noticed that the code has created an assets folder for us. You can drop image files (.png) in this folder and as long as they have the same name as our data categories, the script will automagically pick them up.
Changing the aspect ratio and position
We can change the aspect ratio and the position of our plots by tweaking the x_pos, y_pos, width, and height parameters when we create the bar_race object. When choosing the x_pos and y_pos values, keep in mind that pixel 0,0 is the top left pixel of your screen! Additionally, when tweaking these parameters, the result will depend on the screen resolution.
Adding additional images
We can easily add additional images in a similar way as we added our bar race to the canvas.
Adding additional visual elements to the canvas
This module uses TkInter in the background. This is the out-of-the-box GUI library that comes with python. An added benefit is that we can use standard TkInter functionality to add additional visual elements to our animation. The following code snippet shows how to add a decorative line to our animation.
Converting to a video
Now to convert this animation to a video you can simply record your screen. I use OBS Studio, which is a free open source screen recorder: https://obsproject.com/
Conclusion
You have learnt how to make a bar chart race with python! The result should look similar to the video at the top of the screen.
What is next? There are more settings explained in the full documentation at the end of this page, here you can find how to change the background color, how to change the font color, and how to change the number of bars displayed.
Please tag me on Instagram or LinkedIn if you use this to make your own visualization. I might reshare it with my followers.
The full code for a 1440p screen can be viewed below, and more examples are on GitHub: https://github.com/SjoerdTilmans/sjvisualizer-examples