Build your own Covid 19 Tracker with Dash , plotly , python part-1  : represent  data in  choropleth
Tags: python, webdev, sideprojects
Published: 2020-05-31 17:43:38

I would greatly appreciate it if you kindly give me some feedback on this
[part 2 is here](https://dev.to/abderrahmanemustapha/build-your-own-covid-19-tracker-with-dash-plotly-python-part-2-add-cities-info-18p9) 💥💥

in this post will show  how  to create a simple dashboard to follow the progress of the covid19🚑 virus and its spread 

our app will look like this in the end 😀😀
![enter image description here](https://lh3.googleusercontent.com/pw/ACtC-3eXl71Sw9a-LmhicCsk9ONx_eqt09wRT-3uVaWn7lFyp6DXBVd7ie7_tPyqwp_h-B-ApW55Fo8_-QppYNI8apgZk3lUQfdp49ah-uEhS9IOJPAHbwxBQ6tMgbrMVpMtNWI-1Yle7iieSv8iKMP6wmyT=w1906-h821-no?authuser=0)

# Dash : 
**Dash** is **Python**  web framework for building analytical web application  , wich use flask on the server side , react for the front end ,and plotly.js for the data visualisation
if you want learn more about dash 
check  the  this [post on data camp ](https://www.datacamp.com/community/tutorials/learn-build-dash-python)



and you know **Truth can only be found in one place: the code** so lets start coding
![enter image description here](https://cdn.pixabay.com/photo/2016/10/16/16/33/dual-screen-1745705_1280.png)

## Coding part 💻
### setup our dash app 🚩

 install dash and plotly  and pondas by typing 
```dash
pip install dash dash-renderer dash-html-components dash-core-components plotly pandas
```

then lets create a directory for our project and  name it ** covid19Dash **
```bash
 mkdir covid19Dash && cd covid19Dash
```

inside this directory create  **app.py** file  
```bash
 touch app.py
```

and add this code to it
```python
#covid19Dash/app.py
#dash imports
import dash
import dash_core_components as dcc
import dash_html_components as html
#end of dash imports

##  HTML code ## 
app.layout = html.Div(children=[ "hello there"])
### end of HTML ##

#init the app and server
app = dash.Dash()
server = app.server
```
now run 
``` bash
python app.py
```
 and check this link  http://127.0.0.1:8050/ if everything is running fine lets move to the next part


🧭 we need to create another python file  with name of **data.py** this files will container logic about how to extract and use our data 

```bash
touch data.py
```


inside the data.py file lets define a function to extract data from APIs with three arguments **api_url** , **field** and  the name of the csv file **file_name** that contains the data

```python
#covid19Dash/data.py

# don't forget to import this
import pandas as pd
import json
import requests
######


def get_api_data(api_url, field_name, file_name):
    data = requests.get(api_url)
    results = pd.DataFrame(data.json()[field_name])

    #save the result in the data folder
    results.to_csv('data/'+file_name+'.csv', sep=',' )

    # return API data
    return results
```


to get the data  we are using 2 APIs 

[the first one covid19api ]('https://api.covid19api.com/summary')  containe data  about the countries total cases , new cases, total deaths , .... and more  

[the second one trackcorona]('https://www.trackcorona.live/api/cities') containe data about the citys in each country (total cases, total deaths , total recovered)

now lets get and save the data add this  lines of code to data.py
```python

#covid19Dash/data.py
### get countries data
get_api_data(
        'https://api.covid19api.com/summary', # API link
        'Countries', #field name
        'countries', #file name
)
         
```


by running **python data.py** our countries.csv file will look like this one below

![countries data file](https://lh3.googleusercontent.com/pw/ACtC-3fJR9VZGOoQAjzvlbCB_OH7PJPN8zh3Sqff-u6GEIh-GKyfIcZZt8vBVEp2s1Rg4AtQa2ciyk-sexcbtoz7yC-HelQZZhX51p45wlFIwMAT_dqqqsVQKk5Oei879z4tq0gKL5EtnkfFqVOCLg1FyazX=w1288-h747-no?authuser=0)


😎 lets  visualize the data we need to create a new file charts.py , add this lines to it 

```python
#covid19Dash/charts.py
#librarys
import json
#plotly and dash
import plotly.express as px
```

define a **viz_earth_data** function   which is going to get countries data from our csv file and plot it on choropleth

```python
#covid19Dash/charts.py
def viz_earth_data(df=open_csv("data/countries.csv")):
    
    fig = px.choropleth( df, locations="Country",
                        color="TotalConfirmed", 
                        hover_name="Country", 
                        hover_data=[ 'CountryCode',
                            'NewConfirmed','TotalConfirmed',
                            'NewDeaths','TotalDeaths','NewRecovered',
                            'TotalRecovered','Date', 'Slug'
                                   ], 
                        locationmode="country names",
                        projection="orthographic",
                        color_continuous_scale=px.colors.sequential.dense,
                        height=600
                    
                       ).update_layout(clickmode='event+select')
   

    return fig
``` 


now lets go back to our **app.py**  and import  the viz_earth_data function

```python 
from charts import viz_earth_data 

```

after this  add the graph to our HTML layout 

```python
app.layout = html.Div(children=[
     dcc.Graph(
            id='earth-graph', #graph id
            figure = viz_earth_data() , #this will show the earth graph 
            config={
              'displayModeBar': False
            }                       
        ),
])
```


now run python app.py  and open http://127.0.0.1:8050/  in  your browser ,  you will see something like this 

![earth graph photo](https://lh3.googleusercontent.com/pw/ACtC-3dTD75o5IRvkQ4C-GBXFgZqR6Hpu9kEu_fT5SnNbPHrgxl7g5EzpGeA4n36j7vFmh2xovYtRXp3NhB1UPUZznsDBO4PhafDgxBBeRYQs7tk8D28-ruzKq9Qf1nVsf4NoX7bXchIZkz_mjwP4x8U-OdM=w1196-h784-no?authuser=0)


#[Part 2 is here](https://dev.to/abderrahmanemustapha/build-your-own-covid-19-tracker-with-dash-plotly-python-part-2-add-cities-info-18p9) 💥💥