Interactives

Column

Filters

Datatable

Column

Interactive map

Information

Blurb

This example was shown as part of the talk Crosstalk: Shiny-like without Shiny at the Enterprise Applications of the R Language (EARL) conference in London, September 2018.

Self-service interactive tools have great power to support decisions by policy-makers. Shiny apps are a natural fit for this, but it’s not always easy to share them within the public sector. This is due to issues like a lack of server space, highly sensitive data and users who aren’t R-savvy.

We’ve approached this problem in the UK’s Department for Education by sharing interactive HTML widgets – embeddable JavaScript visualisation libraries – within RMarkdown outputs. Interactivity is, however, limited because selections in one widget don’t impact the data presented in another.

Joe Cheng’s Crosstalk package overcomes this with shared data objects that react to user inputs, altering the content of multiple widgets on the fly. I’ll explain how I used Crosstalk to develop a ‘pseudo-app’ for exploring schools data with the Leaflet (maps), Plotly (charts) and DT (tables) widgets inside the Flexdashboard framework and how I shared it easily with policy-making users as a static HTML file for exploration in the browser.

Note that this material is restricted to published data only and does not reflect or constitute official government policy.

How to use

Filters

You can:

  • select one or more local authorities from the dropdown menu (remove them with your backspace key)
  • select one or more Ofsted grades using the checkboxes
  • select the phase of education with the checkboxes
  • drag the slider to select a pupil count
  • drag the slider to filter by the percenatge of pupils receiving free school meals

Interactive map

You can:

  • click to grab and drag the map around
  • zoom with the ‘+’ and ‘–’ buttons (top-left) or with your mouse’s scroll wheel
  • click a marker to reveal a popup with information about that school
  • click the button showing a broken square (top-left under the zoom options) to select points on the map using a window that’s draggable (click and hold the grid icon in the upper left) and resizeable (click and drag the white boxes in each corner)

Interactive table

You can:

  • filter each column by typing in the boxes under each column header
  • sort the columns (ascending and descending) by clicking on the column header
  • change which columns are visible by clicking the Column visibility button
  • click ‘CSV’ or ‘Excel’ to download the filtered data to a .csv file or a .xlsx
  • see how many entries remain after filtering in the bottom-left, where it says ‘Showing X to Y of Z entries’

Tools

R v3.4.4 and RStudio v1.1.442 were used to build this tool.

The packages used were:

The code for this tool is available from github.com/matt-dray/earl18-crosstalk. The presentation is available from github.com/matt-dray/earl18-presentation.

---
title: "Leaflet + Flexdashboard + DT + Crosstalk"
author: "Matt Dray"
output:
  flexdashboard::flex_dashboard:
    theme: paper
    favicon: img/ios7-location-outline.png
    source_code: embed
---

```{r setup, include=FALSE}
# prep workspace
library(dplyr)  # tidy data manipulation
library(leaflet)  # interative mapping
library(DT)  # interactive tables
library(crosstalk)  # inter-widget interactivity
sch <- readRDS("data/gias_sample.RDS")
sd <- SharedData$new(sch)
```

Interactives {data-icon="ion-stats-bars"}
=====================================  

Column {data-width=400}
-------------------------------------

### Filters

```{r filters}
filter_select(
  id = "geo_la",
  label = "Local authority",
  sharedData = sd,
  group = ~geo_la
)

bscols(
  filter_checkbox(
    id = "ofsted_rating",
    label = "Ofsted grade",
    sharedData = sd,
    group = ~ofsted_rating
  ),
  filter_checkbox(
    id = "sch_phase",
    label = "Phase",
    sharedData = sd,
    group = ~sch_phase
  )
)

bscols(
  filter_slider(
    id = "pupil_count",
    label = "Pupil count",
    sharedData = sd,
    column = ~pupil_count,
    step = 10,
    round = TRUE,
    sep = "",
    ticks = FALSE
  ),
  filter_slider(
    id = "pupil_percent_fsm",
    label = "Percentage Free School Meals",
    sharedData = sd,
    column = ~pupil_percent_fsm,
    step = 1,
    round = TRUE,
    sep = "",
    ticks = FALSE
  )
)
```

### Datatable
    
```{r datatable}
sd %>% 
  DT::datatable(
    filter = "top",  # allows filtering on each column
    extensions = c(
      "Buttons",  # add download buttons, etc
      "Scroller"  # for scrolling down the rows rather than pagination
    ),
    rownames = FALSE,  # remove rownames
    style = "bootstrap",
    class = "compact",
    width = "100%",
    options = list(
      dom = "Blrtip",  # specify content (search box, etc)
      deferRender = TRUE,
      scrollY = 300,
      scroller = TRUE,
      columnDefs = list(
        list(
          visible = FALSE,
          targets = c(2, 3, 5:15)
        )
      ), 
      buttons = list(
        I("colvis"),  # turn columns on and off
        "csv",  # download as .csv
        "excel"  # download as .xlsx
      )
    ),
    colnames = c(
      "URN" = "sch_urn",
      "Name" = "sch_name",
      "Type" = "sch_type",
      "Type group" = "sch_type_group",
      "Phase" = "sch_phase",
      "Ofsted rating" = "ofsted_rating",
      "Inspection date" = "ofsted_date",
      "Pupil count" = "pupil_count",
      "Pupil gender" = "pupil_gender",
      "FSM per cent" = "pupil_percent_fsm",
      "Town" = "geo_town",
      "Postcode" = "geo_postcode",
      "Local authority" = "geo_la",
      "Rural-urban class" = "geo_urban_rural",
      "RSC region" = "geo_rsc_region",
      "Coordinates" = "geometry"
    )
  )
```

