Permalink
Browse files

about panel, slider tweaks

  • Loading branch information...
1 parent db4f803 commit 03402bb4736357218b3ef6e0163e43de35369d40 @blmoore committed May 30, 2015
Showing with 70 additions and 29 deletions.
  1. +18 −9 server.R
  2. +4 −0 styles.css
  3. +38 −18 ui.R
  4. +10 −2 www/ion.rangeSlider.skinFlat.css
View
@@ -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]],
View
@@ -155,3 +155,7 @@ label.control-label[for=scale]{
.nav-tabs{
margin-bottom: 5px;
}
+
+p.intro{
+ margin-bottom: 15px;
+}
View
@@ -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("&bull;"), "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("&mdash;"), "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("&mdash;"),
+ "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
),
@@ -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;
+}

0 comments on commit 03402bb

Please sign in to comment.