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

We are now going to tackle one of the most versatile, useful, and ubiquitous types of charts, the scatter plot. As its name implies, we basically scatter markers (which can be points, squares, circles, bubbles, or other symbols) on the Cartesian plane, where mainly their horizontal and vertical distances express the values they represent. Other visual attributes, such as size, color, and symbol, might be used to express other attributes, as we saw in some previous examples. As most of the fundamentals regarding figures and creating charts have been covered, we won't be spending much time on that, focusing instead on the particular details and options available to scatter plots. We will also explore and work with sliders as a new interactive component. Let's start right away, but first, here are the topics that we will be covering:

• Learning about the different ways of using scatter...

Technical requirements

The same tools that we used in the previous chapter will be used here. We will also focus a little on Plotly's graph_objects module for creating scatter plots, because it provides other tools and is very useful when customizing our plots further. The packages to use are Plotly, Dash, Dash Core Components, Dash HTML Components, Dash Bootstrap Components, pandas, and JupyterLab.

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_06.

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

We start by exploring the different ways, or the different things, if you want, that we can plot with scatter plots.

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

We have a number of different options when using graph_objects to create scatter plots, as mentioned in the introduction, so we will be exploring it together with Plotly Express. To give you an idea of the versatility of the available scatter plots, the following code extracts all the scatter methods available to the Figure object, as well as those available in Plotly Express:

import plotly.graph_objects as go
import plotly.express as px
fig = go.Figure()
[f for f in dir(fig) if 'scatter' in f]
['add_scatter',
 'add_scatter3d',
 'add_scattercarpet',
 'add_scattergeo',
 'add_scattergl',
 'add_scattermapbox',
 'add_scatterpolar',
 'add_scatterpolargl',
 'add_scatterternary']
[f for f in dir(px) if 'scatter' in f]
['scatter',
 'scatter_3d',
 'scatter_geo',
 &apos...

Creating multiple scatter traces in a single plot

We will mostly be focusing on using Plotly Express as much as possible, because of its convenience, and the other advantages previously discussed in Chapter 4, Data Manipulation and Preparation - Paving the Way to Plotly Express. It's still very important to know how to work with Figure objects as you will encounter many situations where you will need to work with them, especially when you have a lot of customizations to make. Also, keep in mind that although the most important chart types are supported by Plotly Express, not all of them are.

Let's extend the preceding chart with traces of other countries and compare the two approaches. We start with the graph_objects module's Figure object:

1. Create a countries list to filter with:

   countries = ['Argentina', 'Mexico', 'Brazil']

2. Create a subset of poverty, which we will call df, where the values of the Country Name...

Mapping and setting colors with scatter plots

Colors are extremely important in conveying and expressing information about our charts. It is also a very big topic, and a full discussion is beyond the scope of this book. We will focus on colors for two types of variables – discrete and continuous. We will also tackle two ways of using colors in our charts: mapping variables to colors, and manually setting our colors.

We start by exploring the differences between the two types of variables.

Discrete and continuous variables

Simply speaking, continuous variables are the ones that can take an infinite number of possible values in a certain range of numbers. For example, population is a number that can take any value, based on the number of people living in a certain country. Continuous variables are typically numbers (integers or real numbers). Height, weight, and speed are other examples as well.

Discrete variables, on the other hand, are variables that can take the...

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

Let's say we are now interested in seeing the relationship between our variable and population for the same year that we have been working on. We want to have Population, total on the x-axis, and perc_pov_19 on the y-axis.

We first create a subset of poverty where year is equal to 2010, and is_country is True, and sort the values using Population, total:

df =\
poverty[poverty['year'].eq(2010) & poverty['is_country']].sort_values('Population, total')

Let's now see what it looks like when we plot those two variables. Here is the code:

px.scatter(df,
           y=perc_pov_19,
           x='Population, total',
           title=' - '.join([perc_pov_19, '2010&apos...

Introducing sliders and range sliders

The Slider and RangeSlider components are basically circles that users can drag horizontally or vertically to set or change a certain value. They are typically used for setting continuous values, as their appearance and dragging functionality are a natural fit for that. But this is not a requirement as we can use them for categorical/discrete values as well. We have seen that we have three levels of our perc_pov_ metrics, and we know that we have all the years in our dataset to choose from. We now want to create two sliders. One allows users to select the level of poverty that they want to analyze, and the other allows them to select the year. Each combination of selections will create a different subset, and result in a different chart. Figure 6.21 shows the top part of the end result that we will be working toward:

Figure 6.21 – Two sliders controlling a chart

As you can see, the new functionality requires...

Customizing the marks and values of sliders

The simplest way to create these is by using a dictionary: {0: '$1.9', 1: '$3.2', 2: '$5.5'}. They keys will be used as the value attribute, and the values of the dictionary are what the user will see for each poverty level. This will suffice for our case, and we can use it as such.

We optionally have the chance to customize the style of our labels, which can take any CSS attribute as a dictionary. If you look at Figure 6.21, you can see that the marks (numbers) of the two sliders have a very light color, and they might give the impression that they belong to the same slider. We can improve this by setting their colors to a dark color. We can also set a bold font for the indicator slider. This will help distinguish them from the years, and it will also emphasize their uniqueness. Years are easy to immediately grasp, but users are most likely not familiar with the levels of poverty tracked in the dataset....

Summary

We introduced scatter plots and saw how to create them, both using the graph_objects module, and using Plotly Express. We saw how to create multiple traces and tried different approaches for that. We then discussed color mapping and setting and explored how different the process is for continuous and discrete (categorical) variables. We saw different scales – sequential, diverging, and qualitative. We also saw how we can set our own colors, sequences, and scales. We also tackled some issues that arise when we have outliers, and when we have over-plotting. We experimented with opacity, changing symbols, and marker sizes, as well as using logarithmic scales to make our charts more readable. We also introduced sliders and learned how they work, and created two sliders that work together to generate charts expressing three values (as opposed to two values previously). We then created a callback function that managed those interactions and integrated it into our app.

By...