diff --git a/0_config.yml b/0_config.yml index 21645fe..28ab690 100644 --- a/0_config.yml +++ b/0_config.yml @@ -43,9 +43,9 @@ targets: ##-- Fetch configs --## viz_start_date: - command: as.Date(I('2022-01-01')) + command: as.Date(I('2023-01-01')) viz_end_date: - command: as.Date(I('2022-12-31')) + command: as.Date(I('2023-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 ... diff --git a/3_visualize.yml b/3_visualize.yml index 077d11c..24faa25 100644 --- a/3_visualize.yml +++ b/3_visualize.yml @@ -75,8 +75,22 @@ targets: visualizations/data/gw-conditions-daily-proportions.csv.ind: command: s3_put(target_name, '3_visualize/out/gw-conditions-daily-proportions.csv', config_file = I('lib/cfg/s3_config_viz.yml')) + # MUST BE RUN MANUALLY, AS UPLOADING FILES UPDATES THE BETA SITE + # Upload to Prod (beta bucket) a copy of the timeseries, daily proportions, site coords, and time labels to use on the beta site + visualizations/data/gw-conditions-peaks-timeseries-beta.csv.ind: + command: s3_put(target_name, '3_visualize/out/gw-conditions-peaks-timeseries.csv', config_file = I('lib/cfg/s3_config_viz_beta.yml')) + + visualizations/data/gw-conditions-daily-proportions-beta.csv.ind: + command: s3_put(target_name, '3_visualize/out/gw-conditions-daily-proportions.csv', config_file = I('lib/cfg/s3_config_viz_beta.yml')) + + visualizations/data/gw-conditions-site-coords-beta.csv.ind: + command: s3_put(target_name, '3_visualize/out/gw-conditions-site-coords.csv', config_file = I('lib/cfg/s3_config_viz_beta.yml')) + + visualizations/data/gw-conditions-time-labels-beta.csv.ind: + command: s3_put(target_name, '2_process/out/gw-conditions-time-labels.csv', config_file = I('lib/cfg/s3_config_viz_beta.yml')) + # MUST BE RUN MANUALLY, AS UPLOADING FILES UPDATES THE LIVE SITE - # Upload to Prod a copy of the timeseries, daily proportions, site coords, and time labels to use on the live site + # Upload to Prod (prod bucket) a copy of the timeseries, daily proportions, site coords, and time labels to use on the live site visualizations/data/gw-conditions-peaks-timeseries-live.csv.ind: command: s3_put(target_name, '3_visualize/out/gw-conditions-peaks-timeseries.csv', config_file = I('lib/cfg/s3_config_viz.yml')) diff --git a/3_visualize/out/gw-conditions-daily-proportions-s3copy.ind b/3_visualize/out/gw-conditions-daily-proportions-s3copy.ind index 47030c8..ffd34c4 100644 --- a/3_visualize/out/gw-conditions-daily-proportions-s3copy.ind +++ b/3_visualize/out/gw-conditions-daily-proportions-s3copy.ind @@ -1,2 +1,2 @@ -hash: 7e98eb082cb2abda37fcd663230f1940 +hash: 5d9d05238386e4f818f4d6f1ca051bc7 diff --git a/3_visualize/out/gw-conditions-peaks-timeseries-s3copy.ind b/3_visualize/out/gw-conditions-peaks-timeseries-s3copy.ind index 11b358f..721ae77 100644 --- a/3_visualize/out/gw-conditions-peaks-timeseries-s3copy.ind +++ b/3_visualize/out/gw-conditions-peaks-timeseries-s3copy.ind @@ -1,2 +1,2 @@ -hash: 27af0faa6ba9d1aa69ced5d194c1376b +hash: 15f470784c897971afd9c7a7f63366b2 diff --git a/3_visualize/out/gw-conditions-site-coords-s3copy.ind b/3_visualize/out/gw-conditions-site-coords-s3copy.ind index 8c4190d..e92e73d 100644 --- a/3_visualize/out/gw-conditions-site-coords-s3copy.ind +++ b/3_visualize/out/gw-conditions-site-coords-s3copy.ind @@ -1,2 +1,2 @@ -hash: 5c330a701c80681e587e4f1afe1f0139 +hash: e2694c1d4d74f9e2ffd76c2f2c11f955 diff --git a/3_visualize/out/gw-conditions-time-labels-s3copy.ind b/3_visualize/out/gw-conditions-time-labels-s3copy.ind index 4efda5b..07e57f5 100644 --- a/3_visualize/out/gw-conditions-time-labels-s3copy.ind +++ b/3_visualize/out/gw-conditions-time-labels-s3copy.ind @@ -1,2 +1,2 @@ -hash: 8286962579ff4062969e873cc574bdd9 +hash: d28ab3ba24b2f8f26b0eb7d27eb657ea diff --git a/3_visualize/src/sf_utils_shift.R b/3_visualize/src/sf_utils_shift.R index fd5669c..d3d66a7 100644 --- a/3_visualize/src/sf_utils_shift.R +++ b/3_visualize/src/sf_utils_shift.R @@ -158,6 +158,10 @@ shift_sf <- function(obj_sf, rotation_deg, scale, shift, proj_str) { stopifnot(!is.na(st_crs(obj_sf))) + # store original projection (CONUS) to use to redefine projection + # once geometry is projected and shifted + proj_orig <- st_crs(obj_sf) + obj_sf_transf <- st_transform(obj_sf, proj_str) obj_sfg <- st_geometry(obj_sf_transf) obj_sfg_centroid <- st_centroid(obj_sfg) @@ -176,10 +180,10 @@ shift_sf <- function(obj_sf, rotation_deg, scale, shift, proj_str) { # Want to return a complete `sf` object, not just the geometry # Not features were filtered, the values were just updated, so # we can make a copy of `obj_sf` and then insert the updated - # geometry + add the appropriate projection info + # geometry + set the projection to the original CONUS projection obj_sf_shifted <- obj_sf_transf # Make a copy st_geometry(obj_sf_shifted) <- obj_sfg_shifted - st_crs(obj_sf_shifted) <- proj_str + st_crs(obj_sf_shifted) <- proj_orig return(obj_sf_shifted) } @@ -265,6 +269,10 @@ shift_points_sf <- function(pts_sf, rotation_deg, scale, shift, proj_str, ref_sf stopifnot(!is.na(st_crs(pts_sf))) + # store original projection (CONUS) to use to redefine projection + # once geometry is projected and shifted + proj_orig <- st_crs(pts_sf) + pts_sf_transf <- st_transform(pts_sf, proj_str) pts_sfg <- st_geometry(pts_sf_transf) @@ -283,10 +291,10 @@ shift_points_sf <- function(pts_sf, rotation_deg, scale, shift, proj_str, ref_sf # Want to return a complete `sf` object, not just the geometry # No features were filtered, the values were just updated, so # we can make a copy of `pts_sf` and then insert the updated - # geometry + add the appropriate projection info + # geometry + set the projection to the original CONUS projection pts_sf_shifted <- pts_sf # Make a copy st_geometry(pts_sf_shifted) <- pts_sfg_shifted - st_crs(pts_sf_shifted) <- proj_str + st_crs(pts_sf_shifted) <- proj_orig return(pts_sf_shifted) } diff --git a/lib/cfg/s3_config_viz_beta.yml b/lib/cfg/s3_config_viz_beta.yml new file mode 100644 index 0000000..2183239 --- /dev/null +++ b/lib/cfg/s3_config_viz_beta.yml @@ -0,0 +1,3 @@ +profile: 'default' + +bucket: 'water-visualizations-beta-website' diff --git a/src/App.vue b/src/App.vue index 5c23cfe..e3da04a 100644 --- a/src/App.vue +++ b/src/App.vue @@ -99,7 +99,10 @@ h2{ font-weight: 700; @media screen and (max-width: 800px) { font-size: 2rem; - } + } + @media screen and (max-height: 770px) { + font-size: 2em; + } @media screen and (max-width: 650px) { font-size: 1.3em; } @@ -109,10 +112,13 @@ h3{ //padding-top: 0.5em; @media screen and (max-width: 800px) { font-size: 1.3em; - } + } + @media screen and (max-height: 770px) { + font-size: 1.25em; + } @media screen and (max-width: 650px) { font-size: 1em; - } + } } h4{ font-size: 1.2em; diff --git a/src/assets/gw-conditions-labels-map.svg b/src/assets/gw-conditions-labels-map.svg index febbbe3..e92c8bf 100644 --- a/src/assets/gw-conditions-labels-map.svg +++ b/src/assets/gw-conditions-labels-map.svg @@ -2,18 +2,19 @@ - - - - - + + + + + + - U.S. Virgin Islands + U.S. Virgin Islands Puerto Rico Hawaii - American Samoa + American Samoa Guam - NorthernMariana Islands + NorthernMariana Islands Alaska diff --git a/src/assets/gw-conditions-peaks-map.svg b/src/assets/gw-conditions-peaks-map.svg index d5b898a..b074dbd 100644 --- a/src/assets/gw-conditions-peaks-map.svg +++ b/src/assets/gw-conditions-peaks-map.svg @@ -13,23 +13,23 @@ - + - - - - + + + + - - - - - + + + + + - + @@ -61,7 +61,7 @@ - + @@ -80,61 +80,61 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/GWL.vue b/src/components/GWL.vue index 4a01e10..927d24a 100644 --- a/src/components/GWL.vue +++ b/src/components/GWL.vue @@ -13,13 +13,16 @@ -
- + +
@@ -70,7 +73,7 @@ class="tooltiptext" style="font-size: 0.8rem;" > - The percentile calculates the percent of days in the past that groundwater was below the current value. For a site is in the 10th percentile, water levels have been lower 10% of the time. + The percentile calculates the percent of days in the past that groundwater was below the current value. For a site in the 10th percentile, water levels have been lower 10% of the time. ), indicating where groundwater is comparatively high or low to what has been observed in the past. The corresponding time series chart shows the percent of sites in each water-level category through time.

