I am back after a small break to bring you some more articles to get you started coding with Python. Before the break, we brought you a series of articles on web development using the Flask framework, and in the coming weeks we are going to move in a slightly different directly with web development by using a framework called Dash. If you have not heard of Dash before, it is a low code framework that allows you to rabidly build data applications and dashboards using Python. It is actually written on top of Plotly.js, Flask and React.js and is great for building and deploying data apps with a customised user interface
There is a lot you can do with Dash though and it does not just limit you to data science and presenting graphs. We will get you started with the basics of Dash in the coming weeks and hopefully show you how to make some pretty cool projects.
The Python code we are using will not be too full on, but if you are new to Python, you can always head over to our GitHub page and see the links to all our beginner Python tutorials we have set up over the past few months:
https://github.com/vincesesto/python_study
Dash apps are rendered in your web browser, allowing your apps to be cross-platform and able to be used on smartphones.
In the following, we will install Dash onto our system and create a basic application to give you an example of how it works before going into more detail in following articles.
So access you working environment and open a terminal. To install Dash, we simply use the pip3 three command as we have below to install it as part of our Python install:
pip3 install dash
When you install Dash, this also installs the Plotly graphics library which is under active development, so make sure you update it often to catch all changes that may be occurring.
Dash apps are composed of two parts. The first part is the "layout" which describes what the application looks like and the second part called "callbacks" describes the interactivity of the application.
As you will see in the following code, all we need to do is create a file called app.py and put our Dash code in it, and then run the code with "python3 app.py".
Our First Dash Example
It's about time we go started on a proper example to show you how it all fits together. Open up your development environment and start by creating a new file called app.py:
touch app.py
Open the file with your text editor and start the script off by importing dash, core components, html components, pandas for data analysys and plotly to create our graphs:
1 import dash
2 import dash_core_components as dcc
3 import dash_html_components as html
4 import pandas
5 import plotly.express as px
The dash_html_components library has a component for every HTML tag. You will add the html.H1(children='Hello My First Dash') component generate HTML element in your application. The dash_core_components describe higher-level components that are interactive and are generated with JavaScript, HTML, and CSS through the React.js library.
Enter the next lines that will set up the data for our dashboard. I collect Heart Rate data using an app and have collated a weeks work of data in the following. We create a Panda data from in line 9 showing days of the week, Heart Rate Variability values and Heart Rate values.
6
7 app = dash.Dash(__name__)
8
9 data_frame = pandas.DataFrame({
10 "Day": ["Mon", "Tue", "Wed", "Thur", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thur", "Fri", "Sat", "Sun"],
11 "Value": [9.5, 8.7, 8.8, 8.5, 10.0, 10.3, 9.6, 40.0, 40.0, 39.0, 39.0, 42.0, 41.0, 37.0],
12 "Measure": ["HR", "HR", "HR", "HR", "HR", "HR", "HR", "HRV", "HRV", "HRV", "HRV", "HRV", "HRV", "HRV"]
13 })
14
15 fig = px.bar(data_frame, x="Day", y="Value", color="Measure", barmode="group")
16
Each component is described entirely through keyword attributes. Dash is declarative: you will primarily describe your application through these attributes. In the following code, we then set up the HTML code as we discussed earlier, then graph components below:
17 app.layout = html.Div(children=[
18 html.H1(children='Hello My First Dash'),
19
20 html.Div(children='''
21 Dash: Tracking My HR/HRV Data.
22 '''),
23
24 dash.dcc.Graph(
25 id='example-graph',
26 figure=fig
27 )
28 ])
29
We then finish the script off with the name function below:
30 if __name__ == '__main__':
31 app.run_server(debug=True)
Save the file and run the app using the following command:
python app.py
You will be presented with the development server and you will then be able to open a browser and view your new dashbaord at the location http://127.0.0.1:8050/
We have an image of the dashboard on our GitHub account accompanying the code.
I know we have flown through things a little here, but we are just getting started. We are going to give you some more guidance on how to use Dash further in the coming weeks.
Found this post useful? Kindly tap the up vote button below! :)