03_leaflet-flexdash-dt.Rmd

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

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

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

### About

#### 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

#### Datatable

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
* see how many entries remain after filtering in the bottom-left, where it says 'Showing X to Y of Z entries'

#### 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**.

#### 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/) 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).

### Interactive table
    
```{r}
DT::datatable(
  sch,
  filter = "top",
  extensions = "Scroller",
  rownames = FALSE,
  style = "bootstrap",
  class = "compact",
  width = "100%",
  options = list(deferRender = TRUE, scrollY = 300, scroller = TRUE))
```


Column {data-width=600}
-------------------------------------
    
### Interactive map
    
```{r map}
sch %>% 
  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()
```