@@ -144,15 +147,18 @@ import { isMobile } from 'mobile-device-detect'; export default { name: "GWLsvg", - components: { - GWLmap, - mapLabels, - Legend: () => import( /* webpackPreload: true */ /*webpackChunkName: "Legend"*/ "./../components/Legend"), - authorship: () => import( /* webpackPreload: true */ /*webpackChunkName: "section"*/ "./../components/Authorship") - }, - data() { + components: { + GWLmap, + mapLabels, + Legend: () => import( /* webpackPreload: true */ /*webpackChunkName: "Legend"*/ "./../components/Legend"), + authorship: () => import( /* webpackPreload: true */ /*webpackChunkName: "section"*/ "./../components/Authorship") + }, + data() { return { publicPath: process.env.BASE_URL, // this is need for the data files in the public folder, this allows the application to find the files when on different deployment roots + vueTier: process.env.VUE_APP_TIER, // this is used to determine the file path suffix for data files + dataUrlPrefix: null, + dataFileSuffix: null, d3: null, mobileView: isMobile, // test for mobile @@ -183,7 +189,7 @@ export default { yScale: null, line: null, - // Blue-Brown categorical color scale + // Blue-Brown categorical color scale verylow: "#BF6200", low: "#FEB100", normal: "#B3B3B3", @@ -194,8 +200,23 @@ export default { } }, mounted(){ + // In the prod site we want to use the '-live' files. + // In the beta site we want to use the '-beta' files. + // These are uploaded manually, to hold off updating the beta or live site until we are ready + switch(this.vueTier) { + case '-test build-': + this.dataFileSuffix = ''; + break; + case '-beta build-': + this.dataFileSuffix = '-beta'; + break; + default: + this.dataFileSuffix = '-live'; + } + // The beta site needs to access the data files in the beta bucket on prod + this.dataUrlPrefix = this.vueTier == '-beta build-' ? '-beta' : '' this.d3 = Object.assign({d3Trans, scaleLinear, scaleThreshold, scaleOrdinal, select, selectAll, csv, utcFormat, line, path, axisBottom, axisLeft, format }); - + // resize const window_line = document.getElementById('line-container') this.width = window_line.clientWidth; @@ -211,21 +232,21 @@ export default { }, methods:{ isMobile() { - if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) { - return true - } else { - return false - } - }, - loadData() { + if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) { + return true + } else { + return false + } + }, + loadData() { const self = this; // read in data let promises = [ self.d3.csv(self.publicPath + "quant_peaks.csv", this.d3.autotype), // used to draw legend shapes - color palette needs to be pulled out - self.d3.csv("https://labs.waterdata.usgs.gov/visualizations/data/gw-conditions-peaks-timeseries-live.csv", this.d3.autotype), - self.d3.csv("https://labs.waterdata.usgs.gov/visualizations/data/gw-conditions-site-coords-live.csv", this.d3.autotype), - self.d3.csv("https://labs.waterdata.usgs.gov/visualizations/data/gw-conditions-daily-proportions-live.csv", this.d3.autotype), - self.d3.csv("https://labs.waterdata.usgs.gov/visualizations/data/gw-conditions-time-labels-live.csv", this.d3.autotype), + self.d3.csv(`https://labs${self.dataUrlPrefix}.waterdata.usgs.gov/visualizations/data/gw-conditions-peaks-timeseries${self.dataFileSuffix}.csv`, this.d3.autotype), + self.d3.csv(`https://labs${self.dataUrlPrefix}.waterdata.usgs.gov/visualizations/data/gw-conditions-site-coords${self.dataFileSuffix}.csv`, this.d3.autotype), + self.d3.csv(`https://labs${self.dataUrlPrefix}.waterdata.usgs.gov/visualizations/data/gw-conditions-daily-proportions${self.dataFileSuffix}.csv`, this.d3.autotype), + self.d3.csv(`https://labs${self.dataUrlPrefix}.waterdata.usgs.gov/visualizations/data/gw-conditions-time-labels${self.dataFileSuffix}.csv`, this.d3.autotype), ]; Promise.all(promises).then(self.callback); // once it's loaded }, @@ -338,7 +359,7 @@ export default { }, formatDates(dates){ - this.formatTime = this.d3.utcFormat("%b %e, %Y"); + this.formatTime = this.d3.utcFormat("%B %e, %Y"); this.date_start = this.formatTime(new Date(dates[0])); this.date_end = this.formatTime(new Date(dates[this.n_days-1])); @@ -711,27 +732,57 @@ section { "line line" "text text"; } - + + @media screen and (max-height: 770px) { + grid-template-columns: 15% 35% 50%; + grid-template-rows: max-content; + grid-template-areas: + "title map map" + "null map map" + "button button legend" + "line line line" + "text text text"; + // grid-template-columns: 10vw 0.75fr 1.25fr; + // grid-template-rows: max-content; + // grid-template-areas: + // "title title map" + // "button legend map" + // "line line map" + // "text text text"; + } + @media screen and (max-width: 600px) { + grid-template-columns: 1fr; + grid-template-areas: + "title" + "map" + "legend" + "button" + "line" + "text"; + } } -#map-container { +#map_gwl { grid-area: map; +} +#map-label-container { + grid-area: map; +} +.map-container { + align-self: center; +} +.map { + max-height: 68vh; + max-width: 98vw; + width: 100%; + height: 100%; padding: 0rem; padding-bottom: 0px; margin-top: 0.5rem; display: flex; - justify-content: center; - align-items: center; - svg.map { - max-height: 68vh; - max-width: 98vw; - width: 100%; - height: 100%; - } - svg.map.labels { - position: absolute; + @media screen and (max-height: 770px) { + max-height: 100vh; } } - #line-container { grid-area: line; width: 100%; @@ -746,15 +797,13 @@ section { #legend-container { grid-area: legend; width: 100%; - margin: auto; - margin-bottom: 1rem; + margin: 1rem 0 1rem 0; justify-content: center; max-width: 550px; - align-self: right; - justify-self: start; + align-self: center; + justify-self: center; svg{ max-width: 550px; - margin: auto; align-self: start; justify-self: start; overflow: visible; @@ -773,9 +822,8 @@ section { grid-area: title; width: 100%; max-width: 700px; - height: auto; - margin: auto; - align-items: start; + align-self: start; + justify-self: center; h1, h2{ margin-top: 1rem; } @@ -792,14 +840,16 @@ section { } #button-container { grid-area: button; - width: 100%; - max-width: 700px; - height: auto; - min-height: 40px; - margin: auto; - margin-bottom: 1rem; + margin: 1rem 0 1rem 0; + align-self: center; justify-content: space-evenly; position: relative; + @media screen and (min-width: 551px) { + justify-self: end; + } + @media screen and (max-height: 770px) { + justify-self: center; + } } .text-content { margin: 0.5rem auto; @@ -838,7 +888,6 @@ section { @media screen and (max-width: 550px) { font-size: 16px; } - } button { appearance: auto; @@ -849,7 +898,7 @@ button { align-items: center; box-sizing: border-box; padding: 1rem 4px; - margin: 0rem 1rem;; + margin: 0rem 1rem; } [type=button], [type=reset], [type=submit], button { -webkit-appearance: button; @@ -889,11 +938,13 @@ text.legend-label { stroke-width: 2px; } #spacer { - display: flex; - justify-content: center; @media screen and (min-width: 551px) { - justify-content: end; - } + justify-content: end; + } + @media screen and (max-width: 650px) { + display: flex; + justify-content: center; + } } #vizlab-wordmark { max-width: 200px; diff --git a/visualizations/data/gw-conditions-daily-proportions-beta.csv.ind b/visualizations/data/gw-conditions-daily-proportions-beta.csv.ind new file mode 100644 index 0000000..ffd34c4 --- /dev/null +++ b/visualizations/data/gw-conditions-daily-proportions-beta.csv.ind @@ -0,0 +1,2 @@ +hash: 5d9d05238386e4f818f4d6f1ca051bc7 + diff --git a/visualizations/data/gw-conditions-daily-proportions.csv.ind b/visualizations/data/gw-conditions-daily-proportions.csv.ind index 47030c8..ffd34c4 100644 --- a/visualizations/data/gw-conditions-daily-proportions.csv.ind +++ b/visualizations/data/gw-conditions-daily-proportions.csv.ind @@ -1,2 +1,2 @@ -hash: 7e98eb082cb2abda37fcd663230f1940 +hash: 5d9d05238386e4f818f4d6f1ca051bc7 diff --git a/visualizations/data/gw-conditions-peaks-map.svg.ind b/visualizations/data/gw-conditions-peaks-map.svg.ind index 20e8d0f..9a3836b 100644 --- a/visualizations/data/gw-conditions-peaks-map.svg.ind +++ b/visualizations/data/gw-conditions-peaks-map.svg.ind @@ -1,2 +1,2 @@ -hash: c2b6a9e8634a02156d9c107b1839c5c3 +hash: c2f5967d4482d31078e0af3589e7b411 diff --git a/visualizations/data/gw-conditions-peaks-timeseries-beta.csv.ind b/visualizations/data/gw-conditions-peaks-timeseries-beta.csv.ind new file mode 100644 index 0000000..721ae77 --- /dev/null +++ b/visualizations/data/gw-conditions-peaks-timeseries-beta.csv.ind @@ -0,0 +1,2 @@ +hash: 15f470784c897971afd9c7a7f63366b2 + diff --git a/visualizations/data/gw-conditions-peaks-timeseries.csv.ind b/visualizations/data/gw-conditions-peaks-timeseries.csv.ind index 11b358f..721ae77 100644 --- a/visualizations/data/gw-conditions-peaks-timeseries.csv.ind +++ b/visualizations/data/gw-conditions-peaks-timeseries.csv.ind @@ -1,2 +1,2 @@ -hash: 27af0faa6ba9d1aa69ced5d194c1376b +hash: 15f470784c897971afd9c7a7f63366b2 diff --git a/visualizations/data/gw-conditions-site-coords-beta.csv.ind b/visualizations/data/gw-conditions-site-coords-beta.csv.ind new file mode 100644 index 0000000..e92e73d --- /dev/null +++ b/visualizations/data/gw-conditions-site-coords-beta.csv.ind @@ -0,0 +1,2 @@ +hash: e2694c1d4d74f9e2ffd76c2f2c11f955 + diff --git a/visualizations/data/gw-conditions-site-coords.csv.ind b/visualizations/data/gw-conditions-site-coords.csv.ind index 8c4190d..e92e73d 100644 --- a/visualizations/data/gw-conditions-site-coords.csv.ind +++ b/visualizations/data/gw-conditions-site-coords.csv.ind @@ -1,2 +1,2 @@ -hash: 5c330a701c80681e587e4f1afe1f0139 +hash: e2694c1d4d74f9e2ffd76c2f2c11f955 diff --git a/visualizations/data/gw-conditions-time-labels-beta.csv.ind b/visualizations/data/gw-conditions-time-labels-beta.csv.ind new file mode 100644 index 0000000..07e57f5 --- /dev/null +++ b/visualizations/data/gw-conditions-time-labels-beta.csv.ind @@ -0,0 +1,2 @@ +hash: d28ab3ba24b2f8f26b0eb7d27eb657ea + diff --git a/visualizations/data/gw-conditions-time-labels.csv.ind b/visualizations/data/gw-conditions-time-labels.csv.ind index 4efda5b..07e57f5 100644 --- a/visualizations/data/gw-conditions-time-labels.csv.ind +++ b/visualizations/data/gw-conditions-time-labels.csv.ind @@ -1,2 +1,2 @@ -hash: 8286962579ff4062969e873cc574bdd9 +hash: d28ab3ba24b2f8f26b0eb7d27eb657ea