Interactive Visualization 📈

MATH/COSC 3570 Introduction to Data Science

Dr. Cheng-Han Yu
Department of Mathematical and Statistical Sciences
Marquette University

Interactive Visualization

• Interactive graphics better communicate data science results and provide more information.
• It is easy to generate interactive web graphics using R without knowing JavaScript!
• Above all of that, making simple interactive plots are a sure-fire way to impress your coworkers!
• A word of caution: if the interactivity doesn’t add anything to your visualization, don’t do it.

Boring Static ggplot

• Just a scatter plot showing the relationship between hwy and displ. And that’s it.
• It cannot provide any other information or functionality.

Informative Inteactive ggplot

• How about this!
• We can actually create a more informative Inteactive ggplot with more functionality!
• You see here, if we put our cursor on any data point, the exact value of hwy and displ will be shown ot us.
• Also, several useful funcitons are shown on the top of the plot.
• We can download the plot.
• We can zoom the plot.
• We can drag the plot.
• We can also select any data points we are interested and like to further investigate.
• Notice that the interactive data table are automatically changed to show the selected data point information.
• How cool is that!
• https://www.rebeccabarter.com/blog/2017-04-20-interactive/

Plotly 📦

• To create a plotly object
  • directly initializing a plotly object with plot_ly(), plot_geo(), etc.
  • transforming a ggplot2 object via ggplotly() into a plotly object
• Both are powered by the JavaScript graphing library plotly.js, so many of the same concepts and tools for one interface can be reused in the other.

Both approaches have somewhat complementary strengths and weaknesses, so it can pay off to learn both approaches. Moreover, both approaches are an implementation of the Grammar of Graphics and both are powered by the JavaScript graphing library plotly.js

plot_ly()

• Mapping homeownership to x yields a bar chart

library(plotly)
loans <- readr::read_csv("./data/loans.csv")
loans |> plot_ly(x = ~homeownership) 

# plot_ly(loans, x = loans$homeownership)
# plot_ly(loans, x = ~homeownership, type = "histogram")

plotly tries to find a sensible geometric representation of that information for us plot_ly(loans, x = ~homeownership, type = “histogram”) ‘bar’, ‘barpolar’, ‘box’, ‘candlestick’, ‘carpet’, ‘choropleth’, ‘choroplethmapbox’, ‘cone’, ‘contour’, ‘contourcarpet’, ‘densitymapbox’, ‘funnel’, ‘funnelarea’, ‘heatmap’, ‘heatmapgl’, ‘histogram’, ‘histogram2d’, ‘histogram2dcontour’, ‘icicle’, ‘image’, ‘indicator’, ‘isosurface’, ‘mesh3d’, ‘ohlc’, ‘parcats’, ‘parcoords’, ‘pie’, ‘pointcloud’, ‘sankey’, ‘scatter’, ‘scatter3d’, ‘scattercarpet’, ‘scattergeo’, ‘scattergl’, ‘scattermapbox’, ‘scatterpolar’, ‘scatterpolargl’, ‘scatterternary’, ‘splom’, ‘streamtube’, ‘sunburst’, ‘surface’, ‘table’, ‘treemap’, ‘violin’, ‘volume’, ‘waterfall’

plot_ly()

loans |> plot_ly(x = ~homeownership, color = I("pink"), stroke = I("green3"), span = I(5))

• We can specify the bar color we like using color argument.
• Note that we cannot simply use the name of color as we do in R plotting, but have to add the function I().
• It is because when we call the plot_ly(), it actually translate the R code into Javascript, and for some reason, we need to add I() to make the code work.
• If you like to change the border color of the bar, you can specify a color in the stroke argument.
• Span controls the width of the border. # doesn’t produce black bars plot_ly(loans, x = ~homeownership, color = “black”)

plot_ly()

• Mapping homeownership & grade to x & y yields a heatmap

loans |> plot_ly(x = ~homeownership, y = ~grade)

# plot_ly(loans, x = ~homeownership, y = ~grade, type = "histogram2d")

• Color in cells represents the the count of some type of homeownership and the grade of loans.
• For example, we know there are 1285 loans that is classified as grade A, and the loan applicant has a mortgage.
• The most frequency is grade B and mortgage.

plot_ly()

• Mapping homeownership & grade to x & color yields a dodged bar chart

loans |> plot_ly(x = ~homeownership, color = ~grade)

# plot_ly(loans, x = ~homeownership, color = ~grade, type = "histogram")

• We actually create a bar chart of grade of loan separated by homeownership, and each bar has a color corresponding to a grade of loan.

loans |> plot_ly(x = ~homeownership, 
        color = ~grade, colors = "Accent")

layout()

• The 1st argument is a plotly object.

• Other arguments include legend, margins, size, etc.

plotly::layout(p = plot_ly(loans, x = ~homeownership),
               title = "My beatiful bar chart")

• If we want to decorate our plot, in plotly, we use the layout function.
• You can also change the X-label and Y-label in the layout function.

