04_leaflet-flexdash-dt-crosstalk.Rmd

---
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(
      "<h5>", sch$sch_name, "</h5>",
      
      "<table style='width:100%'>",
      
      "<tr>",
      "<th>URN</th>",
      "<th>", sch$sch_urn, "</th>",
      "</tr>",
      
      "<tr>",
      "<tr>",
      "<th>Phase</th>",
      "<th>", sch$sch_phase, "</th>",
      "</tr>",
      
      "<tr>",
      "<tr>",
      "<th>Type</th>",
      "<th>", sch$sch_type, "</th>",
      "</tr>",
      
      "<tr>",
      "<tr>",
      "<th>Location</th>",
      "<th>", sch$geo_town, ", ", sch$geo_postcode, "</th>",
      "</tr>",
      
      "<tr>",
      "<tr>",
      "<th>LA</th>",
      "<th>", sch$geo_la, "</th>",
      "</tr>"
    ),  # 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 <i>Crosstalk: Shiny-like without Shiny</i> 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).