Interactive Dashboards and Data Apps with Plotly and Dash E-Book

Elias Dabbas

• Herausgeber: Packt Publishing
• Kategorie: Fachliteratur
• Sprache: Englisch

Veröffentlichungsjahr: 2021

Beschreibung

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.

Leseprobe

Interactive Dashboards and Data Apps with Plotly and Dash

Harness the power of a fully fledged frontend web framework in Python – no JavaScript required

Elias Dabbas

BIRMINGHAM—MUMBAI

Interactive Dashboards and Data Apps with Plotly and Dash

Copyright © 2021 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing or its dealers and distributors, will be held liable for any damages caused or alleged to have been caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

Group Product Manager: Kunal Parikh

Publishing Product Manager: Reshma Raman

Senior Editor: David Sugarman

Content Development Editor: Joseph Sunil

Technical Editor: Devanshi Deepak Ayare

Copy Editor: Safis Editing

Project Coordinator: Aparna Nair

Proofreader: Safis Editing

Indexer: Manju Arasan

Production Designer: Nilesh Mohite

First published: May 2021

Production reference: 2250521

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham

B3 2PB, UK.

ISBN 978-1-80056-891-4

www.packt.com

Contributors

About the author

Elias Dabbas is an online marketing and data science practitioner. Combining both fields, He produces open source software for building dashboards and data apps, as well as software for online marketing. He is the author and maintainer of advertools, a Python library that provides various digital marketing tools, with a focus on SEO, SEM, crawling, and text analysis.

About the reviewer

Leonardo Ferreira is an accountant and self-taught data scientist with the title of Kaggle Grandmaster and also acts as a data platform developer. He started his studies in data science in 2017 and started working in the field a few months after starting his apprenticeship. Since then, he has worked for large companies in Brazil and worldwide, with more than 100 open source projects adding GitHub, Kaggle, and their portfolio of web applications. He is currently a Top Rated Plus freelancer on the Upwork platform, where he has already carried out more than 20 data science and data platform projects. He is also enthusiastic about solutions on the Cardano blockchain.

Table of Contents

Preface

Section 1: Building a Dash App

Chapter 1: Overview of the Dash Ecosystem

Technical requirements

Setting up your environment

Exploring Dash and other supporting packages

The different packages that Dash contains

Understanding the general structure of a Dash app

Creating and running the simplest app

Adding HTML and other components to the app

Adding HTML components to a Dash app

Learning how to structure the layout and managing themes

Themes

Grid system and responsiveness

Prebuilt components

Encoded colors

Adding Dash Bootstrap components to our app

Summary

Chapter 2: Exploring the Structure of a Dash App

Technical requirements

Using Jupyter Notebooks to run Dash apps

Isolating functionality for better management and debugging

Creating a standalone pure Python function

The id parameter of Dash components

Dash inputs and outputs

Determining your inputs and outputs

Specifying your callback function

Implementing the callback

Incorporating the function into the app

Properties of Dash's callback functions

Summary

Chapter 3: Working with Plotly's Figure Objects

Technical requirements

Understanding the Figure object

Getting to know the data attribute

Getting to know the layout attribute

Interactively exploring the Figure object

Configuration options for the Figure object

Exploring the different ways of converting figures

Converting figures into HTML

Converting figures into images

Plotting using a real dataset

Data manipulation as an essential part of the data visualization process

Making the chart interactive with a callback function

Adding the new functionality to our app

Theming your figures

Summary

Chapter 4: Data Manipulation and Preparation, Paving the Way to Plotly Express

Technical requirements

Understanding long format (tidy) data

Plotly Express example chart

Main attributes of long format (tidy) data

Understanding the role of data manipulation skills

Exploring the data files

Melting DataFrames

Pivoting DataFrames

Merging DataFrames

Learning Plotly Express

Plotly Express and Figure objects

Creating a Plotly Express chart using the dataset

Adding new data and columns to our dataset

Summary

Section 2: Adding Functionality to Your App with Real Data

Chapter 5: Interactively Comparing Values with Bar Charts and Dropdown Menus

Technical requirements

Plotting bar charts vertically and horizontally

