Translate Pelagic CalCOFI interactive figures from plotly to dygraphs

[mspector13]

Some issues/critiques of the interactive figures [generally] across the site.

Consensus: the dygraphs are more streamlined than the plotly graphs (e.g. CalCOFI data in "Pelagics").

We should therefore overhaul all of the plotly figures and remake them with dygraphs instead.

One issue with dygraphs: the slider bar at the bottom is good, but the data represented in the slider bar may be misleading. Solution: turn up alpha to 11, or find another workout.

Dygraphs documentation

Dygraphs range selector visual representation

Dygraphs range selector code

[mspector13]

Update: we're still not fully consistent with our interactive plots @bbest @superjai

Todo:

• Make sure dates on the x-axis are correct when users zoom in

• Migrate graphs made using plotly into dygraph plots (CalCOFI figures in "Pelagic")

[bbest]

Why does CalCOFI Pelagic use plotly, eg:

vs Key climate & ocean drivers using dygraphs?:

Because of historical association with the Integrated Ecosystem Assessment (IEA) program which shaded the last 5 years and used ggplot, which is easily converted to interactive with plotly::ggplotly(). The other reason I used ggplotly was to optionally render as a static ggplot for use in output report formats as pdf and docx.

• [X] shade the last 5 years of dataset; Caldow wants to drop this, so let's exclude when translating into dygraphs, but possibly include as an argument to a function.

OLD Way

• [ ] add std dev above and below as a solid blue line.

• [ ] add mean as a dashed blue line.

• [ ] add mean as a dashed blue line.

NEW Way

Let's try this instead:

• [ ] time-varying (ie changes with y over time) data as a black line.

• [ ] time-invariant (ie same y over time) mean as a solid blue line and std dev as faded blue polygon, similar to existing SST.

[bbest]

Could simply rename the old plotting function calcofi_plot() to calcofi_plotly() and update calcofi_plot() to use dygraphs so you don't have to change all the modal windows that use the existing function. See nms4r function here:

• calcofi_plot • nms4r
• calcofi.R

[superjai]

Hey @bbest - I translated the plotly graph into dygraphs. But I have run into 2 issues and I haven't updated the nms4r package yet. Check out the dygraph below.

The first issue is the smaller one and has to do with the shading color. Dygraph plots make it pretty easy to show error bars, but the default coloring has the bars being a lighter shade of the main line's color. I can't figure out how to specify that the error bar color should be something other than that lighter shade. I actually think that the dygraph default makes sense and the colors of the plot should be kept as shown. If the error bar was shaded a variant of blue, it would pretty easily merge with the horizontal line. Also, with the error bar being a lighter shade of the main line, it clearly communicates that the error bar is in some way connected with the main line.

The second issue is that I don't think it makes sense to plot the standard deviation. The data isn't normally distributed and values below zero don't make biological sense for the y axis transformation (since a mean abundance of 0 would yield a y-axis-transformed value of 0).

Any thoughts?

[superjai]

Hey @bbest - let's look at an example of a calcofi plot from the condition report, as follows:

My suggestion would be for me to just copy this format in dygraphs for calcofi plots. That is to plot the mean and standard deviation as horizontal lines, and then to shade in areas of the plot that are above or below one standard deviation. I'll need to do a little bit of thinking to figure out how to shade in just the abnormally high/low areas, but I don't think it will present too much of a challenge.

Should I go ahead with this approach?

[bbest]

Nice work @superjai!

Can you please start with the simplest version suggested above as NEW Way?

The Anchovy figure you produced has the std dev gray ribbon as time-varying, whereas we want a time-invariant (ie straight horizontal line, not varying along time axis) similar to the solid green lines from Condition Report immediately above. If you make the historical mean blue then error bar should be a blueish shade of this. Voila!

[superjai]

Hey @bbest - sorry for the confusion. How is this?

[bbest]

Ok, let's use dygraph's horizontal-shading, eg:

quantmod::getSymbols("MSFT", from = "2014-06-01", auto.assign=TRUE)
## [1] "MSFT"
ret = ROC(MSFT[, 4])
mn  = mean(ret, na.rm = TRUE)
std = sd(ret, na.rm = TRUE)

dygraph(ret, main = "Microsoft Share Price") %>% 
  dySeries("MSFT.Close", label = "MSFT") %>%
  dyShading(from = mn - std, to = mn + std, axis = "y")

[superjai]

I think this takes care of it: