Merge pull request #62 from ceenell/annotate-legend

finishing-for-beta-touches

.gitignore

@@ -77,5 +77,5 @@ yarn-error.log*
 
 # Omit large data files in Vue build
 public/*.csv
-
+data-archive/
 scratch.R

0_config.yml

@@ -43,9 +43,9 @@ targets:
 ##-- Fetch configs --##
 
   viz_start_date:
-    command: as.Date(I('2020-10-01'))
+    command: as.Date(I('2021-01-01'))
   viz_end_date:
-    command: as.Date(I('2021-09-30'))
+    command: as.Date(I('2021-12-31'))
   # Use bounding box in case we want to do this regionally someday
   # Start with CONUS only
   # I don't think this is being used any more ...

1_fetch.yml

@@ -16,7 +16,6 @@ targets:
   1_fetch:
     depends:
       - 1_fetch/out/gw_sites.rds
-      - 1_fetch/out/gw_site_info.csv
       - 1_fetch/out/gw_data.csv
 
 ##-- Historic GW sites and data --##

3_visualize.yml

@@ -22,7 +22,7 @@ targets:
     depends:
       - visualizations/data/gw-conditions-peaks-map.svg.ind
       - visualizations/data/gw-conditions-site-coords.csv.ind
-      - visualizations/data/gw-conditions-wy20.csv.ind
+      - visualizations/data/gw-conditions-year21.csv.ind
       - visualizations/data/gw-conditions-daily-proportions.csv.ind
       - src/assets/gw-conditions-peaks-map.svg # Currently a temporary fix!
 
@@ -37,7 +37,7 @@ targets:
     depends:
      - '2_process/out/nws_states.shp'
 
-  3_visualize/out/gw-conditions-wy20.csv:
+  3_visualize/out/gw-conditions-year21.csv:
     command: gwl_to_peak(
       target_name, 
       gw_anomaly_data_w_colors)
@@ -56,8 +56,8 @@ targets:
   visualizations/data/gw-conditions-peaks-map.svg.ind:
     command: s3_put(target_name, '3_visualize/out/gw-conditions-peaks-map.svg', config_file = I('lib/cfg/s3_config_viz.yml'))
 
-  visualizations/data/gw-conditions-wy20.csv.ind:
-    command: s3_put(target_name, '3_visualize/out/gw-conditions-wy20.csv', config_file = I('lib/cfg/s3_config_viz.yml'))
+  visualizations/data/gw-conditions-year21.csv.ind:
+    command: s3_put(target_name, '3_visualize/out/gw-conditions-year21.csv', config_file = I('lib/cfg/s3_config_viz.yml'))
 
   visualizations/data/gw-conditions-site-coords.csv.ind:
     command: s3_put(target_name, '3_visualize/out/gw-conditions-site-coords.csv', config_file = I('lib/cfg/s3_config_viz.yml'))

public/index.html

@@ -26,13 +26,13 @@
       <meta property="og:url" content="https://labs.waterdata.usgs.gov/visualizations/gw-conditions/index.html#/">
       <meta property="og:title" content="U.S. Groundwater Conditions">
       <meta property="og:description" content="The low down on flow down low">
-      <meta property="og:image" content="https://labs.waterdata.usgs.gov/visualizations/gw-conditions/og_1200_630-01.png">
+      <meta property="og:image" content="https://labs.waterdata.usgs.gov/visualizations/thumbnails/gw-conditions-og.png">
       <!-- Twitter -->
       <meta property="twitter:card" content="summary_large_image">
       <meta property="twitter:url" content="https://labs.waterdata.usgs.gov/visualizations/gw-conditions/index.html#/">
       <meta property="twitter:title" content="U.S. Groundwater Conditions">
       <meta property="twitter:description" content="The low down on flow down low">
-      <meta property="twitter:image" content="https://labs.waterdata.usgs.gov/visualizations/gw-conditions/og_1200_630-01.png">
+      <meta property="twitter:image" content="https://labs.waterdata.usgs.gov/visualizations/thumbnails/gw-conditions-og.png">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 <script type='application/ld+json'>
       { "@context": "http://www.schema.org",
@@ -60,7 +60,7 @@
       },
       "audience": { "@context": "http://schema.org", "@type": "Audience", "audienceType": "General public"},
       "publisher": { "@context": "http://schema.org", "@type": "Organization", "legalName": "U.S. Geological Survey" },
-      "keywords": "water, data viz, data visualization, groundwater, animation, map" }
+      "keywords": "water, data viz, data visualization, groundwater, animation, map, percentile, current conditions, drought, wells" }
     </script>
   </head>
   <body>

src/App.vue

@@ -81,11 +81,11 @@ body {
         //font-size: 16px;
       }
   }
-  h1, h2, h3 {
+  h1, h2, h3, h4 {
     line-height: 1;
     text-align: left;
     font-family: $Assistant;
-    font-weight: 600;
+    font-weight: 500;
     margin: 0 0;
   }
 h1{
@@ -95,25 +95,37 @@ h1{
   }
 }
 h2{
-  font-size: 2.8em;
+  font-size: 2.75em;
+  font-weight: 700;
   @media screen and (max-width: 800px) {
-        font-size: 2.3rem;
+        font-size: 2rem;
       }
   @media screen and (max-width: 650px) {
     font-size: 1.3em;
   }
 }
 h3{
   font-size: 1.5em;
-  padding-top: 0em;
+  //padding-top: 0.5em;
   @media screen and (max-width: 800px) {
       font-size: 1.3em;
   }  
   @media screen and (max-width: 650px) {
       font-size: 1em;
   }  
 }
-p, text {
+h4{
+  font-size: 1.2em;
+  padding-top: 0em;
+  font-weight: 600;
+  @media screen and (max-width: 800px) {
+      font-size: 1em;
+  }  
+  @media screen and (max-width: 650px) {
+      font-size: 1em;
+  }  
+}
+p, text, caption {
   padding: 0.5em 0 0 0; 
   font-family: $Assistant;
   font-weight: 400;
@@ -123,6 +135,14 @@ p, text {
         font-size: 16px;
       }
 }
+caption {
+  padding: 0;
+  font-style: italic;
+  font-size: 0.8rem;
+  display: block;
+  width: 100%;
+  max-width: 700px;
+}
 // make svg text smaller than main text at small viewport sizes so it fits on the screen
 text {
   //font-size: 20px;