Peaks map - style exploration

[lindsayplatt]

Mimic river conditions with negative space for low values?
Have totally diff colors? Have background color?

[jordansread]

One thing to save a ton of size/space on this is to use discrete categories for the GW heights (the different shapes) and use those as animated masks over a simple shape which also would transition in color. You could define those masks as say 5 shapes and animate between them. That way you only define 5 fancy paths instead of site * 5 paths.

[lindsayplatt]

☝️ Yes, that approach would save lots of space (so referencing #18, too). Putting this here to remember: currently, the number of unique peaks paths generated (bc we use the daily_quant column) would be the same as

# Just using values straight up
read_csv("2_process/out/gw_data_anomalies.csv") %>% 
  pull(daily_quant) %>% 
  unique() %>% 
  length()
[1] 215942

# At a minimum, we should round:
read_csv("2_process/out/gw_data_anomalies.csv") %>% 
  mutate(daily_quant = round(daily_quant)) %>% 
  pull(daily_quant) %>% 
  unique() %>% 
  length()
[1] 102

Turns out I am already rounding here, so we are already benefitting from this basic rounding technique.

[cnell-usgs]

Per #26 style and implementation of the peaks can now be driven via css and js, although are currently not animated and still derived from the R processing.

This has implications for how the animation is structured. In initial explorations, I looked into tweening among set path shapes for each daily_quant, similar as suggested above by JR. I found that defining just a small number of paths made the animation jumpy and loses a lot of the data resolution that is interesting. An alternative is to try this approach using the ~100 pre-defined shapes mentioned above instead of 5.

For now, I am trying to implement a similar process that LP used in R to define the paths - by taking a data sheet with the svg-converted percentile for each site as input and running a d3 transition on the midpoint of the path 'd' . As illustrated here: https://github.com/pbeshai/d3-interpolate-path. This does seem like it could be a lot to process in browser, TBD.

[lindsayplatt]

This is complete, especially since we are near release. Styles successfully explored. Optimization issues were further explored in #18