1. From Plotly to Dash
Let's increase our Plotly knowledge with Dash and build our first Dash app.
2. A first Dash App
Here is the code for a Dash app.
Here we display the Plotly bar chart from the previous lesson, bar fig, in the Dash app. Let's walk through each part of the code.
Note throughout the course that standard Python functionality is possible, such as string interpolation.
3. The main Dash imports
Let's start with the main Dash imports. Dash is the main library that creates the app itself, as we'll soon see.
Dash core components contains all the different building blocks to create the app.
We'll see two in this app but cover many more in the course, such as user inputs!
4. The app layout
To create an app, we follow a certain structure. First, we create an app object using dash-dot-Dash. Note the capitalization on the second Dash.
Then we set the app layout using app-dot-layout. This is where a lot of code will go when we build bigger applications. For now, we will have one graph, but later we'll cover how to add multiple graphs.
This is done with the dash core components Graph object, which takes a Plotly figure object and renders it in the app for us.
We can also give it an id which will be important later when we add interactivity to the dashboard.
5. Running the app
This last bit of code on your screen runs the server.
To run a Dash app, we must run the script from the command-line. For example, running an app called 'my_app' as python my_app-dot-py. This is not suitable for running within a notebook.
The debug argument set to True will provide useful feedback when we are testing.
6. Our app
When run from the command-line, your app will be served on a local server, and you may see something like this in your terminal. The message lets you know that the app is being served, what server address to go to in your browser, and a warning that we set debug to True, and are therefore in testing mode.
We can access the app via any web browser such as Google Chrome.
When you update code locally in your script and hit save, you can refresh the browser to see the app change without re-running the code. However, please note that this is not how the exercises will run in the DataCamp code exercises.
7. Our app in the browser
This is what our app looks like in the browser.
8. Dash in DataCamp
Dash coding exercises on the DataCamp platform have a few differences to coding exercises you may have experienced before. This is the result of being able to launch fully functional dashboards in these exercises.
There is no pre-loaded code or data, so you will likely see a number of set-up lines at the top of exercises.
All the code is read into the back-end engine and executed at once when you hit submit. You cannot read in the code line-by-line.
These exercises have many more lines of code, so paying attention to line prompts will be important to direct your efforts.
The exercises include a name argument in the dash-dot-Dash constructor, which may not be needed when you repeat exercises locally.
Finally, these fully functional dashboards will have quite a few elements as the course progresses. Once you hit submit and the code is run, you will likely want to expand the viewer using this button to explore the dashboard you create in the exercises.
9. Let's practice!
Let's practice creating a Dash app with Plotly in Python.