Browse Source

Change buttons; rewrite parts of info

Petra Lamborn 3 years ago
parent
commit
96913e2a66
2 changed files with 52 additions and 36 deletions
  1. 16
    6
      viz/app.R
  2. 36
    30
      viz/extras.R

+ 16
- 6
viz/app.R View File

54
   leafletOutput("map"),
54
   leafletOutput("map"),
55
   absolutePanel(top = 10, right = 10, id="mapcontrol",
55
   absolutePanel(top = 10, right = 10, id="mapcontrol",
56
                 div(
56
                 div(
57
-                radioButtons("radioeduemp", 
57
+                radioGroupButtons("radioeduemp", 
58
                              label = "Commuters (age 15+) travelling to",
58
                              label = "Commuters (age 15+) travelling to",
59
+                   status = "default",
59
                              choiceNames = list(
60
                              choiceNames = list(
60
                                HTML("Em<span class='shortcut'>p</span>loyment"),
61
                                HTML("Em<span class='shortcut'>p</span>loyment"),
61
                                HTML("E<span class='shortcut'>d</span>ucation")
62
                                HTML("E<span class='shortcut'>d</span>ucation")
62
                              ),
63
                              ),
63
                              choiceValues = list(
64
                              choiceValues = list(
64
                                "Employment", "Education"
65
                                "Employment", "Education"
66
+                             )
65
                              ),
67
                              ),
66
-                             inline = TRUE),
67
-                radioButtons("radioinout", label="Show commuters who",
68
+                radioGroupButtons("radioinout", label="Show commuters who",
68
                              choiceNames = list(
69
                              choiceNames = list(
69
                    HTML("Commute <span class='shortcut'>f</span>rom selected area"),
70
                    HTML("Commute <span class='shortcut'>f</span>rom selected area"),
70
                    HTML("Commute <span class='shortcut'>t</span>o selected area")),
71
                    HTML("Commute <span class='shortcut'>t</span>o selected area")),
72
                                "res",
73
                                "res",
73
                                "work"
74
                                "work"
74
                                ),
75
                                ),
75
-                             inline = FALSE),
76
-                radioButtons("radiocolour",
76
+                             direction="vertical",
77
+                   justified = TRUE,
78
+                   status = "default",
79
+                   checkIcon = list(yes = icon("check"), 
80
+                                    no = icon("check"))
81
+                   ),
82
+                radioGroupButtons("radiocolour",
77
                              label = "Colour by",
83
                              label = "Colour by",
78
                              choiceNames = list(
84
                              choiceNames = list(
79
                    HTML("M<span class='shortcut'>o</span>st common commute method"),
85
                    HTML("M<span class='shortcut'>o</span>st common commute method"),
83
                                "type",
89
                                "type",
84
                                "number"
90
                                "number"
85
                              ),
91
                              ),
86
-                             inline = FALSE),
92
+                             direction = "vertical",
93
+                   checkIcon = list(yes = icon("check"), 
94
+                                    no = icon("check")),
95
+                   status = "default",
96
+                   justified = TRUE),
87
                 div(class="locinfo",
97
                 div(class="locinfo",
88
                     htmlOutput("lochtml")),
98
                     htmlOutput("lochtml")),
89
                 div(id="loc2"),
99
                 div(id="loc2"),

+ 36
- 30
viz/extras.R View File

50
 #lochtml ul {
50
 #lochtml ul {
51
   padding-left: 15px;
51
   padding-left: 15px;
52
 }
52
 }
53
-.radio label span p {
54
-  margin-top: 3px;
55
-  margin-bottom: 0px;
56
-}
57
 .leaflet-container {
53
 .leaflet-container {
58
   background-color: #84e1e1;
54
   background-color: #84e1e1;
59
 }
55
 }
142
 #infoint li {
138
 #infoint li {
143
   padding-bottom: 10px;
139
   padding-bottom: 10px;
144
 }
140
 }
