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

One of the main advantages of using Dash is that it allows us to create fully interactive data, analytics, and web apps and interfaces, using pure Python, without having to worry about HTML, CSS, or JavaScript.

As you can see in Figure 1.1, Dash uses Flask for the backend. For producing charts, it uses Plotly, although it is not strictly required, but it is the best-supported package for data visualization. React is used for handling all components, and actually a Dash app is rendered as a single-page React app. The most important things for us are the different packages that we will be using to create our app, which we will be covering next.

Tip

For people who are familiar with or invested in learning Matplotlib, there is a special set of tools to convert Matplotlib figures to Plotly figures. Once you have created your figure in Matplotlib, you can convert it to Plotly with one command: mpl_to_plotly. As of the time of this writing, this is supported for Matplotlib<=3.0.3 only. Here is a full example:

%config InlineBackend.figure_format = 'retina'
import matplotlib.pyplot as plt
from plotly.tools import mpl_to_plotly
mpl_fig, ax = plt.subplots()
ax.scatter(x=[1, 2, 3], y=[23, 12, 34])
plotly_fig = mpl_to_plotly(mpl_fig)
plotly_fig

The different packages that Dash contains

Dash is not one big package that contains everything. Instead, it consists of several packages, each handling a certain aspect. In addition, as we will see later, there are several third-party packages that are used, and the community is encouraged to develop their own functionality by creating special Dash packages.

The following are the main packages that we will mostly be using in this chapter, and we will explore others in later chapters:

• Dash: This is the main package, which provides the backbone of any app, through the dash.Dash object. It also provides a few other tools for managing interactivity and exceptions, which we will get into later as we build our app.
• Dash Core Components: A package that provides a set of interactive components that can be manipulated by users. Dropdowns, date pickers, sliders, and many more components are included in this package. We will learn how to use them to manage reactivity in Chapter 2, Exploring the Structure of a Dash App, and will be focusing on how to use them in detail in Part 2 of the book.
• Dash HTML Components: This package provides all the available HTML tags as Python classes. It simply converts Python to HTML. For example, you can write dash_html_components.H1('Hello, World') in Python, and it will be converted to <h1>Hello, World</h1> and rendered as such in the browser.
• Dash Bootstrap Components: This is a third-party package that adds Bootstrap functionality to Dash. This package and its components take care of a lot of options related to layouts and visual signals. Laying out elements side by side or on top of one another, specifying their sizes based on the browser's screen size, and providing a set of encoded colors for better communicating with users are some of the benefits of using it.

  Tip

  The recommended way to install the main packages of Dash is to simply install Dash, and it will automatically handle installing the other packages, ensuring that they get installed with the correct versions. Simply run pip install dash from the command line. For upgrades, that would be pip install dash --upgrade.

We will now take a brief look at the general structure of a typical Dash app, after which we will start coding.