How I developed my Web App for Data Visualization with Python | by Papa Moryba Kouate | Towards Data Science

Introduction
I am not a web developer, but as a data analyst I think it is very useful to have a web application for data visualization where you can deploy your data and show the world your results. So, I decided to develop my own data dashboard in which I will upload my future results. You can see it here. For a better visualization of graphs I suggest you to look my Web App with your PC not with your smartphone.
In this article, I’d like to give you some inputs to create your own web app for data visualization.
For what concerns the techniques to develop it, the only requirement is to know the markup language HTML and the programming language Python.
You need not know CSS or JavaScript. In fact, to develop my web app I used Flask as a web framework and Bootstrap as a front-end framework.
If you need some suggestions for structuring your repository, you can take as an example my repository on GitHub.
During this article, I will focus on all the steps you need to deploy your Web app.
For the deployment I used a Linux terminal that I think it is very comfortable for development. If your OS is windows, you can go to this link and see the counterparts commands.
The first thing you have to do when you are in your terminal is to update your Anaconda version. In this link you can find a list of many versions.
Use curl command to download the last version of Anaconda.
curl -O https://repo.anaconda.com/archive/Anaconda3-2020.02-Linux-x86_64.sh
Press Enter until the end. Then, you have to say yes for the license agreement.
When you arrive at the point that you can see below, follow the first instruction and press Enter or in alternative you can follow the third instruction and select a location different from the default location.
Out:
Anaconda3 will now be installed into this location:/home/your_name/anacond  - Press ENTER to confirm the location  - Press CTRL-C to abort the installation  - Or specify a different location below[/home/yor_name/anaconda3]>>>
When the process finished, type yes to confirm the path where Anaconda will be installed. After that, you can activate your installation in the following way.
source ~/.bashrc
In this part you have to create a virtual environment. Before starting, be sure you are into the folder that contains the files of your web app. So use this command to create your environment.
python3 -m venv my_environment
Then you can active it by using this command:
source my_environment/bin/activate
Now you are in your environment. In my personal case to realize my web app I installed flask, pandas, Plotly and gunicorn with the following command:
pip install flask pandas plotly gunicorn
Now, you need to register on the cloud platform Heroku in this link.
Then, install all the command-line tools of Heroku in this way:
curl https://cli-assets.heroku.com/install-ubuntu.sh | sh
Login and apply with this simple command:
heroku login
You have to insert the username and the password of your Heroku profile.
The next step is to create a file which aim is to tell Heroku what to do when you are starting your web app. In my file I have put the following state:
web gunigorn app:app
Then, specify the libraries that are going to be needed. So, you have to put all the information in a file called requirements.txt that permit Heroku to know where to look. The command is:
pip freeze > requirements.txt
Now we have to initialize the repository:
git init .git add .git commit -m 'first commit'
You can make the configuration by specifying your email address and your name in this way:
git config user.email “username@something.com”git config user.name “Your Name”
The last step is to create your web app with the following command.
heroku create name_of_your_web_app
Push the files by using this command:
git push heroku master
Every time you want to update your data on your web app, remember to follow the following simple indications.
Go into your environment by using this command:
source my_environment/bin/activate
Then, use these commands to update your Data Dashboard
pip freeze > requirements.txtgit add .git commit -m “make some changes”git push heroku master
This is a simple way that permits you to have your own data dashboard and show your results to everyone in the world and I think that is amazing.
If you meet some problems of creating your web app, feel free to write me privately or in the comments.
We're so pumped to have you!

Already have an account? Sign In

We can also get in touch in my telegram group Data Science for Beginners.