Book Image

Interactive Dashboards and Data Apps with Plotly and Dash

By : Elias Dabbas
Book Image

Interactive Dashboards and Data Apps with Plotly and Dash

By: Elias Dabbas

Overview of this book

Plotly's Dash framework is a life-saver for Python developers who want to develop complete data apps and interactive dashboards without JavaScript, but you'll need to have the right guide to make sure you’re getting the most of it. With the help of this book, you'll be able to explore the functionalities of Dash for visualizing data in different ways. Interactive Dashboards and Data Apps with Plotly and Dash will first give you an overview of the Dash ecosystem, its main packages, and the third-party packages crucial for structuring and building different parts of your apps. You'll learn how to create a basic Dash app and add different features to it. Next, you’ll integrate controls such as dropdowns, checkboxes, sliders, date pickers, and more in the app and then link them to charts and other outputs. Depending on the data you are visualizing, you'll also add several types of charts, including scatter plots, line plots, bar charts, histograms, and maps, as well as explore the options available for customizing them. By the end of this book, you'll have developed the skills you need to create and deploy an interactive dashboard, handle complexities and code refactoring, and understand the process of improving your application.
Table of Contents (18 chapters)
1
Section 1: Building a Dash App
6
Section 2: Adding Functionality to Your App with Real Data
11
Section 3: Taking Your App to the Next Level

Getting to know the layout attribute

For the current figure that we are working on, let's add a title (for the whole figure), along with axis titles, to see how it works:

fig.layout.title = 'The Figure Title'
fig.layout.xaxis.title = 'The X-axis title'
fig.layout.yaxis.title = 'The Y-axis title'

As you can see, we are exploring the tree-like structure of our figure. There is a title attribute that falls directly under fig.layout, and there are also titles for fig.layout.xaxis and fig.layout.yaxis. To give you a sense of how detailed the available options are, Figure 3.3 shows some of the xaxis attributes that start with tick only:

Figure 3.3 – Some of the Figure object's layout.xaxis options

Figure 3.3 – Some of the Figure object's layout.xaxis options

Let's now look at the effect of the four lines of code we just added:

Figure 3.4 – The updated figure containing two traces, a legend, and titles

Figure 3.4 – The updated figure containing two traces, a legend, and titles

The three titles we have...