starting on style for map and adding invisible mouseover boxes

layout/css/svg.css

@@ -1,3 +1,34 @@
+.interior-state {
+  fill:#b8bfac;
+  stroke:#f5f8ef;
+}
+.exterior-state {
+  fill:#b8bfac;
+  stroke:none;
+}
+.watermark {
+  cursor: pointer;
+  fill: #f1f1f1;
+  stroke: #bdbdbd;
+  stroke-width:0.5;
+}
+
+.site-dot {
+  stroke:#2c5258;
+  stroke-linecap:round;
+  stroke-width:3;
+  opacity:0.7;
+}
+
+.gage-count-bar{
+  opacity:0.4;
+  fill: #9BC1BC;
+}
+.selected-year{
+  opacity:1;
+  fill: #ED6A5A;
+}
+
 .doy-polyline {
   fill:none;
   stroke:#e0e0e0;
@@ -19,8 +50,23 @@
   opacity:1;
 }
 
+.axis-labels{
+  fill:#666666;
+  stroke:none;
+  font-size: 0.75em;
+}
+
 .total-hydrograph {
   fill:none;
   stroke:#e0e0e0;
   stroke-width:0.5;
+}
+
+.svg-text {
+  -webkit-touch-callout: none; /* iOS Safari */
+  -webkit-user-select: none;   /* Chrome/Safari/Opera */
+	-khtml-user-select: none;    /* Konqueror */
+	-moz-user-select: none;      /* Firefox */
+	-ms-user-select: none;       /* Internet Explorer/Edge */
+	cursor: default;
 }

layout/css/viz.css

@@ -187,10 +187,4 @@ body{
 
   }
 }
-.gage-count-bar {
-  opacity : 0.3;
-}
-.gage-count-bar.selected-year{
-  opacity: 1.0;
-  fill: red;
-}
+

layout/js/gages.js

@@ -102,10 +102,7 @@ var hovertext;
 
   hovertext = function(text, event) {
     if (text) {
-      var id = event.currentTarget.id;
-      var year = id.slice(2);
-      var tooltipText = text + ' in ' + year;
-      mapSVG.showTooltip(event.clientX, event.clientY, tooltipText);
+      mapSVG.showTooltip(event.clientX, event.clientY, text);
     } else {
       mapSVG.hideTooltip();
     }

scripts/process/process_bar_chart.R

@@ -8,23 +8,32 @@ process.bar_chart <- function(viz){
 
   max.sites <- max(bars$n)
   library(xml2)
-  g.bars <- read_xml("<g id='year-bars'/>")
-  # since all of the style and formatting stuff will happen in visualize, this will assume a 100 x 100 px plot that can be scaled and fit elsewhere. 
-  w <- round(size[['x']]*72, 1)
+  root <- read_xml("<g/>") 
+  g.bars <- xml_add_child(root, 'g', id='year-bars')
+  g.mousers <- xml_add_sibling(g.bars, 'g', id = 'year-bars-mouser')
+
+  lm <- 45 
+  w <- round(size[['x']]*72, 1) - lm
   h <- 100
+
   spc <- round(0.002*w, 2)
   bin.w <- round((w-(length(bars$n)-1)*spc)/length(bars$n),2)
   bin.h <- round(bars$n/max.sites*h, 2)
-  warning('just starting on this')
+
   for (i in 1:length(bars$year)){
     xml_add_child(g.bars, 'rect', class = "gage-count-bar",
                   x = as.character((i-1)*(bin.w+spc)), 
                   height = as.character(bin.h[i]), 
-                  width = as.character(bin.w), y = as.character(h - bin.h[i]), id = paste0('yr', bars$year[i]), class = paste0('total-bar-', bars$year[i]),
-                  onmousemove = sprintf("hovertext('%s gages', evt);", bars$n[i]),
+                  width = as.character(bin.w), y = as.character(h - bin.h[i]), 
+                  id = paste0('yr', bars$year[i]), class = paste0('total-bar-', bars$year[i])) #
+    xml_add_child(g.mousers, 'rect', opacity = "0.0",
+                  x = as.character((i-1)*(bin.w+spc)-spc/2), 
+                  height = as.character(h), 
+                  width = as.character(bin.w+spc), y = "0",
+                  onmousemove = sprintf("hovertext('%s gages in %s', evt);", bars$n[i], bars$year[i]),
                   onmouseover = sprintf("vizlab.pause('%s')", bars$year[i]),
-                  onmouseout = sprintf("hovertext('');vizlab.play()", bars$year[i])) #
+                  onmouseout = sprintf("hovertext('');vizlab.play()", bars$year[i]))
   }
-  write_xml(x = g.bars, file = viz[['location']])
+  write_xml(x = root, file = viz[['location']])
 
 }

