plug timeline into pipeline

[cnell-usgs]

This takes the chart structure implemented in and connects it to the R pipeline so that the timeline is defined by the data (#27).

Pipeline changes @lindsayplatt :

• Adding public/gw-conditions-time-labels.csv target to define labels on the timeline. Right now this is just month and year, but could also be used to add annotations to the timeline based on any date/date range and paired annotation.
• This depends on new target gw_time which is the full date range of the GW data with variable day_seq to order the animation.
• gw_time is used to organize the site-level timeseries data (gw_anomaly_data_w_colors). Before we had a variable wyday sequencing the animation that was defined on a site basis, which was causing dates to shift and be out of sync for sites with missing data.
• modified 3_visualize/src/build_peaks_svg.R to just write the svg for the basemap, as the peaks are all drawn with D3. This might require deeper thinking re: performance, thoughts here: Peaks map - optimize SVG #18.

These new targets need be added to AWS to read them in.

Vue/js changes @hcorson-dosch :

• breaks up the timeline drawing function into pieces and structures callback function
• add function to set scales globally; rescope unused global variables
• defining color scale in single place, added 2 alternative scale options (evaluate color scale #38)
• uses public/gw-conditions-time-labels.csv to add labels to timeline x-axis
• adds a y-axis to the time chart.
• re-organizes grid
• addresses misalignment of dates & chart position

New look:

[lindsayplatt]

dplyr::row_number() will do the same thing as as.numeric(rownames(.))

[lindsayplatt]

Consider adding na.rm = TRUE just in case there is an NA date.

[lindsayplatt]

is this necessary? The site_no column should already be character. If not, we should fix here where it is loaded rather than deal with it downstream.

Could change this to:

gw_anomaly_data:
    command: read_csv("2_process/out/gw_data_anomalies.csv", col_types = I('cDnnc'))

[lindsayplatt]

Doing the step above to change how this data is read in would simplify this line to left_join(data_in)

[lindsayplatt]

Adding a comment about what is happening here and why would be very useful! After running the code and exploring, I think that these left joins effectively filter the data so that each site has values for the first day of every month in the data set.

[lindsayplatt]

You took out these two arguments but the function itself, still has these included in its definition.

[lindsayplatt]

So you are no longer using the SVG with the sites already included? You are adding via D3?

[cnell-usgs]

Yes I left some notes about that here #18 (comment)

I think it's worth returning to this to draw the initial map from the pipeline, and then grab those paths with D3 for the animation. I was hitting some blocks with how it was set up though due to missing sites when there wasn't data on the first day, and the way I was modifying them with D3 (was creating duplicate elements). This PR addresses those issues but is slower to load.

[hcorson-dosch-usgs]

After going back and reviewing how percData is built, I see that the perc values are the same length as the # of day_seq in this.days, which is why this works. But I wonder if it would work to instead pass this.line all of d in line 358 where you are adding the line chart, and then within this line function, pass d.day_seq to the xScale and d.perc to the yScale, so that the x and y values come from the same dataset. But I can't remember if d3.line() will accept a full dataset, or if it prefers a single array, in which case this approach works fine.

[cnell-usgs]

Yes, this is what I want to do but cannot get it to work. It SHOULD work I think I'm having an indexing issue

[hcorson-dosch-usgs]

I think this legend is great, but the vertical alignment between the labels and the shapes seems like it might vary by browser (or maybe window size), which is a pain. Not sure it's worth fiddling with too much, but for reference here's what I see in edge (left; monitor fullscreen) vs in firefox (right; monitor ~2/3 of full screen):

[hcorson-dosch-usgs]

One other note on the legend - when I first saw the page, I had to check the line chart title to confirm that GWL stood for groundwater level. I realize that would be long to spell out here, so not sure what the solution is, but I'm not sure that people who see the page will know what GWL means, and I think the eye hits that legend before the line chart, since the legend is closer to the upper left.

[cnell-usgs]

New version:

I like that the glyphs show the movement of the peaks, but what I don't like is that we are binning the data into 5 uneven groups and not showing that in some way.

[cnell-usgs]

Also cleaned this up so Normal is a single glyph and can be coded in a much cleaner way

[hcorson-dosch-usgs]

Hmmm, that's a good point. Could we incorporate a histogram somehow, to show the distribution? I also like the idea of labeling the breakpoints, rather than the individual ranges, so there's less repeated text.

[cnell-usgs]

How would you do that here with the breakpoints?

[hcorson-dosch-usgs]

Here's a blurry ugly rough sketch, but I think you could label the breakpoints like so (w/ or w/o the histogram):

[hcorson-dosch-usgs]

Is this comment outdated? It looks like anomaly_peaks.svg no longer has any existing paths of class gwl_glpyh, and that you're creating the paths from scratch here, with d3, but maybe I'm looking in the wrong place?

[cnell-usgs]

I'm going to address this in the next PR. Short answer, yes, but I'm going to add back in.

[hcorson-dosch-usgs]

Maybe just add comments to note what these nudges are doing? In case anyone needs to adjust things in the future ?

[hcorson-dosch-usgs]

I think it would be better to place the play button off the map - maybe lower left?

[cnell-usgs]

Moved to own container on the lefthand side and implemented suggested changes (contributing to #40)

[hcorson-dosch-usgs]

I think this text gets too large if fullscreen on a monitor:

[cnell-usgs]

Is this if you start with a smaller screen size and then make it larger? On the initial draw, all font sizes should be consistent, BUT they scale in the bottom chart when the window is changed. I documented this here (#34) and am not sure how to address it. Would you have a change in window size trigger a function that redraws just that chart?

[hcorson-dosch-usgs]

Ahh good catch - yes it was. As for when the window is changed, I'm not sure what the best way is to go about it. I think in the past I've either used a fixed font size (instead of em), or set media breaks and defined different font sizes. I don't think either is ideal, though.

[hcorson-dosch-usgs]

Shoot looks like on a laptop part of the map and the entire line chart are hidden:

[hcorson-dosch-usgs]

Also - for what it's worth, the non-desktop option looks great on a tall narrow window on a monitor, since it makes the map larger (but may not be worth having so many grid versions):

[cnell-usgs]

I designed the layout mobile first, which I think helped. Ideally everything is in view at once regardless of screen size. I've adjusted the height parameter for the desktop version so it fills the space in the wide version.

[hcorson-dosch-usgs]

Ugh I wish editing these grids for different windows wasn't so fiddly! The chart is now drawing on my laptop screen, so that's great. Though now on my full monitor view, you have to scroll down to see the chart which isn't ideal:

[cnell-usgs]

Here's how it looks with recent changes on laptop:

I adjusted for relative font scaling and set a max-height on desktop using vh

[hcorson-dosch-usgs]

So to get this working, replace lines 427 and 428 with

self.pressButton(self.isPlaying)

so that it reads:

button
    .on("mousedown", function() {
        self.pressButton(self.isPlaying)
    });

[hcorson-dosch-usgs]

Then replace this line with

self.animateLine(0);
self.animateGWL(0);

so that it reads

pressButton(playing) {
      const self = this;

      // trigger animation if animation is not already playing
      if (playing == false) {
            self.animateLine(0);
            self.animateGWL(0);
      }
},

[hcorson-dosch-usgs]

And change this color to "steelblue"

[hcorson-dosch-usgs]

And add this chunk to dim the play button:

// dim play button rectangle
let button_rect = this.d3.selectAll(".play_button").selectAll("rect")
button_rect
    .style("fill", "#d6d6d6")

[hcorson-dosch-usgs]

Then, after this line, add the following section to reset the play button and reset isPlaying to 'false' (might need to tweak that delay slightly -- seems a bit long for some reason though it seems like that should be right):

// once animation has completed, reset color of play button
// and set isPlaying to false
button_rect
    .transition()
    .delay(this.day_length*(this.n_days-1))
    .on("end", self.resetPlayButton);

[cnell-usgs]

thanks this was helpful.

[hcorson-dosch-usgs]

This is so cool, Cee! Love the animated line chart. I've left a number of comments -- not sure if you want to address them before merging or later -- may be a mix of both?

[cnell-usgs]

Merging. Initial draw edits to come in next PR.