Building Your First Dash Application
00:00 Building your first Dash application. For development purposes, it’s useful to think of the process of building a Dash application in two steps. Firstly, define the looks of your application using the app’s layout.
Secondly, use callbacks to determine which parts of your app are interactive and what they react to. Create an empty file named
app.py in the root directory of your project, and then open it up in the editor of your choice. Here, you can see the first few lines of
app.py being entered.
In the first section of the code, you import required libraries and modules:
dcc, which is part of
html, which is also part of
pandas, which is imported with the traditional alias of
Each of these provides a building block for your application.
dash is used to initialize your application.
dcc allows you to create interactive components, such as graphs, dropdowns, and date ranges.
html lets you access HTML tags. And
pandas helps you read and organize the data.
01:22 In the next section of the code, you read the data and pre-process it for use in the dashboard. You filtered some of the data because the current version of your dashboard isn’t interactive, and the plotted values wouldn’t make sense otherwise.
02:11 Next, you’ll define the layout property of your application. This property dictates the look of your app. In this case, you’ll use a heading with a description below it and two graphs. Onscreen, you can see the code that defines it.
03:49 You’ll see two sets of components in almost every app. Dash HTML Components provides you with Python wrappers for HTML elements. For example, you could use this library to create elements such as paragraphs, headings, or lists. Dash Core Components provides you with Python abstractions for creating interactive user interfaces.
For example, to specify what goes inside the
<div> tag, you use the
children argument in
html.Div(). There are also other arguments in the components such as
id that refer to attributes of the HTML tags.
05:01 You’ll see how to use some of these properties to style your dashboard in the next section. The part of the layout shown on lines 15 to 22 is transformed into the HTML code that you see onscreen. This HTML code is rendered when you open your application in the browser.
Under the hood, Dash uses Plotly.js to generate graphs. The
dcc.Graph components expect a figure object or a Python dictionary containing the plot’s data and layout. In this case, you’re providing the latter. Finally, these last two lines of code run the application.
These lines make it possible to run the Dash application locally using Flask’s built-in server. The
debug=True parameter from
app.run_server() enables the hot-reloading option in your application.
06:32 This means that when you make a change to your app, it reloads automatically without you needing to restart the server. The full code for the application is included in the course files, but it’s always a good idea to enter the code yourself.
06:47 It will help with understanding what’s going on inside the code, and also remembering the syntax. It will also help when you come to create your own project from scratch, which, after all, is the main idea of this course.
Now it’s time to run your application. Open a terminal inside your project’s root directory and in the project’s virtual environment. Run Python
app.py, and then go to
localhost:8050, using your preferred browser, as seen onscreen.
07:33 The dashboard is far from visually pleasing, and you still need to add some interactivity to it. If you want to stop the app running, press Control + C in the terminal window, and it should shut down.
Become a Member to join the conversation.