141
+.radio-btn-icon-no {
142
+    color: rgba(255, 255, 255, 0);
143
+}
144
+.btn.radiobtn {
145
+    text-align: left;
146
+}
145
 "
147
 "
146
 
148
 
147
 attribhtml <- '
149
 attribhtml <- '
170
 "https://www.stats.govt.nz/2018-census/there-and-back-
172
 "https://www.stats.govt.nz/2018-census/there-and-back-
171
 again-data-visualisation-competition", "data visualisation competition",
173
 again-data-visualisation-competition", "data visualisation competition",
172
     .noWS = "after"), 
174
     .noWS = "after"), 
173
-    HTML(". The employment data counts employed persons 15 years or ",
174
-    "older who gave an employment location in the 2018 census, while the ",
175
-    "education data counts people in education 15 years or older who gave an ",
176
-    "education location in the 2018 census—including older highschoolers and ",
177
-    "university students, but not e.g. primary school students.")),
175
+    HTML(". The employment portion of the dataset captures employed persons ",
176
+    "15 years or older who gave an employment address or location ",
177
+    "in the 2018 census.",
178
+    "The education dataset counts people in education 15 years or older who ",
179
+    "gave an education location in the 2018 census, ",
180
+    "including older highschoolers and ",
181
+    "university students but not e.g. primary school students.")),
178
   h4("The data"),
182
   h4("The data"),
