123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268 |
- extracss <- "
- html, body {
- width:100%;
- height:100%
- }
- #map {
- height: 100% !important;
- position: absolute !important;
- top: 0;
- left: 0;
- }
- #loading {
- cursor: progress !important;
- z-index: 1002;
- }
- #loading p {
- border-radius: 5px;
- background-color: rgba(255, 255, 255, 0.8);
- padding: 6px 8px;
- box-shadow: 0 0 15px rgba(0,0,0,0.2);
- font-size: 1.5em;
- font-weight: bold;
- margin: 0;
- }
- #mapcontrol, #infobuttoncontainer, #infopanel {
- background-color: rgba(255, 255, 255, 0.8);
- border-radius: 5px;
- box-shadow: 0 0 15px rgba(0,0,0,0.2);
- padding: 6px 8px;
- font: 14px/16px Arial, Helvetica, sans-serif;
- }
- #mapcontrol, #control2 {
- z-index: 1000;
- }
- #mapcontrol {
- width: 22em;
- max-height: 90%;
- overflow: auto;
- -ms-overflow-style: none; /* IE and Edge */
- scrollbar-width: none; /* Firefox */
- }
- #mapcontrol::-webkit-scrollbar {
- display: none;
- }
- #infopanel {
- background-color: rgba(255, 255, 255, 0.9);
- padding: 10px;
- z-index: 1001;
- }
- #lochtml ul {
- padding-left: 15px;
- }
- .radio label span p {
- margin-top: 3px;
- margin-bottom: 0px;
- }
- .leaflet-container {
- background-color: #84e1e1;
- }
- #infobuttoncontainer {
- margin-bottom: 16px;
- z-index: 1002;
- }
- #infobuttoncontainer .shiny-input-container,
- #infobuttoncontainer div div {
- 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: 50px;
- }
- .overflowable:before {
- content:'';
- width:100%;
- height:50px;
- position:absolute;
- left:0;
- bottom:5px;
- right:0;
- background:linear-gradient(transparent 0px,
- rgba(255, 255, 255, 0.9));
- }
- #infobuttoncontainer label {
- font-weight: bold;
- }
- .locinfo {
- max-width: 100%;
- }
- .loading p {
- margin: 0;
- }
- hr {
- margin-top: 10px;
- margin-bottom: 10px;
- border-top: 1px solid #000;
- }
- .leaflet-control-search {
- box-shadow: none;
- }
- .shortcut {
- text-decoration: underline 1px dotted;
- }
- #shortcutlist {
- columns: 20em 2;
- }
- kbd {
- color: #444;
- background-color: #eee;
- border-radius: 4px;
- padding: 0px 2px;
- border-color: #444;
- border-width: 1px;
- -webkit-box-shadow: 1px 1px #444;
- box-shadow: 1px 1px #444;
- }
- "
-
- attribhtml <- '
- <a href="http://leafletjs.com"
- title="A JS library for interactive maps">Leaflet</a> | <a
- href="http://datafinder.stats.govt.nz/data/category/census/2018/commuter-view/"
- title="Source data">
- StatsNZ</a> | <a href="http://petras.space/page/cv/" title="Hire me!">
- Petra Lamborn</a> | Numbers subject to <a
- href="http://archive.stats.govt.nz/about_us/legisln-policies-protocols/
- confidentiality-of-info-supplied-to-snz/safeguarding-confidentiality.aspx"
- title="A method of preserving confidentiality and anonymity">
- random rounding</a>
- '
-
- infotext <- div(class="overflowable", id="infoint", tabindex="2",
- 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 employment data counts employed persons 15 years or ",
- "older who gave an employment location in the 2018 census, while the ",
- "education data counts people in education 15 years or older who gave an ",
- "education location in the 2018 census—including older highschoolers and ",
- "university students, but not e.g. primary school students."),
- 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 to both employment and education, 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. Hover over areas for a summary (on a tablet, hold press)."),
- h4("Keyboard shortcuts"),
- shiny::tags$ul(id="shortcutlist",
- shiny::tags$li(shiny::tags$kbd("I"), ": toggle this info page"),
- shiny::tags$li(shiny::tags$kbd("M"), ": focus map"),
- shiny::tags$li(shiny::tags$kbd("P"), ": show employment"),
- shiny::tags$li(shiny::tags$kbd("D"), ": show education"),
- shiny::tags$li(shiny::tags$kbd("F"), ": show people commuting from localities"),
- shiny::tags$li(shiny::tags$kbd("T"), ": show people commuting to localities"),
- shiny::tags$li(shiny::tags$kbd("O"), ": colour by most common commute type"),
- shiny::tags$li(shiny::tags$kbd("U"), ": colour by number of commuters")
- ),
- h4("FAQ"),
- shiny::tags$blockquote("Why are so many areas marked as '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 identifiable 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")
- )
-
- keyboardjs <- tags$head(tags$script(HTML("
- $(function(){
- $(document).keyup(function(e) {
- var active = document.activeElement
- if (active.id == 'searchtext9') return;
- switch(e.key) {
- case 'p':
- case 'P':
- document.getElementsByName('radioeduemp')[0].checked = true;
- Shiny.onInputChange('radioeduemp', 'Employment')
- break;
- case 'd':
- case 'D':
- document.getElementsByName('radioeduemp')[1].checked = true;
- Shiny.onInputChange('radioeduemp', 'Education')
- break;
- case 'f':
- case 'F':
- document.getElementsByName('radioinout')[0].checked = true;
- Shiny.onInputChange('radioinout', 'res')
- break;
- case 't':
- case 'T':
- document.getElementsByName('radioinout')[1].checked = true;
- Shiny.onInputChange('radioinout', 'work')
- break;
- case 'o':
- case 'O':
- document.getElementsByName('radiocolour')[0].checked = true;
- Shiny.onInputChange('radiocolour', 'type')
- break;
- case 'u':
- case 'U':
- document.getElementsByName('radiocolour')[1].checked = true;
- Shiny.onInputChange('radiocolour', 'number')
- break;
- case 'i':
- case 'I':
- shinyjs.click('mapinfobutton')
- break;
- case 'm':
- case 'M':
- document.getElementById('map').focus()
- break;
- default:
- break;
- }
- });
- })
- ")))
|