Creating vertical bar charts with many values

Linking bar charts and dropdowns

Exploring different ways of displaying multiple bar charts (stacked, grouped, overlaid, and relative)

Creating the income share DataFrame

Incorporating the functionality into our app

Using facets to split charts into multiple sub-charts – horizontally, vertically, or wrapped

Exploring additional features of dropdowns

Adding placeholder text to dropdowns

Modifying the app's theme

Resizing components

Summary

Chapter 6: Exploring Variables with Scatter Plots and Filtering Subsets with Sliders

Technical requirements

Learning about the different ways of using scatter plots: markers, lines, and text

Markers, lines, and text

Creating multiple scatter traces in a single plot

Mapping and setting colors with scatter plots

Discrete and continuous variables

Using color with continuous variables

Manually creating color scales

Using color with discrete variables

Handling over-plotting and outlier values by managing opacity, symbols, and scales

Controlling the opacity and size of markers

Using logarithmic scales

Introducing sliders and range sliders

Customizing the marks and values of sliders

Summary

Chapter 7: Exploring Map Plots and Enriching Your Dashboards with Markdown

Technical requirements

Exploring choropleth maps

Utilizing animation frames to add a new layer to your plots

Using callback functions with maps

Creating a Markdown component

Understanding map projections

Using scatter map plots

Exploring Mapbox maps

Exploring other map options and tools

Incorporating an interactive map into our app

Summary

Chapter 8: Calculating the Frequency of Your Data with Histograms and Building Interactive Tables

Technical requirements

Creating a histogram

Customizing the histogram by modifying its bins and using multiple histograms

Using color to further split the data

Exploring other ways of displaying multiple bars in histograms

Adding interactivity to histograms

Creating a 2D histogram

Creating a DataTable

Controlling the look and feel of the table (cell width, height, text display, and more)

Adding histograms and tables to the app

Summary

What we have covered so far

Section 3: Taking Your App to the Next Level

Chapter 9: Letting Your Data Speak for Itself with Machine Learning

Technical requirements

Understanding clustering

Finding the optimal number of clusters

Clustering countries by population

Preparing data with scikit-learn

Handling missing values

Scaling data with scikit-learn

Creating an interactive KMeans clustering app

Summary

Chapter 10: Turbo-charge Your Apps with Advanced Callbacks

Technical requirements

Understanding State

Understanding the difference between Input and State

Creating components that control other components

Allowing users to add dynamic components to the app

Introducing pattern-matching callbacks

Summary

Chapter 11: URLs and Multi-Page Apps

Technical requirements

Getting to know the Location and Link components

Getting to know the Link component

Parsing URLs and using their components to modify parts of the app

Restructuring your app to cater to multiple layouts

Displaying content based on the URL

Adding dynamically generated URLs to the app

Incorporating the new URL interactivity into the app

Summary

Chapter 12: Deploying Your App

Technical requirements

Establishing the general development, deployment, and update workflow

Creating a hosting account and virtual server

Connecting to your server with SSH

Running the app on the server

Setting up and running the app with a WSGI

Setting up and configuring the web server

Managing maintenance and updates

Fixing bugs and making changes

Updating Python packages

Maintaining your server

Deploying and scaling Dash apps with Dash Enterprise

Initializing the app

Building your application (optional)

Preparing your project folder

Deploying your application on Dash Enterprise

Summary

Chapter 13: Next Steps

Technical requirements

Expanding your data manipulation and preparation skills

Exploring more data visualization techniques

Exploring other Dash components

Creating your own Dash component

Operationalizing and visualizing machine learning models

Enhancing performance and using big data tools

Going large scale with Dash Enterprise

Dash Design Kit

App Manager

Snapshot Engine

Better performance with Job Queue

Corporate security

Consulting services

Summary

Other Books You May Enjoy

Section 1: Building a Dash App

This section provides a general overview of the Dash ecosystem, and shows how to get started with a minimal functional app.

This section comprises the following chapters:

Chapter 1, Overview of the Dash EcosystemChapter 2, Exploring the Structure of a Dash AppChapter 3, Working with Plotly's Figure ObjectsChapter 4, Data Manipulation and Preparation - Paving the Way to Plotly Express