scripts/process/process_map.R

@@ -26,7 +26,7 @@ points_sp <- function(locations){
     sp::SpatialPointsDataFrame(data = locations[c('site_no')])
 }
 
-shifts <- list(AK = list(scale = 0.33, shift = c(80,-450), rotate = -50),
+shifts <- list(AK = list(scale = 0.37, shift = c(90,-460), rotate = -50),
                HI = list(scale = 1, shift = c(520, -110), rotate = -35),
                PR = list(scale = 2.5, shift = c(-140, 90), rotate=20))
 

scripts/visualize/visualize-map.R

@@ -8,7 +8,6 @@ size_map_svg <- function(sp){
 }
 
 visualize.map_thumbnail <- function(viz){
-  library(xml2)
   library(dplyr)
 
   data <- readDepends(viz)
@@ -58,14 +57,15 @@ visualize.states_svg <- function(viz){
   defs <- xml_add_child(svg, 'defs')
 
   g.states <- xml_add_child(svg, 'g', 'id' = 'state-polygons')
-  g.sites <- xml_add_child(svg, 'g', 'id' = 'site-dots',stroke="green", 'stroke-linecap'="round", 'stroke-width'="3")
+  g.sites <- xml_add_child(svg, 'g', 'id' = 'site-dots')
   g.watermark <- xml_add_child(svg, 'g', id='usgs-watermark', 
-                               transform = sprintf('translate(2,%s)scale(0.20)', as.character(vb.num[4]-30)))
-
+                               transform = sprintf('translate(45,%s)scale(0.20)', as.character(vb.num[4]-3)))
 
+
   for (i in 1:length(state.name)){
     id.name <- gsub(state.name[i], pattern = '[ ]', replacement = '_')
-    xml_add_child(g.states, 'path', d = xml_attr(p[i], 'd'), id=id.name)
+    class <- ifelse(state.name[i] %in% c('AK','HI','PR'), 'exterior-state','interior-state')
+    xml_add_child(g.states, 'path', d = xml_attr(p[i], 'd'), id=id.name, class=class)
   }
   rm(p)
 
@@ -79,7 +79,9 @@ visualize.states_svg <- function(viz){
   if (tail(chunk.e,1) == tail(chunk.s,1)) stop("can't handle this case")
 
   for (i in 1:length(chunk.s)){
-    xml_add_child(g.sites, 'path', d = paste("M",cxs[chunk.s[i]:chunk.e[i]], " ",  cys[chunk.s[i]:chunk.e[i]], "v0", collapse="", sep=''), id=sprintf(group.names, i))
+    xml_add_child(g.sites, 'path', 
+                  d = paste("M",cxs[chunk.s[i]:chunk.e[i]], " ",  cys[chunk.s[i]:chunk.e[i]], "v0", collapse="", sep=''), 
+                  id=sprintf(group.names, i), class='site-dot')
   }
 
   rm(c)
@@ -88,21 +90,59 @@ visualize.states_svg <- function(viz){
   xml_add_child(g.watermark,'path', d=watermark[['wave']], onclick="window.open('https://www2.usgs.gov/water/','_blank')", 'class'='watermark')
 
   bars.xml <- read_xml(bars)
+
   svg <- add_bar_chart(svg, bars.xml)
   write_xml(svg, viz[['location']])
 
 }
 
 add_bar_chart <- function(svg, bars){
-  vb <- as.numeric(strsplit(xml_attr(svg, "viewBox"), '[ ]')[[1]])
-  xml_attr(bars, 'transform') <- sprintf("translate(0,%s)", vb[4])
-
 
-  h <- xml_find_all(bars, '//*[local-name()="rect"]') %>% xml_attr('height') %>% as.numeric() %>% max
-  vb[4] <- vb[4] + h
+  library(dplyr)
+  vb <- as.numeric(strsplit(xml_attr(svg, "viewBox"), '[ ]')[[1]])
+  ax.buff <- 5
+  all.bars <- xml_children(xml_children(bars)[1])
+  all.mousers <- xml_children(xml_children(bars)[2])
+  last.attrs <- tail(all.bars, 1) %>% xml_attrs() %>% .[[1]] 
+  full.width <- as.numeric(last.attrs[['x']]) + as.numeric(last.attrs[['width']])
+  xml_attr(bars, 'transform') <- sprintf("translate(%s,%s)", vb[3]-full.width, vb[4])
+
+  heights <- all.bars %>% xml_attr('height') %>% as.numeric()
+  h <- max(heights)
+  max.i <- which(h == heights)[1]
+  # this is a hack to get the gage count from the element. Brittle:
+  gage.meta <- xml_attr(all.mousers, 'onmousemove') %>% 
+    stringr::str_extract_all("\\(?[0-9.]+\\)?")
+  years <-  lapply(gage.meta,function(x) x[2]) %>% unlist
+  max.gages <- gage.meta[[max.i]] %>% .[1] %>% as.numeric
 
+  y.tick.labs <- pretty(c(0,max.gages))[pretty(c(0,max.gages)) < max.gages]
+  y.ticks <- (h+ax.buff-round(y.tick.labs*h/max.gages,1)) %>% as.character()
+  x.tick.labs <- seq(1800,2020, by=10) %>% as.character()
+
+  browser()
+  vb[4] <- vb[4] + h + ax.buff + 20 # last part for the axis text
   xml_attr(svg, "viewBox") <- paste(vb, collapse=' ')
+  g.axes <- xml_add_child(bars, 'g', id='axes')
+  xml_add_child(g.axes, 'path', d=sprintf("M-%s,%s v%s", ax.buff, "0", h+ax.buff), id='y-axis', stroke='black')
+  xml_add_child(g.axes, 'path', d=sprintf("M-%s,%s h%s", ax.buff, h+ax.buff, ax.buff+full.width), id='x-axis', stroke='black')
+  g.y <- xml_add_child(g.axes, 'g', id = 'y-axis-labels', class='axis-labels svg-text')
+  g.x <- xml_add_child(g.axes, 'g', id = 'x-axis-labels', class='axis-labels svg-text')
+  for (i in 1:length(y.ticks)){
+    xml_add_child(g.y, 'text', y.tick.labs[i], y = y.ticks[i], 
+                  x=as.character(-ax.buff), 'text-anchor' = 'end', dx = "-0.33em")
+  }
+  for (year in x.tick.labs){
+    use.i <- which(years == year)
+    if (length(use.i) > 0){
+      attrs <- xml_attrs(all.mousers[[use.i[1]]])
+      xml_add_child(g.x, 'text', year, y = as.character(h+ax.buff), 
+                    x=as.character(as.numeric(attrs[['x']])+as.numeric(attrs[['width']])/2), 
+                    'text-anchor' = 'middle', dy = "1.0em")
+    }
+  }
 
+
   xml_add_child(svg, bars)
   return(svg)
 }
@@ -144,12 +184,12 @@ clean_up_svg <- function(svg, viz){
 #' 
 #' @result a plot
 createThumbnailPlot <- function(states, sites, bars){
-
+  library(xml2)
   par(mar=c(0,0,0,0), oma=c(0,0,0,0))
   sp::plot(states, expandBB = c(0.8,0,0,1.5))
   sp::plot(sites, add=TRUE, pch = 20, cex=0.05)
 
-  bars.xml <- xml2::read_xml(bars)
+  bars.xml <- xml2::read_xml(bars) %>% xml_child()
   rects <- xml_children(bars.xml)
   xleft <- xml_attr(rects, 'x') %>% as.numeric()
   ys <- xml_attr(rects, 'y') %>% as.numeric()