Column {data-width=600}
-------------------------------------
    
### Interactive map
    
```{r map}
sd %>% 
  leaflet::leaflet() %>%
  leaflet::addProviderTiles(providers$OpenStreetMap) %>% 
  leaflet::addAwesomeMarkers(
    popup = ~paste0(
      "
", sch$sch_name, "
",
      
      "",
      
      "",
      "",
      "",
      "",
      
      "",
      "",
      "",
      "",
      "",
      
      "",
      "",
      "",
      "",
      "",
      
      "",
      "",
      "",
      "",
      "",
      
      "",
      "",
      "",
      "",
      ""
    ),  # end popup()
    icon = awesomeIcons(
      library = "ion",
      icon = ifelse(
        test = sch$ofsted_rating == "1 Outstanding",
        yes = "ion-android-star-outline",
        no = "ion-android-radio-button-off"
      ),
      iconColor = "white",
      markerColor = ifelse(
        test = sch$sch_phase == "Primary", 
        yes = "red",
        no = "blue"
      )
    )
  ) %>%   # end addAwesomeMarkers()
  leaflet::addMeasure()
```

Information {data-orientation=rows data-icon="fa-info-circle"}
===================================== 


### Blurb

This example was shown as part of the talk Crosstalk: Shiny-like without Shiny at the [Enterprise Applications of the R Language (EARL) conference in London, September 2018](https://earlconf.com/2018/london/#matt-dray).

> Self-service interactive tools have great power to support decisions by policy-makers. Shiny apps are a natural fit for this, but it's not always easy to share them within the public sector. This is due to issues like a lack of server space, highly sensitive data and users who aren't R-savvy.
>
>We've approached this problem in the UK's Department for Education by sharing interactive HTML widgets – embeddable JavaScript visualisation libraries – within RMarkdown outputs. Interactivity is, however, limited because selections in one widget don’t impact the data presented in another.
>
>[Joe Cheng's Crosstalk package](http://rstudio.github.io/crosstalk/) overcomes this with shared data objects that react to user inputs, altering the content of multiple widgets on the fly. I'll explain how I used Crosstalk to develop a 'pseudo-app' for exploring schools data with the Leaflet (maps), Plotly (charts) and DT (tables) widgets inside the Flexdashboard framework and how I shared it easily with policy-making users as a static HTML file for exploration in the browser.

Note that this material is restricted to **published data only** and **does not reflect or constitute official government policy**.

### How to use

#### Filters

You can:

* select one or more local authorities from the dropdown menu (remove them with your backspace key)
* select one or more Ofsted grades using the checkboxes
* select the phase of education with the checkboxes
* drag the slider to select a pupil count
* drag the slider to filter by the percenatge of pupils receiving free school meals

#### Interactive map

You can:

* click to grab and drag the map around
* zoom with the '+' and '--' buttons (top-left) or with your mouse's scroll wheel
* click a marker to reveal a popup with information about that school
* click the button showing a broken square (top-left under the zoom options) to select points on the map using a window that's draggable (click and hold the grid icon in the upper left) and resizeable (click and drag the white boxes in each corner)

#### Interactive table

You can:

* filter each column by typing in the boxes under each column header
* sort the columns (ascending and descending) by clicking on the column header
* change which columns are visible by clicking the Column visibility button
* click 'CSV' or 'Excel' to download the filtered data to a .csv file or a .xlsx
* see how many entries remain after filtering in the bottom-left, where it says 'Showing X to Y of Z entries'

### Tools

[R v3.4.4](https://www.r-project.org/) and [RStudio v1.1.442](https://www.rstudio.com/) were used to build this tool.

The packages used were:

* [Flexdashboard](https://rmarkdown.rstudio.com/flexdashboard/) to create a frame for the content
* [Leaflet](https://rstudio.github.io/leaflet/) for the interactive map
* [DT](https://rstudio.github.io/DT/) for the interactive table
* [Crosstalk](https://rstudio.github.io/crosstalk/) for widget interactivity
* [Ion icons](https://ionicons.com/) and [Font Awesome](https://fontawesome.com/) for icons

The code for this tool is available from [github.com/matt-dray/earl18-crosstalk](https://github.com/matt-dray/earl18-crosstalk). The presentation is available from [github.com/matt-dray/earl18-presentation](https://github.com/matt-dray/earl18-presentation).

URN", sch$sch_urn, "
Phase", sch$sch_phase, "
Type", sch$sch_type, "
Location", sch$geo_town, ", ", sch$geo_postcode, "
LA", sch$geo_la, "