Chapter 1: Overview of the Dash Ecosystem

One of the few constants in our work with data is the amount of change in the volume, sources, and types of data that we deal with. Being able to quickly combine data from different sources and explore them is crucial. Dash is not only for exploring data; it can be used for almost all phases of the data analysis process, from exploration to operational production environments.

In this chapter, we will get an overview of Dash's ecosystem and focus on building the layout, or the user-facing part, of the app. By the end of the chapter, you will be able to build a running app with almost any visual component you want, but without interactivity.

The following topics will be covered:

Setting up your environmentExploring Dash and other supporting packagesUnderstanding the general structure of a Dash appCreating and running the simplest appAdding HTML and other components to the appLearning how to structure the layout and managing themes

Technical requirements

Every chapter will have slightly different requirements, but there are some that you will need throughout the book.

You should have access to Python 3.6 or higher, which can be easily downloaded from https://www.python.org, as well as a text editor or an integrated development environment (IDE) so you can edit code.

For this chapter, we will be using Dash, Dash HTML Components, and Dash Bootstrap Components, which can be installed together with all other required packages by following the instructions in the following section. All code and data required for this book can be downloaded from the book's GitHub repository, which can be found athttps://github.com/PacktPublishing/Interactive-Dashboards-and-Data-Apps-with-Plotly-and-Dash. As I just mentioned, the following section will show in detail how to get started with your setup.

The code files of this chapter can be found on GitHub at https://github.com/PacktPublishing/Interactive-Dashboards-and-Data-Apps-with-Plotly-and-Dash/tree/master/chapter_01.

Check out the following video to see the Code in Action at https://bit.ly/3atXPjc.

Setting up your environment

With the fast pace of change in all the packages used in the book, you will most likely come across some differences in functionality, so in order to reproduce the exact outcomes described in the book, you can clone the book's repository, install the packages used (in the specified versions), and use the included dataset. From the command line, go to a folder in which you want to build the project and do the following:

Create a Python virtual environment in a folder called dash_project (or any other name you want). This will also create a new folder with the name you chose:

python3 –m venv dash_project

Activate the virtual environment.

On Unix or macOS, run this:

source dash_project/bin/activate

On Windows, run this:

dash_project\Scripts\activate.bat

Go to the created folder:

cd dash_project

Clone the book's GitHub repository:

git clone   https://github.com/PacktPublishing/Interactive-Dashboards-and-Data-Apps-with-Plotly-and-Dash

You should now have a file containing the required packages and their versions called requirements.txt. You can install those packages by going to the repository's folder and running the install command as follows:

cd Interactive-Dashboards-and-Data-Apps-with-Plotly-and-Dash/

pip install -r requirements.txt

You should find a copy of the dataset in the data folder, which was downloaded from this link: https://datacatalog.worldbank.org/dataset/poverty-and-equity-database. You can get the latest version if you want, but as with packages, if you want to get the same results, it's better to work with the provided dataset.

In order for Plotly figures and apps to be displayed in JupyterLab, you will need to install Node.js, which can be install from https://nodejs.org.

You will also need to install the JupyterLab Plotly extension, which can be done by running the following from the command line in your virtual environment:

jupyter labextension install [email protected]

Note that the version number at the end should correspond to the version of Plotly that you are running. You can replace the preceding version numbers if you want to upgrade (making sure to upgrade the Plotly Python package as well).

Once you have run the preceding code, you should have everything you need to follow along. You will see that each chapter of this book builds on the previous one: we will be building an app that adds more and more functionality and complexity as we go through the chapters.

The main objective is to put you in a practical setting as much as possible. In general, it is straightforward to create any standalone Dash component, but it gets more challenging when you already have a few components in a running app. This becomes clear when you have to decide how to change the layout to accommodate new changes and how to refactor code, focusing on the details without losing sight of the big picture.

Now that the environment has been established, let's get an overview of Dash.

Exploring Dash and other supporting packages

Although not strictly necessary, it's good to know the main components that are used to make Dash and its dependencies, especially for more advanced usage, and in order to know how and where to get more information:

Figure 1.1 – What Dash is made of

Note