about panel, slider tweaks

server.R

@@ -34,6 +34,16 @@ colnames(clean) <- c("Severity", "No. vehicles",
   "Light conditions", "Weather conditions", 
   "Road conditions", "Special conditions", "Postcode")
 
+map_choice <- function(inp){
+  switch(inp,
+    "Severity"    = list(var="severity", type="factor"),
+    "Casualties"  = list(var="no_casualt", type="int"),
+    "Time"        = list(var="a_time_hr", type="int"),
+    "Vehicles"    = list(var="no_vehicle", type="int"),
+    "Speed limit" = list(var="speed_limi", type="int"),
+    list(var="none", type="none"))
+}
+
 shinyServer(function(input, output, session) {
 
   getData <- reactive({
@@ -89,13 +99,8 @@ shinyServer(function(input, output, session) {
 
     updateRadioButtons(session, "color_mob", selected=input$color)
 
-    col <- switch(input$color,
-      "Severity"    = list(var="severity", type="factor"),
-      "Casualties"  = list(var="no_casualt", type="int"),
-      "Time"        = list(var="a_time_hr", type="int"),
-      "Vehicles"    = list(var="no_vehicle", type="int"),
-      "Speed limit" = list(var="speed_limi", type="int"),
-      list(var="none", type="none"))
+    col <- map_choice(input$color)
+    scale <- map_choice(input$scale)
 
     pal <- c("#A52278", "#993086", "#8C3C97", 
       "#6D328A", "#4E2B81", "#3B264B", "#180B11", "#000000")
@@ -118,15 +123,19 @@ shinyServer(function(input, output, session) {
 
     if(col$var == "none"){
       l <- leafletProxy("mymap", session, data=ax) %>%
-        addCircleMarkers(~long, ~lat, radius=~1+(no_vehicle**1.5), fillOpacity=getAlpha(),
+        addCircleMarkers(~long, ~lat, 
+          radius=~input$base+(eval(parse(text=scale$var))**1.5), 
+          fillOpacity=getAlpha(),
           color=NA, popup=~text, fillColor = "black",
           layerId=paste0("p", 1:nrow(ax))) %>%
         removeControl(layerId="legend") 
 
     } else {
 
     l <- leafletProxy("mymap", session, data=ax) %>%
-      addCircleMarkers(~long, ~lat, radius=~1+(no_vehicle**1.5), fillOpacity=getAlpha(),
+      addCircleMarkers(~long, ~lat, 
+        radius=~input$base+(eval(parse(text=scale$var))**1.5), 
+        fillOpacity=getAlpha(),
         color=NA, popup=~text, fillColor = ~col_fn(col)(ax[[col$var]]),
         layerId=paste0("p", 1:nrow(ax))) %>%
       addLegend("bottomleft", pal=col_fn(col), values=ax[[col$var]], 

styles.css

@@ -155,3 +155,7 @@ label.control-label[for=scale]{
 .nav-tabs{
   margin-bottom: 5px;
 }
+
+p.intro{
+  margin-bottom: 15px;
+}

ui.R

@@ -26,10 +26,12 @@ $( 'div#mymap' ).append(spinner.el);"),
         width = 360, height = "auto",
 
         h2(),
-        p(strong("Blackspot"), " shows vechicle collisions in",
-          "the city of Edinburgh, UK. Data from:", 
+        p(class="intro",
+          strong("Blackspot"), " shows vechicle collisions in",
+          "the city of Edinburgh, UK. Data from", 
           a("Edinburgh Open Data.", 
-            href="http://www.edinburghopendata.info/dataset/vehicle-collisions")),
+            href="http://www.edinburghopendata.info/dataset/vehicle-collisions",
+            target="_blank")),
 
         tabsetPanel(
           tabPanel("Controls",
@@ -51,18 +53,19 @@ $( 'div#mymap' ).append(spinner.el);"),
               ),
 
               column(6, 
-                # div(style="display:inline-block; height: 150px;", 
                 selectInput("scale", label="Scale by:", width=120, 
-                  choices=c("None", "Severity", "Casualties", "Time", 
-                    "Vehicles", "Speed limit"))#)
+                  selected="Vehicles",
+                  choices=c("Casualties", "Vehicles"))#)
               )
             ),
 
-            hr(),
+            hr(class="thin"),
             p("Under development by",
-              a("@benjaminlmoore", href="http://twitter.com/benjaminlmoore"),
+              a("@benjaminlmoore", href="http://twitter.com/benjaminlmoore",
+                target="_blank"),
               HTML("•"), "See the code on ", 
-              a("github", href="http://github.com/blmoore/blackspot"),
+              a("github", href="http://github.com/blmoore/blackspot",
+                target="_blank"),
               class="foot")
           ),
 
@@ -71,15 +74,32 @@ $( 'div#mymap' ).append(spinner.el);"),
             plotOutput("monthTotals", height = "120px")
           ),
           tabPanel("About",
-
-            hr(class="thin"),
-            p("Under active development by ", 
-              a("@benjaminlmoore", href="http://twitter.com/benjaminlmoore"),
-              HTML("—"), "code available on ",
-              a("github", href="http://github.com/blmoore/blackspot"),
-              "(original Shiny code adapted from",
-              a("Superzip", href="https://github.com/jcheng5/superzip"), 
-              "by Joe Cheng).", class="foot")
+            p("Explore vehicle collisions recorded in Edinburgh",
+              "between 2010 and 2013 in this interactive data visualisation."
+              ),
+            p("Blackspot is written in ", 
+              a("Shiny,", href="http://shiny.rstudio.com/", target="_blank"),
+              "a web application framework for the R language.",
+              "Maps are built with ",
+              a("leaflet.js", href="http://leafletjs.com/", target="_blank"),
+              "via the",
+              a("R language bindings,", href="https://rstudio.github.io/leaflet/",
+                target="_blank"),
+              "and using map data from",
+              a("Open Street Map.", href="http://www.openstreetmap.org/copyright",
+                target="_blank")
+              ),
+            p("Project under development by ",
+              a("@benjaminlmoore", href="http://twitter.com/benjaminlmoore",
+                target="_blank"),
+              HTML("—"),
+              "see the full code on ", 
+              a("github", href="http://github.com/blmoore/blackspot",
+                target="_blank"),
+              "or run locally with:"
+            ),
+            pre("shiny::runGitHub('blmoore/blackspot')"),
+            hr(class="thin")
           ) 
           # end about panel
         ),

www/ion.rangeSlider.skinFlat.css

@@ -60,17 +60,19 @@
     width: 16px; height: 18px;
     top: 22px;
     background-position: 0 -120px;
+    border: none;
+    box-shadow: none;
 }
 .irs-slider.state_hover, .irs-slider:hover {
-    background-position: 0 -150px;
+   background-position: 0 -150px;
 }
 
 .irs-min, .irs-max {
     color: #999;
     font-size: 10px; line-height: 1.333;
     text-shadow: none;
     top: 0; padding: 1px 3px;
-    background: #e1e4e9;
+  /*  background: #e1e4e9; */
     -moz-border-radius: 4px;
     border-radius: 4px;
 }
@@ -104,3 +106,9 @@
 
 .irs-disabled {
 }
+
+
+#irs-active-slider, .irs-slider:hover {
+  background: url(../img/sprite-skin-flat.png) repeat-x;
+  background-position: 0 -120px;
+}