index.Rmd

---
title: "Crosstalk #EARL18"
subtitle: "Shiny-like without Shiny"
author: "Matt Dray | Dept for Education | EARL 2018"
output:
  xaringan::moon_reader:
    css: ["style/style.css", "style/style-fonts.css"]
    lib_dir: libs
    seal: false
    nature:
      slideNumberFormat: "%current%"
      highlightStyle: github
      highlightLines: true
      countIncrementalSlides: false
---

```{r setup, include=FALSE}
options(htmltools.dir.version = FALSE)
```

class: center, middle, inverse

# Crosstalk `r icon::fa("comments")`

### Shiny-like without Shiny

.image-30[![](img/earl_logo_light.png)]

### Matt Dray | Dept for Education | #earlconf

???

Matt Dray, Data Science, DfE, ACQ; soon GDS.

I'm being provactive with the title. Shiny is a popular topic at EARL and it solves lots of business problems.

But what if you don't have the infrastructure or skills?

I'm going to talk through one option -- the `crosstalk` package -- that you may not be aware of.

First, hands up if you've:

* used Shiny
* heard of Crosstalk
* used Crosstalk

---
class: center, middle

# TL;DR*

Need to create a small interactive app without a server or Shiny?

Try the [`crosstalk`](http://rstudio.github.io/crosstalk/) package.

.footnote[

*Too long; didn't read

]

???

I'm starting with a spoiler alert.

If you're already bored, then just note down this TL;DR.

You can go to sleep now.

---
class: center, middle

# Am I talking about a real policy?

Nope, sorry.

Schools in this example were chosen randomly.

???

DfE has lots of high-priority policies.

The content of this talk does not reflect or constitute any official government policy.

Today I'm using randomly-selected schools and published data.

---
class: center, middle

# The ask

Visualise school locations to help make a policy decision

???

Our users sometimes external, often internal -- i.e. policymakers.

Show points on a map, basically. DfE has many area-based policies and does this a lot.

Static maps are produced for this typically. Opportunity: produce something interactive.

User needs:

* Shareable: how can I make it interactive *and* shareable?
* Cheap: how can I make most of the resources I have? (i.e. not ArcMap)
* Quick: this was a last-minute ask
* Reusable: if successful, we should be able to use it again

I iterated over four steps to produce something that my users wanted.

New requirements emerged with each iteration.

--

Shareable

--

Cheap

--

Quick

--

Reusable


---
class: inverse, center, middle

# Solution 1

[`leaflet`](https://rstudio.github.io/leaflet/) interactive map

???

R isn't zero-indexed, so we'll start with *Solution 1* rather than *Solution 0* (pause for thunderous laughter).

The first solution was to use the go-to interactive map package for R: `leaflet`.

`leaflet` is an *HTML widget*. It wraps the Leaflet JavaScript visualisation library into R code.

Find out about other widgets at [htmlwidgets.org](https://www.htmlwidgets.org/).

---
class: center, middle

.image-100[![](img/solution1-1.PNG)]

Demo available [here](https://matt-dray.github.io/earl18-crosstalk/01_leaflet.html)

???

This is a simple example. Each point is a school.

You can do basic stuff like conditionally change the colour or style of markers.

The output here is HTML, so can be shared easily as a file via email and opened with the user's browser. 

I've also hosted each of the examples in this presentation via GitHub. See the address bar or click the link.

---

class: center, middle

.image-100[![](img/solution1-2.PNG)]

Demo available [here](https://matt-dray.github.io/earl18-crosstalk/01_leaflet.html)

???

Our users were used to things like Google Maps, so Leaflet was intuitive.

Pan, zoom, select markers to show pop-ups.

You can add things like measuring tools, which is the function provided by the button in the top right.

---
class: center, middle

# Solution 1

.pull-left[

`r icon::fa("check", size = 2)`

interactive

intuitive

]

--

.pull-right[

`r icon::fa("arrow-right", size = 2)`

documentation

]

---
class: inverse, center, middle

# Solution 2

[`leaflet`](https://rstudio.github.io/leaflet/) interactive map

in a [`flexdashboard`](https://rmarkdown.rstudio.com/flexdashboard/)

???

The `flexdashboard` package allows you to build business dashboards using R Markdown.

We can repurpose it to create a scaffold to hold visualisations, commentary, etc.

You can just embed into a plain R Markdown document, of course.

---
class: center, middle

.image-100[![](img/solution2.PNG)]

Demo available [here](https://matt-dray.github.io/earl18-crosstalk/02_leaflet-flexdash.html)

???

So now we have space to put documentation for users (how to, purpose, contact info, etc).

I've also added a source code button in the upper right for fellow analysts to see and adapt the code.

---
class: center, middle

# Solution 2

.pull-left[

`r icon::fa("check", size = 2)`

documentation

self-service

]

???

'Self-service' meaning that we don't need to be in the room while users explore the data themselves.

--

.pull-right[

`r icon::fa("arrow-right", size = 2)`

tabular data

searchable

]

???

Users were pleased but still had some issues.

How can we add more info into the pop-ups without overloading? Maybe some kind of table.

How can they search for specific schools?

---
class: inverse, center, middle

# Solution 3

[`leaflet`](https://rstudio.github.io/leaflet/) interactive map

in a [`flexdashboard`](https://rmarkdown.rstudio.com/flexdashboard/)

with a [`DT`](https://rstudio.github.io/DT/) interactive table

???

`DT` is another HTML widget. It allows you to create interactive tables with its `datatable()` function.

---
class: center, middle

.image-100[![](img/solution3-1.PNG)]

Demo available [here](https://matt-dray.github.io/earl18-crosstalk/03_leaflet-flexdash-dt.html)

???

I adapted the Flexdashboard layout to hold the datatable in the lower-left.

But what makes this different from a regular non-interactive table?

---
class: center, middle

.image-100[![](img/solution3-2.PNG)]

Demo available [here](https://matt-dray.github.io/earl18-crosstalk/03_leaflet-flexdash-dt.html)

???

The main addition is built-in search and filter boxes.

Here I've filtered for school names containing the string 'st john'.

You can filter any of the columns in the table, or use the search box.

See how the number of rows is smaller?

---
class: center, middle

# Solution 3

.pull-left[

`r icon::fa("check", size = 2)`

tabular data

searchable

]

--

.pull-right[

`r icon::fa("arrow-right", size = 2)`

download option

linked table and map

]

???

Great, but the users wanted to be able to export the filtered information rather than copy-pasting.

Also why doesn't filtering update the map too? That would be much more useful.

---
class: inverse, center, middle

# What now?

???

Do we have to resort to Shiny now?

But this is problematic: we didn't have infrastructure to serve Shiny apps.

Also we'd have to rewrite the code.

And Shiny code is less intuitive for other analysts in my team versus the simplicity of R Markdown and HTML widgets.

---
class: center, middle

# Current model

.image-100[![](img/model-without.png)]

???

Data feeds into map.

Data feeds into datatable.

Updating one HTML widget doesn't update the other.

---
class: center, middle

# Ideal model

.image-100[![](img/model-with.png)]

???

What if the widgets could be linked through a *shared* data object rather than relying on their own 'copies' of the data?

---
class: center, middle

# Ideal model

.image-100[![](img/model-with-filter.png)]

???

Of course, some bonus filtering options would be great: dropdowns, checkboxes and sliders maybe.

So it's like we want the widgets to *talk across* the divide -- to *crosstalk* if you will.

Well, guess what?

---

# Crosstalk by Joe Cheng

.pull-left[

![Joe Cheng](https://avatars3.githubusercontent.com/u/129551?s=400&v=4)

]

.pull-right[

You can make:

> static HTML documents that <b>do not require Shiny</b> or any kind of server support and yet they can have <b>interactivity between widgets</b>

]

???

This ideal model already exists!

---

# A small code change

#### Before

```{r eval=FALSE}
data <- readRDS("data/some_data.RDS")  # get data

datatable(data)  # interactive table

leaflet(data) %>% addTiles() %>% addMarkers()  # map
```

???

* Before: non-linked.
* After: one line of code is all you need.

Keeping it simple: the data should be dataframe and have some kind of *key* (row number is okay). You can have multiple *groups* of shared data.

This is the only slide with code.

I don't want to get into the technical details here. You can look these up on the Crosstalk guidance linked at the end.

--

#### After

```{r eval=FALSE}
data <- readRDS("data/some_data.RDS")

shared <- SharedData$new(data)  #<<

datatable(shared)

leaflet(shared) %>% addTiles() %>% addMarkers()
```

---
class: center, middle

# `r icon::fa("exclamation-triangle")` Limitations `r icon::fa("exclamation-triangle")`

HTML widgets must be [made Crosstalk-compatible](http://rstudio.github.io/crosstalk/widgets.html)

Aggregate and summary views not yet available 

You can't use 'large' datasets

???

The title of the talk says *Shiny-like*. Crosstalk is useful in a narrow set of cases.

1. There's [guidance for the tweak](http://rstudio.github.io/crosstalk/authoring.html). `leaflet`, `DT`, `plotly` are fine for 95% of our purposes.
2. Right now only linked brushing and filtering of views that show individual data points, not aggregate or summary views.
3. Depenedent on browser limitations.

Having said that:

> You can use Crosstalk and Shiny together, and when you do so, you broaden the capabilities of Crosstalk by allowing your brushing and filtering to drive arbitrary calculations and Shiny outputs (and vice versa).

So Crosstalk is Shiny-like without Shiny. But it can also be also Shiny-like *with* Shiny.

---
class: inverse, center, middle

# Okay, Solution 4

[`leaflet`](https://rstudio.github.io/leaflet/) interactive map

in a [`flexdashboard`](https://rmarkdown.rstudio.com/flexdashboard/)

with a [`DT`](https://rstudio.github.io/DT/) interactive table

linked with [`crosstalk`](https://rstudio.github.io/crosstalk/)

---
class: center, middle

.image-100[![](img/solution4-1.PNG)]

Demo available [here](https://matt-dray.github.io/earl18-crosstalk/04_leaflet-flexdash-dt-crosstalk.html)

???

Filters (dropdown, checkboxes, sliders), datatable (bonus buttons to download and select visible columns), map.

---
class: center, middle

.image-100[![](img/solution4-2.PNG)]

Demo available [here](https://matt-dray.github.io/earl18-crosstalk/04_leaflet-flexdash-dt-crosstalk.html)

???

See how using the filters affect the table and the map?

---
class: center, middle

.image-100[![](img/solution4-3.PNG)]

Demo available [here](https://matt-dray.github.io/earl18-crosstalk/04_leaflet-flexdash-dt-crosstalk.html)

???

You can even click a row in the datatable to highlight it on the map.

See how the others are made more transparent.

---
class: center, middle

.image-100[![](img/solution4-4.PNG)]

Demo available [here](https://matt-dray.github.io/earl18-crosstalk/04_leaflet-flexdash-dt-crosstalk.html)

???

You can filter the table to filter the map and vice versa.

You can use 'linked brushing' to select from the map and filter the datatable.

Select the button underneath the zoom options and a square appears that you can resize and drag over points of interest.

---
class: center, middle

.image-100[![](img/solution4-5.PNG)]

Demo available [here](https://matt-dray.github.io/earl18-crosstalk/04_leaflet-flexdash-dt-crosstalk.html)

???

Where's the documentation? Moved to a separate tab.

---
class: center, middle

# Solution 4

`r icon::fa("check", size = 2)`

map and table linked

data filtering and brushing

downloads

---
class: center, middle

# The ask

Visualise school locations to help make a policy decision `r icon::fa("check")`

???

* Shareable: HTML attached to an email
* Cheap: R is free, resource was minimal in terms of analyst time
* Quick: iterated rapidly through each stage with little code required overall (<250 lines)
* Reusable: little code, code available within app, 'plug and play' shared data

--

Shareable `r icon::fa("check")`

--

Cheap `r icon::fa("check")`

--

Quick `r icon::fa("check")`

--

Reusable `r icon::fa("check")`

---
class: center, middle

# Impact

.pull-left[

> the maps have been added to a submission for the minister

<p>

> policy and the external stakeholders have been extremely impressed 

<p>

> due to the positive feedback we are now using the same process for [another policy]

]

.pull-right[

<br>

`r icon::fa("thumbs-up", size = 5)`

]


---
class: center, middle

# TL;DR

Need to create a small interactive app without a server or Shiny?

Try the [`crosstalk`](http://rstudio.github.io/crosstalk/) package.

???

You can use it for quick mock-ups too.

---

# Resources

.pull-left[

#### This presentation

[Hosted online](https://matt-dray.github.io/earl18-presentation/)

[GitHub repo](https://github.com/matt-dray/earl18-presentation)

Made with Yihui Xie's [Xaringan package](https://bookdown.org/yihui/rmarkdown/xaringan.html)

#### Demos

Solutions [1](https://matt-dray.github.io/earl18-crosstalk/01_leaflet.html), [2](https://matt-dray.github.io/earl18-crosstalk/02_leaflet-flexdash.html), [3](https://matt-dray.github.io/earl18-crosstalk/03_leaflet-flexdash-dt.html) and [4](https://matt-dray.github.io/earl18-crosstalk/04_leaflet-flexdash-dt-crosstalk.html)

[GitHub repo](https://github.com/matt-dray/earl18-crosstalk)

]

.pull-right[

#### Crosstalk docs

[Site](https://rstudio.github.io/crosstalk/) and [GitHub repo](https://github.com/rstudio/crosstalk)

CRAN [manual](https://cran.r-project.org/web/packages/crosstalk/crosstalk.pdf) and [details](https://CRAN.R-project.org/package=crosstalk)

Talk at [rstudio::conf 2017](https://www.rstudio.com/resources/videos/linking-html-widgets-with-crosstalk/)

#### Examples

[Gapminder example](http://rstudio-pubs-static.s3.amazonaws.com/209203_02f14fea3274448bbbf8d04c99c6051b.html)

Demo [without](https://rpubs.com/jcheng/dash1) and [with](https://rpubs.com/jcheng/dash2) Crosstalk

]

---
class: inverse, center, middle

# Matt Dray

`r icon::fa("envelope")` [mwdray@gmail.com](mailto:mwdray@gmail.com) (personal)

`r icon::fa("globe")` [rostrum.blog](https://rostrum.blog) | `r icon::fa("twitter")` [twitter.com/mattdray](https://www.twitter.com/mattdray) | `r icon::fa("github")`  [github.com/matt-dray](https://www.github.com/matt-dray)


---
class: inverse, center, middle

# `r icon::fa("star")` BONUS MEMES `r icon::fa("star")`

[rostrum.blog/2018/09/12/crosstalk-memes](https://www.rostrum.blog/2018/09/12/crosstalk-memes/)

---
class: center, middle

![](memes/scroll-of-truth.jpg)

---
class: center, middle

![](memes/is-this.jpg)

---
class: center, middle

.pull-left[
![](memes/american-chopper-argument-left.jpg)
]

.pull-right[
![](memes/american-chopper-argument-right.jpg)
]
---
class: center, middle

![](memes/trump.jpg)

---
class: center, middle

.pull-left[
![](memes/trace-cat-left.jpg)
<br>
<br>
]

.pull-right[
<br>
<br>
![](memes/trace-cat-right.jpg)
]

---
class: center, middle

![](memes/bad-boy.jpg)

---
class: center, middle

![](memes/swerve.jpg)

---
class: center, middle

![](memes/arms.jpg)