Data Visualization

Chapter 4: From Static to Interactive Visualization

Copyright © 2020 Packt Publishing, Inc. All Rights Reserved. This content is based on book Interactive Data
Visualization with Python: Present your data as an effective and compelling story, 2nd Edition Illustrated Edition, by
Abha Belorkar, Sharath Chandra Guntuku, Shubhangi Hora, Anshu Kumar.
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 authors, nor Packt Publishing, and its dealers and distributors will be held liable for any damages
caused or alleged to be caused directly or indirectly by this book.
Outline

• Introduction
• Static versus Interactive Visualization
• Applications of Interactive Data Visualizations
• Interactive Data Visualization with Bokeh
• Creating the Base Static Plot for an Interactive
• Data Visualization
• Adding a Slider to the Static Plot
• Adding a Hover Tool
• Interactive Data Visualization with Plotly Express
• Creating an Interactive Scatter Plot
• Use Case 4: Creating Different Interactive Visualizations Using Plotly Express
From Static to Interactive Visualization
• We discussed static data visualizations in the previous chapter – graphs and plots that are stagnant and cannot be
modified or interacted with in real time by the audience.
• Interactive data visualizations are a step ahead of static ones.
• The definition of interactive is something that involves communication between two or more things or people
that work together.
• Therefore, interactive visualizations are graphical representations of analyzed data (static or dynamic) that can
react and respond to user actions in the moment.

Demo: COVID 19 Dashboard

https://www.omnisci.com/
From Static to Interactive Visualization
• The ability for a plot to provide you with more information about a datapoint
when there's a user action, such as your mouse hovering above it, is what makes
it interactive.

Gdp: Gross domestic product (GDP)

Static versus Interactive Visualization
Let's consider a dataset for members who are enrolled in a gym:

The only insight we can gain from this plot is the relationship between weight and sex – male clients visiting
this gym weigh between 62kg and 91kg, female clients weigh between 57kg and 86kg, and clients
identifying as other weigh between 61kg and 90kg. There is, however, a third feature present in the dataset
that's used to generate this box plot – age. Adding this feature to the preceding static plot may lead to confusion
in terms of understanding the data.
Static versus Interactive Visualization
Applications of Interactive Data Visualizations
Any industry that possesses large amounts of data can benefit from using interactive data visualizations.
Most popular forms of human input and interactive features
Slider: A slider allows the user to see data pertaining to a range of something. As the user changes the position of
the slider, the plot changes in real time. This allows the user to see several plots in real time:

Hover: Hovering a cursor above an element of a plot allows the

user to receive more information about the datapoint than can
be seen just by observing the plot. This is helpful when the
information you wish to convey cannot fit in the plot itself (such
as precise values or brief descriptions).
Most popular forms of human input and interactive features
Zoom: Zooming in and out of a plot is a feature that quite a
few interactive data visualization libraries create on their own.
They allow you to focus on specific datapoints of a plot and
take a closer look at them.

Clickable parameters: There are several types of clickable

parameters, such as checkboxes and drop-down menus, that
allow the user to pick and choose what aspects of the data they
wish to analyze and view. An example is given here:
Interactive Data Visualization Libraries
Two of the most popular interactive data visualization Python libraries are as follows:
bokeh : bokeh is a Python library for interactive data visualizations. The plots in Bokeh are created by
stacking layers on top of each other. The first step is to create an empty figure, to which elements are
added in layers.
bokeh : is popular because the visualizations are rendered using HTML and JavaScript, which is why it is
commonly chosen when designing web-based interactive visualizations. Furthermore, the bokeh.io
module creates a .html file that contains the basic static plot, along with the interactive features, and
doesn't necessarily require a server to run, which makes the visualization super easy to deploy.
Creating the Base Static Plot for an Interactive Data Visualization
Create a static plot for our dataset and add circular glyphs to it. Import the following:
• curdoc from bokeh.io: This returns the current default state of the document/ plot.
• The figure from bokeh.plotting: This creates the figure for plotting.
• HoverTool, ColumnDataSource, CategoricalColorMapper, and Slider from bokeh.models: These are interactive
tools and methods for mapping data from pandas DataFrames to a data source for plotting.
• Spectral6 from bokeh.palettes: A color palette for the plot.
• widgetbox and row from bokeh.layouts: widgetbox
creates a column of predefined tools (including zoom),
while row creates a row of bokeh layout objects,
forcing them to have the same sizing_mode:

from bokeh.io import curdoc, output_notebook

from bokeh.plotting import figure, show
from bokeh.models import HoverTool,
ColumnDataSource, CategoricalColorMapper, Slider
from bokeh.palettes import Spectral6
from bokeh.layouts import widgetbox, row
Creating the Base Static Plot for an Interactive Data Visualization
Adding a Slider to the Static Plot
1. Create a slider object:
• Set the start as the first year in the year column.
• Set the end as the last year in the year column.
• Set the step as 1. Since with each movement of the slider, we want the year to increment with the value of 1.
• Set the value as the minimum value of the year column.
• Set the title as Year:
slider = Slider(start=min(data.year), end=max(data.year), step=1, value=min(data.year),
title='Year’)

2. Create a function called update_plot that will update the plot every time the slider is moved:
def update_plot(attr, old, new)

3. Apply the .on_change() function with value and update_plot as the parameters to tell the plot that once the
value of the slider changes, update the plot using the method described in the update_plot function.
slider.on_change('value', update_plot)
Creating the Base Static Plot for an Interactive Data Visualization
Adding a Hover Tool
To allow the user to hover above a datapoint on the plot to see the name of the country, the carbon dioxide
emissions, and the GDP:
Create a hover tool called hover:

hover = HoverTool(tooltips=[('Country', '@country'), ('GDP', '@x'), ('CO2 Emission', '@y')])

Add the hover tool to the plot:

plot.add_tools(hover)
Creating the Base Static Plot for an Interactive Data Visualization

These tools are as follows:

Pan: The pan tool allows you to move and shift the view of your plot.
Box Zoom: This allows you to zoom in to a particular square-shaped section of the plot
Wheel Zoom: This allows you to arbitrarily zoom in to any point of the plot.
Save Plot: This allows you to save the current plot.
Reset: This resets the plot and takes you back to the original plot that you landed on.
Interactive Data Visualization with Plotly Express
Plotly is a very popular Python library and is used to create amazing and informative interactive data
visualizations. It is a JSON-based plotting tool, and so every plot is defined by two JSON objects – data and
layout.
Plotly Express is a high-level API. Basically, it creates a high-level wrapper around the base Plotly code. As a result,
the syntax and commands that are required to create interactive data visualizations are minimized immensely.

Creating an Interactive Scatter Plot

DEMO
Interactive Data Visualization with Plotly Express
Creating an Interactive Scatter Plot
fig = px.scatter(data, x="gdp", y="co2", animation_frame="year",
animation_group="country", color="region", hover_name="country",
facet_col="region", width=1579, height=400, log_x=True, size_max=45,
range_x=[xmin,xmax], range_y=[ymin,ymax])

Create the scatter plot and save it as fig:

• The data parameter will be the name of DataFrame.
• Assign the gdp column to the x-axis.
• Assign the co2 column to the y-axis.
• Set the animation_frame parameter as the year column.
• Set the animation_group parameter as the country column.
• Set the color of the datapoints as the region column.
• Assign the country column to the hover_name parameter.
• Set the facet_col parameter as the region column (this divides our plot into six columns, one for each region).
• Set the width as 1579 and the height as 400.
• The x-axis must be logarithmic.
• Set the size_max parameter as 45.
• Assign the range of the x-axis and the y-axis as xmin, xmax and ymin, ymax, respectively.
Interactive Data Visualization with Plotly Express
Creating an Interactive Scatter Plot

creating an interactive data visualization with Plotly Express takes very few lines of code and the syntax is easy to
learn and use. Besides scatter plots, the library has many other types of plots that you can use to interactively
visualize different types of data.

see: Plotly Express

Discussion: other types of

plots
MINI PROJECT3