From Plotly to Dash
1. From Plotly to Dash
Let's build on our Plotly knowledge by creating 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 that throughout this course, standard Python features like string interpolation are available.3. The main Dash imports
We start with the main Dash imports. Dash is the core class used to initialize the app itself. Dash core components contain all the different building blocks to create the app. We'll see one in this app, but cover many more in the course, such as user inputs!4. The app layout
Dash apps follow a specific structure. First, we create an app object using the Dash class. Note the capitalization. Then, we set the app layout using app-dot-layout. This is where most of your code will go as your apps grow. For now, we're just rendering one graph, but you'll learn how to add more later. We use the Graph component from Dash core components to display our Plotly figure. It takes a figure as input and renders it on the page. We can also give it an ID, which will be important later when we add interactivity to the dashboard.5. Running the app
The last part of the script launches the app. Dash apps must be run from the command line. For example, you would run an app file called my_app.py by typing python my_app.py. This doesn't work inside a notebook. The debug argument set to True will provide helpful feedback when testing.6. Our app
When launched, Dash starts a local server. In your terminal, you'll see a message with the server address. It will also warn that debug mode is on, which is fine for development. We can access the app via any web browser, such as Google Chrome. When you update the 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 DataCamp work a bit differently from standard Python exercises. This is because they allow us to launch fully functional dashboards. There is no pre-loaded code or data, so you will likely see several setup lines at the top of the exercises. All the code is read into the back-end engine and executed at once when you hit submit. You cannot read 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. As the course progresses, your apps will include more elements. Once you submit, you can use the expand button to fully explore the dashboard you've built.9. Let's practice!
Let's practice creating a Dash app with Plotly in Python.Create Your Free Account
or
By continuing, you accept our Terms of Use, our Privacy Policy and that your data is stored in the USA.