Add animation

[cnell-usgs]

This animates the svg map produced in R using d3 transitions to animate path d and fill through water year day. To do this, new targets were added to the R pipeline in 3_visualize.yml to create vue inputs of (1) a time series data frame site x quantiles x wyday (public/date_peaks.csv) and (2) site key and position on the map (‘public/gw_sites.csv). These were added to the .gitignore and you will need to run the pipeline first to be able to build the page locally. Also includes a minor edit to generating <g> elements, so that sites without data for that specific date are still given a place in the DOM.

To build targets:
scmake('public/date_peaks.csv')
scmake(‘public/gw_sites.csv’)

Notes

• On page load the svg map from R appears first. After the data loads it redraws the same map with D3. This could be improved by either making the style match exactly out of R so there is no difference, or to wipe it entirely until page loads. Also possible to more directly manipulate the r-produced svg but I had some issues binding to <g> elements (discussed more below).
• The first svg map is from R, but the animated sites are actually being drawn and positioned with D3. The reason for this is that to add d3 transitions to the path d it was more performant to transition the single peak value at each site rather than transition between predefined shapes. To implement in this way, the quantile data need to be read into vue and then bound to the site locations. This should be possible using the pre-defined <g>s that include transform = translate(x y) without reading in site coordinates too, but I struggled to get this to work. I think that svg-loader that is injecting the svgs into the DOM is removing those <g>s which is why I don’t see them in the DOM. This runs the svg through svgo during the build, and a default option is to remove seemingly extraneous elements like <g> (Peaks map - optimize SVG #18). I haven’t been able to change these settings yet.
• To draw sites and animate in D3 I’m using the pipeline to convert the data into svg coordinates to simplify the in browser actions a bit. Everything is linked to a site key that is gwl_[nwis site_no] and it used throughout the js code to index and bind data to DOM elements. This creates a large csv that the app depends on to build, which gets saved to the public folder. We are at a point where we need to figure out how store and access these files (structuring pipeline from R to Vue #27).

Expected result:

Screen.Recording.2021-07-14.at.12.09.06.PM.mov

[lindsayplatt]

Got it working with just a few small edits to the pipeline.

The legend will need some work to get it lined up on different screen sizes and things I think, but not going to worry about that now. Fun to see this animating on the webpage!!!

[lindsayplatt]

In order to build public/date_peaks.csv and public/gw_sites.csv, I had to add data.table and stringr to the packages for this yml file.

[cnell-usgs]

added!

[lindsayplatt]

I like how you have these being saved directly to public/ instead of in a pipeline folder and then copying over ... seems like we should switch the anomaly_peaks.svg target to do something similar at some point in the future.

[lindsayplatt]

^ this is not a change request just to clarify :) just me thinking out loud

[lindsayplatt]

site_sf >> sites_sf or the pipeline will throw an error when you build