Lec09: Interactivity I

class: center, middle, inverse, title-slide

# Lec09: Interactivity I
## Stat41: Data Viz
### Prof Amanda Luby
### Swarthmore College

---

# Today:

(1) Announcements

(2) Discuss prep materials (15+10)

+ Watch: [The Shadow Peace](http://www.fallen.io/shadow-peace/1/)
+ Read: [Let’s free congress](http://letsfreecongress.org/)
+ Explore: [Twitter USA App](https://bbspring.shinyapps.io/App24/)
+ Explore: [Utah's COVID Dashboard](https://coronavirus-dashboard.utah.gov/) 
  
(3) Dynamic Graphics (10)

(4) Project 3 (10)

.footnote[If you liked The Shadow Peace, the same person has a video on the [Fallen of WWII](http://www.fallen.io/ww2/)]

---
# Announcements

Appointment slots available on my [office hour calendar](https://calendar.google.com/calendar/u/0/selfsched?sstoken=UUd2SFl5a3JVSXl1fGRlZmF1bHR8NWMxOTUxZDI4YTRmNTAyYzJkNGNlODk0ZmZjOWY4ODg) (Today 5:30-6:30; Thurs 3:15-4, 5:30-6; Fri 3-4)

Open office hours on Friday during our regular lab time (1-2pm)

Planning to have all Milestone02 and Project02 graded before the weekend

Intro to Project 3 today; Rough Drafts of final project tomorrow 
---
# On your jamboards:

+ What did you like/dislike about each of the 4 dynamic graphs?

+ What made each example "dynamic"?

+ How could you represent the same data on a static graph (eg with ggplot)? How would the examples be improved with a static graph?

+ What does the dynamic graph include that *couldn't* be told with a static graph?

---
class: center, middle, inverse

# Large-Group Recap

---
### **Dynamic Graphs** add dimensions to static visualizations via features which the user controls

Features we'll focus on in this class are:

+ Hovering
    - Display additional information about an observation or group via cursor control
--
+ Changing representation of the data
    - User chooses how data is represented
    - "Data Explorer" dashboards
--
+ Filtering/Subsetting
    - Allow user to control which subset of the data is shown
    - Turn features on or off 
--
+ Animations
    - Not always interactive!
    - Adds extra dimension to a graphic 
    
---
# Best Practices

1. Start with a static graph, describe what insights it offers, *then* build up

2. Demonstrate how the dynamic features allow you to obtain additional insight about the data **that you would not otherwise be able to**

3. Don't make plots dynamic just because you can.

4. Document how to use the features ("click on the drop down menu to choose a variable", "press enter to start the animation")

---
# Exploration vs Explanation

I like to think of dynamic graphics as somewhere on the "Exploration <--> Explanation" spectrum.

--
+ Exploration: data explorer dashboards; open-ended; user can do whatever they want (eg Twitter USA App)
+ Explanation: fully animated; story is the same regardless of what user does (eg Shadow Peace)

Both can be done well!

Need to be careful about *audience* and *context*.

If your audience needs an explanation, the exploration won't be effective. If your audience wants to explore, they won't pay attention to the explanation.

*Context* tells users what to expect and how they can get started

---
# This Week

**Today:** You'll meet `plotly` and `flexdashboard` in the lab

**Tomorrow:** More general interactivity in discussion time; Shiny in the lab

**Thursday:** Animation

**Friday:** Scrollytelling (no lab)

---
class: center, middle, inverse

# Plotly
---
# About

`ggplotly`, which we'll focus on in lab, is a super simple way to "wrap" your ggplots in JavaScript and make them interactive.

You can also build a *new* interactive graph using `plot_ly`. (I'm new to plotly, so I haven't used this much!)

+ [plotly book](https://plotly-r.com/index.html)
+ [plotly + ggplot](https://plotly.com/ggplot2/)

---
# Example

Prediction Bands via [Plotly + ggplot2](https://plotly.com/ggplot2/)
---
class: center, middle, inverse

# flexdashboard
---
# About

flexdashboard is a really nice way to use your RMarkdown knowledge to build a standalone "product". It creates great-looking dashboard-style output that can be used when creating interactive graphics.

---
# Example

[Utah's COVID Dashboard](https://coronavirus-dashboard.utah.gov/#overview)
---
class: center, middle, inverse

# Shiny 
---
# About

Shiny is a step beyond flexdashboard, and allows the user to *interact* with the data/graphics. This requires a server on the backend (since a browser alone cannot run R) so is more complicated to get up and running. Shiny is powerful enough to make data explorer dashboards, interactive exercises (the primers/tutorials you have done in this class use Shiny), and even small games.

---
# Example

[Hex Memory Game](https://shiny.rstudio.com/gallery/hex-memory.html) from [Shiny showcase](https://shiny.rstudio.com/gallery/)
---
class: center, middle, inverse

# HTMLwidgets
---
# About

[HTMLwidgets](http://www.htmlwidgets.org) are somewhere in between a basic dashbaord and a full-blown shiny app, and provide an interface to use popular javascript libraries within flexdashboard or shiny.

Plotly is a subset of HTMLwidgets

---
# Example

[Leaflet](https://rstudio.github.io/leaflet/) for interactive maps