Transform data into visualization and deploy it to the cloud

Blobs by Cristi Goia on Unsplash

In this article I will share with you a way to easily create interactive and animated visualisations and make them accessible to the audience. I will describe step by step how to create, deploy to the cloud and share an interactive visualization web application made with Plotly, powered by Streamlit and deployed on Heroku.

This interactive animation showing world life expectancy against GDP per capita from 1952 to 2007 was inspired by Hans Rosling visualization demo and Giles McMullen-Klein’s youtube video.

The aim of my approach is on the one hand to share this visualization with as many people as possible by deploying it on Heroku and on the other hand to demonstrate how easy it is to build relevant visualization from raw data in a way that people both enjoy and understand.

Those who want to know more about the code and files that allowed the deployment of the application can refer to my GitHub repository here.

1- Let’s first have a look on the raw data we would like to transform :

At first glance, analysing the above data from gapminder and understanding the evolution of life expectancy and wealth per country year by year is not immediate. An interesting idea would be to create an animated and interactive visualisation of this data year by year.

This is exactly what we are going to do using Plotly for the visualization and Streamlit which is an awesome open-source framework that makes it easy to create and share beautiful, custom web apps for machine learning and data science.

2 - Let’s write the code for the visualization web app :

You need first to have streamlit and plotly installed in your environment.

pip install streamlit plotly

Now, we are able to run the visualization web app locally from the directory containing the file “life_gdp_animation_webapp.py”, just typing this command line in the terminal :

streamlit run life_gdp_animation_webapp.py

Image by author

We are now able to interact with this animated visualization. But this can only be done locally. So the question is : how can we share it with as many people as possible, or at least with relevant people?

This is where Heroku comes into play.

3- Deploying the web app on Heroku :

Heroku is a platform as a service (PaaS) that can be used to run applications in the cloud, it covers deployment, management and scaling of applications.

There are four essential components required to launch our streamlit application on Heroku. So we need to make sure we have the following files in our application folder:

1. Procfile
2. requirements.txt
3. setup.sh
4. our_application.py

Note that working with Heroku through the Heroku CLI is possible but in this article we will do it through this Github repository where all needed files for application deployment are stored.

In a nutshell, at this stage we have written the application code, created the files needed to deploy the application and stored everything in our Github repository mentioned above.

Next steps will be performed from the Heroku Dashboard on our web browser.

Step 1: Select Create new app through the dashboard

Image by author

Step 2: type your App name & hit create app

Image by author

Note that above is an example of an application name, the actual application name I created is “life-expectation-gdppca-viz”.

Step 3: once you hit “Create app” button the following tab opens

Image by author

Step 4: notice that “Deploy” tab is selected and select Github deployment method

Image by author

Step 5: hit “search” and then “connect” the GitHub repository where app files are stored.

Image by author

Image by author

Step 6: Hit “Deploy branch” in Manual deploy section

Image by author

Notice that enabling automatic deploys under the “Automatic deploys” section will automatically push the latest master branch from your GitHub whenever it is updated with a new version.

Image by author

Now you just need to click “View” to see your visualization application and interact with it. You can also share the URL of your app with the right people. Here is mine : https://life-expectation-gdppca-viz.herokuapp.com/.

Those who want to get a glimpse of visualisation in action can take a look at this very short video below:

Conclusion:

I hope you have enjoyed reading this article where I have described an easy way to deploy a visualization web application on the cloud, of course this can be generalised to other web applications and in particular machine learning applications that can be built efficiently with Streamlit.

Note : do not hesitate to use my codes and files in Github.

Should you have any questions or you would like to stay in touch, feel free to contact me on LinkedIn: Reda Merzouki

Thank you for reading !