179
   p("The 2018 New Zealand Census of Population and Dwellings",
183
   p("The 2018 New Zealand Census of Population and Dwellings",
180
     a(href=paste0("https://cdm20045.contentdm.oclc.org/digital/",
184
     a(href=paste0("https://cdm20045.contentdm.oclc.org/digital/",
181
-      "collection/p20045coll2/id/713/rec/3"), "asked"), 
182
-    "individuals for primary locations of employment and education ",
183
-    "and their usual method of transportation. Stats NZ has released",
185
+      "collection/p20045coll2/id/713/rec/3"), "questionnaire"), 
186
+    "asked individuals for primary locations of employment and education ",
187
+    "and their usual method of transportation. Stats NZ has",
184
     a(href=
188
     a(href=
185
 "https://datafinder.stats.govt.nz/data/category/census/2018/commuter-view/",
189
 "https://datafinder.stats.govt.nz/data/category/census/2018/commuter-view/",
186
-      "these data"),
190
+      "released data"),
187
     "aggregated at the level of", 
191
     "aggregated at the level of", 
188
     a(href=paste0(
192
     a(href=paste0(
189
 "http://archive.stats.govt.nz/methods/classifications-and-standards/",
193
 "http://archive.stats.govt.nz/methods/classifications-and-standards/",
192
     "SA2 boundaries typically enclose areas with a population of a few ",
196
     "SA2 boundaries typically enclose areas with a population of a few ",
193
     "thousand, corresponding approximately to urban suburbs and rural towns. ",
197
     "thousand, corresponding approximately to urban suburbs and rural towns. ",
194
     "The shapes of these areas have been heavily simplified in this map ",
198
     "The shapes of these areas have been heavily simplified in this map ",
195
-    "to reduce bandwidth and memory usage.",
199
+    "to reduce bandwidth and memory usage. ",
200
+    "The original boundaries can be viewed and downloaded",
196
     a(href=
201
     a(href=
197
 "https://datafinder.stats.govt.nz/data/category/census/2018/commuter-view/",
202
 "https://datafinder.stats.govt.nz/data/category/census/2018/commuter-view/",
198
-    "The original boundaries can be viewed and downloaded from the Stats NZ ",
199
-    "datafinder website.")),
200
-  h4("Options"),
201
-  p("The top right panel (toggleable via the blue switch) allows ",
202
-    "you to choose between the employment and education datasets, ",
203
-    "visualising the people who commute from ",
204
-    "and to each area to both employment and education, and between ",
205
-    "showing numbers of people or ",
206
-    "their primary mode of transportation."),
203
+    "from the Stats NZ datafinder website", .noWS = "after"), "."),
204
+  h4("Using this tool"),
205
+  p("The options avaliable allow ",
206
+    "you to select the employment or education datasets. ",
207
+    "You may also choose to visualise the people who commute from ",
208
+    "or to each area, and select between showing numbers of people or ",
209
+    "their primary mode of transportation. \"Primary\" is calculated by ",
210
+    "FPP rules: it means the most common, not the majority."),
207
   p("Select an area by clicking on it; deselect by clicking it again ",
211
   p("Select an area by clicking on it; deselect by clicking it again ",
208
-    "or clicking in the water. When an area is selected the map is ",
212
+    "or clicking the sea. When an area is selected the map is ",
209
     "coloured according to the people who commute to or from that area ",
213
     "coloured according to the people who commute to or from that area ",
210
     "(including the people who commute within the area). When no area is ",
214
     "(including the people who commute within the area). When no area is ",
211
     "selected, colouring is according to commutes to or from all ",
215
     "selected, colouring is according to commutes to or from all ",
212
     "localities. Hover over areas for a summary (on a tablet, hold press)."),
216
     "localities. Hover over areas for a summary (on a tablet, hold press)."),
217
+  p("At rest the map is coloured by the most common type of transportation ",
218
+    "used by people commuting to employment from each area."),
213
   h4("Keyboard shortcuts"),
219
   h4("Keyboard shortcuts"),
214
   shiny::tags$ul(id="shortcutlist",
220
   shiny::tags$ul(id="shortcutlist",
215
     shiny::tags$li(shiny::tags$kbd("I"), ": toggle this info page"),
221
     shiny::tags$li(shiny::tags$kbd("I"), ": toggle this info page"),
274
     switch(e.key) {
280
     switch(e.key) {
275
       case 'p':
281
       case 'p':
276
       case 'P':
282
       case 'P':
277
-        document.getElementsByName('radioeduemp')[0].checked = true;
283
+        document.getElementsByName('radioeduemp')[0].click();
278
         Shiny.onInputChange('radioeduemp', 'Employment')
284
         Shiny.onInputChange('radioeduemp', 'Employment')
279
         break;
285
         break;
280
       case 'd':
286
       case 'd':
281
       case 'D':
287
       case 'D':
282
-        document.getElementsByName('radioeduemp')[1].checked = true;
288
+        document.getElementsByName('radioeduemp')[1].click();
283
         Shiny.onInputChange('radioeduemp', 'Education')
289
         Shiny.onInputChange('radioeduemp', 'Education')
284
         break;
290
         break;
285
       case 'f':
291
       case 'f':
286
       case 'F':
292
       case 'F':
287
-        document.getElementsByName('radioinout')[0].checked = true;
293
+        document.getElementsByName('radioinout')[0].click();
288
         Shiny.onInputChange('radioinout', 'res')
294
         Shiny.onInputChange('radioinout', 'res')
289
         break;
295
         break;
290
       case 't':
296
       case 't':
291
       case 'T':
297
       case 'T':
292
-        document.getElementsByName('radioinout')[1].checked = true;
298
+        document.getElementsByName('radioinout')[1].click();
293
         Shiny.onInputChange('radioinout', 'work')
299
         Shiny.onInputChange('radioinout', 'work')
294
         break;
300
         break;
295
       case 'o':
301
       case 'o':
296
       case 'O':
302
       case 'O':
297
-        document.getElementsByName('radiocolour')[0].checked = true;
303
+        document.getElementsByName('radiocolour')[0].click();
298
         Shiny.onInputChange('radiocolour', 'type')
304
         Shiny.onInputChange('radiocolour', 'type')
299
         break;
305
         break;
300
       case 'u':
306
       case 'u':
301
       case 'U':
307
       case 'U':
302
-        document.getElementsByName('radiocolour')[1].checked = true;
308
+        document.getElementsByName('radiocolour')[1].click();
303
         Shiny.onInputChange('radiocolour', 'number')
309
         Shiny.onInputChange('radiocolour', 'number')
304
         break;
310
         break;
305
       case 'i':
311
       case 'i':