Merge pull request #33 from ceenell/time-chart

add basic time chart components with animation

.gitignore

@@ -70,4 +70,5 @@ yarn-error.log*
 .Rproj.user
 
 # Omit large data files in Vue build
-public/*.csv
+public/*.csv
+public/*.json

3_visualize.yml

@@ -4,6 +4,7 @@ packages:
   - dplyr
   - sf
   - xml2
+  - jsonlite 
   - data.table
   - stringr
 
@@ -46,5 +47,9 @@ targets:
     command: get_site_coords(
       target_name,
       sites_sf = gw_sites_sf)
+
+  public/perc_df.json:
+    command: site_prop_timeseries(target_name, 
+      gw_anomaly_data_w_colors)
 
 

3_visualize/src/svg_utils_vue.R

@@ -17,4 +17,26 @@ get_site_coords <- function(file_out, sites_sf){
     mutate(site_no = paste0('gwl_', sites_sf$site_no)) %>% 
     filter(!is.na(x)) %>%
     write_csv(file_out)
+}
+
+site_prop_timeseries <- function(file_out, gw_anomaly_data_w_colors){
+  gw <- gw_anomaly_data_w_colors %>% 
+    filter(!is.na(quant_category)) %>% 
+    group_by(Date) %>%
+    filter(wyday == max(wyday))
+
+  ## write json with timeseries of sites in each category 
+  gw %>% 
+    group_by(Date, wyday, quant_category) %>%
+    summarize(n_sites = length(unique(site_no))) %>% 
+    left_join(gw  %>% 
+                group_by(Date, wyday) %>%
+                summarize(n_sites_total = length(unique(site_no)))) %>%
+    mutate(perc = n_sites/n_sites_total) %>%
+    ungroup() %>%
+    group_by(quant_category)%>%
+    nest(!quant_category) %>%
+    toJSON() %>%
+    write_json(file_out)
+
 }

package.json

@@ -21,12 +21,13 @@
     "core-js": "^3.6.5",
     "d3": "^5.16.0",
     "file-loader": "^4.3.0",
+    "gsap": "^3.0.0-beta.11",
     "html-loader": "^2.0.0",
     "lint": "^0.7.0",
     "mobile-device-detect": "^0.4.3",
     "uswds": "^2.8.1",
-    "vue": "2.6.12",
     "v-img": "^0.2.0",
+    "vue": "2.6.12",
     "vue-analytics": "^5.22.1",
     "vue-browser-detect-plugin": "^0.1.13",
     "vue-carousel": "^0.18.0",

public/quant_peaks.csv

@@ -1,7 +1,7 @@
 color,peak_mid,quant,path_quant
 #7E1900,5,Verylow,M-10 0 C -10 0 0 45 10 0 Z
 #C1A53A,17.5,Low,M-10 0 C -10 0 0 32 10 0 Z
-#D1ECC9,50,Normal,M-10 0 C -10 0 0 15 10 0 Z
-#D1ECC9,50,Normal,M-10 0 C -10 0 0 -15 10 0 Z
+#8fce83,50,Normal,M-10 0 C -10 0 0 15 10 0 Z
+#8fce83,50,Normal,M-10 0 C -10 0 0 -15 10 0 Z
 #479BC5,82.5,High,M-10 0 C -10 0 0 -32 10 0 Z
 #1A3399,95,Veryhigh,M-10 0 C -10 0 0 -45 10 0 Z

src/App.vue

@@ -3,7 +3,7 @@
     <!-- <WindowSize v-if="checkTypeOfEnv === '-test build-'" /> -->
     <HeaderUSGS />
     <InternetExplorerPage v-if="isInternetExplorer" />
- <!-- an empty string in this case means the 'prod' version of the application   -->
+    <!-- an empty string in this case means the 'prod' version of the application   -->
     <router-view
       v-if="!isInternetExplorer"
     />
@@ -63,13 +63,20 @@
 // Fonts
 @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;600;700;900&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Assistant:wght@200;300;400;500;600;700;800&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Abel&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');
+@import url("https://use.typekit.net/yww2frw.css");
+
+$Abel: 'Abel', sans-serif;
 $Cairo: 'Cairo', sans-serif;
 $Assistant: 'Assistant', sans-serif;
+$Noto: 'Noto Serif', serif;
+$acu_bold: 'acumin-pro', sans-serif;
 
-// Type
 html,
 body {
       height:100%;
+      background-color: rgb(237, 237, 237);
       margin: 0;
       padding: 0;
       line-height: 1.2;
@@ -94,23 +101,25 @@ h1{
   }
 }
 h2{
-  font-weight: 300;
+  font-weight: 400;
   text-align: left;
   font-family:$Assistant;
-  font-size: 1.3em;
+  font-size: 3em;
   margin-top: 5px;
-  line-height: 1.2;
+  line-height: 1;
+  text-shadow: 10px 10px 100px rgba(20, 20, 20, 0.8);
   @media screen and (max-width: 600px) {
     font-size: 2em;
   }
+  padding-left: 1rem;
 }
 h3{
   font-size: 1.5em;
-  padding-top: .5em;
+  padding-top: 0em;
   font-family: $Assistant;
   font-weight: 300;
   @media screen and (max-width: 600px) {
-      font-size: 1.4em;
+      font-size: 1em;
   }  
 }
 p, text {