Expand all line plots for slow-moving times

[krivard]

Summary

• Switch sparkline length from 4 weeks to 3 months
• Switch window length from 4 months to 9 months
• Switch y-axis gridlines from marking weeks to marking months
• Increase visibility of y-axis gridlines in hex maps
• Add more labeling to hex map legends

Prerequisites:

• [x] Unless it is a hotfix it should be merged against the dev branch
• [x] Branch is up-to-date with the branch to be merged with, i.e. dev
• [x] Build is successful
• [x] Code is cleaned up and formatted

Details

Hex maps

2022-02-01: dark palette

Before:

After, same date, showing greater date range, month grid instead of week grid, more legend labeling:

2023-04-01: light palette

Before:

After, same date, showing greater date range, month grid instead of week grid, more legend labeling:

Line plots

2023-04-01

Before:

After, same date, showing greater date range (but same grid):

Table sparklines

2023-04-01

Before:

After, same date, showing greater date range, month grid instead of week grid:

[netlify[bot]]

✅ Preview link ready!

Name	Link
🔨 Latest commit	6bb20bd43de4b48c5ff486fbed84c34273dd7ac2
🔍 Latest deploy log	https://app.netlify.com/sites/cmu-delphi-covidcast/deploys/644be00adc473f0008f741ab
😎 Deploy Preview	https://deploy-preview-1214--cmu-delphi-covidcast.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[krivard]

we should find a way to convey when a gridline indicates a week boundary and when it indicates a month boundary

I can probably change the "Beehive Grid" toggle label to "3-month Beehive Grid", but adding new text elements isn't something sam made configurable. I can look into it though. How badly do you want it?

[RoniRos]

Maybe 1-2 hours worth of badly?

[krivard]

Okay, I can do the extra labels but the layout options will be limited.

Above the color legend: https://jam.dev/c/24b6933b-807b-427e-a732-e4311dd6409b

Bottom left: https://jam.dev/c/245f35e3-4a2b-4e84-b49b-17511694cdd3

Bottom right: https://jam.dev/c/eb96cc4a-a80d-475e-88af-68a951cbb2ad

[krivard]

I found the 0-anchor mode. With the 3-month timespan, it makes no noticeable difference, since nothing stays sufficiently high for more than three months that you can tell whether the lowest value is at the bottom of the plotting area or a few pixels higher, unless you're flipping back and forth between the two modes.

Sparklines aren't really designed for detailed vertical discrimination -- they're generally intended for showing shapes and trends, not values. I wouldn't recommend zero-anchoring them, but we can still do it if you prefer.

2022-01-12

No zero anchor:

Zero anchor:

2023-04-01

No zero anchor:

Zero anchor:

[RoniRos]

Okay, I can do the extra labels but the layout options will be limited. Above the color legend: https://jam.dev/c/24b6933b-807b-427e-a732-e4311dd6409b Bottom left: https://jam.dev/c/245f35e3-4a2b-4e84-b49b-17511694cdd3 Bottom right: https://jam.dev/c/eb96cc4a-a80d-475e-88af-68a951cbb2ad

All these locations seem fine to me. May I suggest turning "selected date" into "selected date (red bar)"? It would also clarify what the red bar is, for those who need it (since sometimes it's in the middle of the range and sometimes on the right edge).

[RoniRos]

Yeah, I see your point. Okay, let's skip it. Thanks.

[krivard]

I did some more iterations with Logan -- more verbose but feels more natural. y/n?

[RoniRos]

y. I do like it.