layout( # all of layout’s properties: /r/reference/#layout title = “Unemployment”, # layout’s title: /r/reference/#layout-title xaxis = list( # layout’s xaxis is a named list. List of valid keys: /r/reference/#layout-xaxis title = “Time”, # xaxis’s title: /r/reference/#layout-xaxis-title showgrid = F), # xaxis’s showgrid: /r/reference/#layout-xaxis-showgrid yaxis = list( # layout’s yaxis is a named list. List of valid keys: /r/reference/#layout-yaxis title = “uidx”) # yaxis’s title: /r/reference/#layout-yaxis-title )

add_*() Functions

• Define how to render data into geometric objects, add_contour(), add_boxplot(), etc.
• add_markers() for scatterplots.

# plot_ly(mpg, x = ~cty, y = ~hwy, type = "scatter", mode = "markers", alpha = 0.5)
base_plot <- mpg |> plot_ly(x = ~cty, y = ~hwy)
base_plot |> add_markers(alpha = 0.7, size = 2)

• One advantage of using add_* family functions is that, if we haven’t decided what kind of plot we’d like to generate, we can first create a base plotly object, and then add any geometric object we like later.
• We can try several geometric objects, and choose our favorite one. plot_ly(mpg, x = ~cty, y = ~hwy, type = “scatter”, mode = “markers”, alpha = 0.5)

add_paths()

base_plot |> add_paths()

• Here we add another geometry path. You can see that using point markers makes more sense in this case.
• But the point is, we can repeatedly using the same base

Color

## alpha here is "setting", not "mapping"
p <- mpg |> plot_ly(x = ~cty, y = ~hwy, alpha = 0.7) 
p |> add_markers(color = ~factor(cyl), size = 3)

• map the number of cylinders to point color.
• Because the variable is actually numerical, I make it categorical as a factor before doing the mapping.

Symbols

p |> add_markers(symbol = ~factor(cyl), color = I("red"))

• We can also use different symbols or point shapes to represent different number of cylinders. Very simple, we just use the symbol argument instead.
• In ggplot2, we use “shape”

add_lines()

• Plot
• Code

p <- tx5 |> plot_ly(x = ~date, y = ~median)
p |> add_lines(linetype = ~city)

top5 <- txhousing |> 
    group_by(city) |> 
    summarise(m = mean(sales, na.rm = TRUE)) |> 
    arrange(desc(m)) |> 
    top_n(5)
tx5 <- semi_join(txhousing, top5, by = "city")
p <- tx5 |> plot_ly(x = ~date, y = ~median)
p |> add_lines(linetype = ~city)

• We can also create a line plot. It is useful if you have some time series data.
• Here I create a data called tx5, and I am trying see the trend of the median home price of the 5 cities in Texas.
• First, we can create plotly object, assigning the x and y variables, which are date and median.
• Then we can add the line plot, one linetype for one city.

ggplotly()

• plotly::ggplotly() translate ggplot2 to plotly.

p <- loans |> 
    ggplot(aes(x = debt_to_income, y = interest_rate)) +
    geom_point(alpha = 0.5) +
    theme_bw()
ggplotly(p)

• If you think the syntax is hard and not intuitive, and you love using ggplot, well here is good news.
• The function ggplotly() translate ggplot2 to plotly.
• You just create your ggplot, save it as an object, and then plug the object into the ggplotly function.
• Bang! your ggplot becomes interactive!
• How cool is that! Very cool and convenient!
• That’s one of the reasons why we learn ggplot!
• But so far the translation is not 100 percent working.

ggplotly()

• Easily compare levels of grade (loan quality) by leveraging the legend filtering capabilities.

p <- loans |> ggplot(aes(x = log(debt_to_income), color = grade)) + 
    geom_freqpoly(stat = "density") + xlim(0, 5) + theme_bw()
ggplotly(p)

14-plotly (Present your work!)

In lab.qmd ## Lab 14 section,

• Load tidyverse and plotly and the loans.csv data.

• Generate a plot using plotly. An example is shown below. Welcome to create a more fancy one!

# x = interest_rate, y = grade won't work
gg <- loans %>% ggplot(aes(x = grade, y = interest_rate, color = grade)) + 
    geom_boxplot() + theme_minimal() + coord_flip()
ggplotly(gg)

Dumbell Chart

• Plot
• Code

mpg |> 
    group_by(model) |> 
    summarise(c = mean(cty), h = mean(hwy)) |> 
    mutate(model = forcats::fct_reorder(model, c)) |> 
    plot_ly() |> 
    add_segments(x = ~c, y = ~model,
                 xend = ~h, yend = ~model, 
                 color = I("gray"), showlegend = FALSE) |> 
    add_markers(x = ~c, y = ~model, 
                color = I("blue"), 
                name = "mpg city") |> 
    add_markers(x = ~h, y = ~model, 
                color = I("red"),
                name  = "mpg highway") |> 
    plotly::layout(xaxis = list(title = "Miles per gallon"))

Maps

• Plot
• Code

pop_den <- datasets::state.x77[, "Population"] / state.x77[, "Area"]

g <- list(scope = 'usa',
          projection = list(type = 'albers usa'),
          lakecolor = toRGB('white'))

plot_geo() |> 
    add_trace(z = ~pop_den, text = state.name, span = I(0),
              locations = state.abb, locationmode = 'USA-states') |> 
    plotly::layout(geo = g)

3D Scatterplots

mpg |> plot_ly(x = ~cty, y = ~hwy, z = ~cyl) |> 
    add_markers(color = ~factor(cyl))

3D Surfaces

x <- 1:nrow(datasets::volcano); y <- 1:ncol(datasets::volcano)
plot_ly() |> add_surface(x = ~x, y = ~y, z = ~volcano)

Animations using Frames

library(gapminder)
p <- gapminder |> ggplot(aes(gdpPercap, lifeExp, color = continent)) +
  geom_point(aes(size = pop, frame = year, ids = country)) +
  scale_x_log10()

ggplotly(p)

Now, along with data and layout, frames is added to the keys that figure allows. Your frames key points to a list of figures, each of which will be cycled through upon instantiation of the plot.

Animation

Dynamic Bar Chart using gganimate

Source: https://github.com/amrrs/animated_bar_charts_in_R