Add information panel

viz/app.R

@@ -39,6 +39,7 @@ ui <- fluidPage(
   tags$style(type = "text/css", extracss),
   leafletOutput("map"),
   absolutePanel(top = 10, right = 10, id="mapcontrol",
+                div(
                 radioButtons("radioinout", label="Show commuters who",
                              choiceNames = list(
                                HTML("<p>Commute <b>from</b> selected area</p>"),
@@ -60,14 +61,14 @@ ui <- fluidPage(
                              ),
                              inline = FALSE),
                 div(id="locinfo",
-                    htmlOutput("lochtml"))),
+                    htmlOutput("lochtml")))),
   absolutePanel(top = 25, right = 10, id="control2",
                 materialSwitch("controlswitch", value=TRUE, right=TRUE,
                                inline=TRUE, status="info")),
   absolutePanel(bottom = 30, left = 10, id="loading",
                 p("Loading...")),
   absolutePanel(bottom=26, right=10, left=10, top=10, id="infopanel",
-                p("Test")),
+                infotext),
   absolutePanel(bottom=10, right=10, id="infobuttoncontainer",
     prettyToggle("mapinfobutton", label_on = "Info",
                  label_off = "Info", icon_on=icon("times"),
@@ -181,6 +182,7 @@ server <- function(input, output) {
                          time = 1)
   }
   observeEvent(input$map_click, ignoreInit = TRUE, {
+    cursel <- sel.SA2.code()
     p <- input$map_click
     pdat <- data.frame(Longitude = p$lng,
                       Latitude =p$lat)
@@ -189,12 +191,14 @@ server <- function(input, output) {
     ppoly <- over(pdat, shpf)
     codetmp <- as.numeric(as.character(ppoly[1,"SA22018_V1"]))
     codetmp <- ifelse(is.na(codetmp), 0, codetmp)
-    sel.SA2.code(ifelse(sel.SA2.code() == codetmp, 0, codetmp))
-    updateMap()
+    newsl <- ifelse(sel.SA2.code() == codetmp, 0, codetmp)
+    if (newsl != cursel) {
+      sel.SA2.code(newsl)
+      updateMap()
+    }
   })
   observeEvent(input$map_zoom, once=TRUE, {
     if (!attribupdate) {
-      print(attribupdate)
       shinyjs::html(selector=".leaflet-control-attribution.leaflet-control",
                     html = attribhtml)
       attribupdate <<- TRUE
@@ -203,7 +207,6 @@ server <- function(input, output) {
   observeEvent(input$map_shape_mouseover, once=TRUE,{
     # Backup
     if (!attribupdate) {
-      print(attribupdate)
       shinyjs::html(selector=".leaflet-control-attribution.leaflet-control",
                     html = attribhtml)
       attribupdate <<- TRUE
@@ -224,7 +227,7 @@ server <- function(input, output) {
   })
   observeEvent(input$mapinfobutton, ignoreInit = TRUE, {
     shinyjs::toggleElement("infopanel", anim=TRUE,
-                           time = 1)
+                           time = 0.5)
   })
   output$lochtml <- renderUI({
     seled <- sel.SA2.code()

viz/extras.R

@@ -27,9 +27,13 @@ html, body {
   padding: 6px 8px;
   font: 14px/16px Arial, Helvetica, sans-serif;
 }
+#mapcontrol, #control2 {
+  z-index: 1000;
+}
 #infopanel {
   display: none;
-  padding: 30px;
+  background-color: rgba(255, 255, 255, 0.9);
+  padding: 10px;
   z-index: 1001;
 }
 #lochtml ul {
@@ -51,6 +55,39 @@ html, body {
   margin-right: 0px !important;
   margin-bottom: 0px !important;
 }
+h3 {
+  margin-top: 5px;
+  margin-bottom: 5px;
+}
+.overflowable {
+  max-height: 100%;
+  overflow: auto;
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
+}
+.overflowable::-webkit-scrollbar {
+  display: none;
+}
+blockquote {
+  font-size: 1em;
+  font-style: italic;
+  border: none;
+  margin: 0;
+}
+.scrollbuffer {
+  height: 20px;
+}
+.overflowable:before {
+  content:'';
+  width:100%;
+  height:20px;    
+  position:absolute;
+  left:0;
+  bottom:0;
+  right:0;
+  background:linear-gradient(transparent 0px, 
+    rgba(255, 255, 255, 0.9));
+}
 "
 
 attribhtml <- '
@@ -65,3 +102,57 @@ confidentiality-of-info-supplied-to-snz/safeguarding-confidentiality.aspx"
 title="A method of preserving confidentiality and anonymity">
 random rounding</a>
 '
+
+infotext <- div(class="overflowable",
+  h3("How did Kiwis commute in 2018?"),
+  p("This tool maps the 2018 census",
+  a(href=
+    "https://datafinder.stats.govt.nz/data/category/census/2018/commuter-view/", 
+    "commuter data"), 
+  "to help visualise transport ",
+    "connections. It is ", a(href="http://petras.space", "Petra Lamborn's"),
+    " entry for the ", em("There and Back Again"),
+    a(href=
+"https://www.stats.govt.nz/2018-census/there-and-back-
+again-data-visualisation-competition", "data visualisation competition",
+    .noWS = "after"), ". The source data counts employed persons 15 years or ",
+    "older who gave an employment location in the 2018 census."),
+  h4("Options"),
+  p("The top right panel (toggleable via the blue switch) allows ",
+    "you to choose between visualising the people who commute from ",
+    "and to each area, and between showing numbers of people or ",
+    "their primary mode of transportation."),
+  p("Select an area by clicking on it; deselect by clicking it again ",
+    "or clicking in the water. When an area is selected the map is ",
+    "coloured according to the people who commute to or from that area ",
+    "(including the people who commute within the area). When no area is ",
+    "selected, colouring is according to commutes to or from all ",
+    "localities."),
+  h4("FAQ"),
+  shiny::tags$blockquote("Why are so many areas purple (for 'works at ",
+                         "home')?"),
+  p("Working from home includes working from your kitchen table, ",
+    "but also farming. Anyone who is employed but does not commute ",
+    "is included in this category."),
+  shiny::tags$blockquote("Why is every number divisible by three?"),
+  p("To ensure anonymity and the confidentiality of your census data, ",
+    "Statistics New Zealand employs a technique called ",
+    em(a(href=paste0(
+      "http://archive.stats.govt.nz/about_us/legisln-policies-protocols/",
+      "confidentiality-of-info-supplied-to-snz/safeguarding-confidentiality.aspx"),
+         "random rounding", .noWS = "after"), .noWS = "after"), ". ",
+    "This method rounds all values to a multiple of three, but one-third of ",
+    "the time rounds to the second nearest multiple, rather than the closest. ",
+    "Additionally, rounded values less than six are censored."),
+    p("Note that this also means totals do not always add up."),
+  shiny::tags$blockquote("In some views there are areas that are greyed ",
+                         "out when looking at transport type, but not ",
+                         "when looking at numbers of people. How does ",
+                         "that work?"),
+  p("As mentioned above some low values are censored to avoid providing ",
+    "potentially identifyable information. However it is possible for the ",
+    "total number of people to be large enough to escape censoring while ",
+    "all transport", em("type"), "numbers are too small and so no most ",
+    "common type can be determined."),
+  div(class="scrollbuffer")
+)