Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Expand all line plots for slow-moving times #1214

Merged
merged 1 commit into from
Apr 28, 2023
Merged

Expand all line plots for slow-moving times #1214

merged 1 commit into from
Apr 28, 2023

Conversation

krivard
Copy link
Contributor

@krivard krivard commented Apr 24, 2023

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:

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

Details

Hex maps

2022-02-01: dark palette

Before:
image

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

image

2023-04-01: light palette

Before:
image

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

image

Line plots

2023-04-01

Before:
image

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

Table sparklines

2023-04-01

Before:
image

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

@netlify
Copy link

netlify bot commented Apr 24, 2023

Preview link ready!

Name Link
🔨 Latest commit 6bb20bd
🔍 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...

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 krivard requested a review from RoniRos April 24, 2023 19:02
Copy link
Member

@RoniRos RoniRos left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good!
This may or may not belong here, but: we should find a way to convey when a gridline indicates a week boundary and when it indicates a month boundary (e.g. a tiny 'M' or 'W' at the top or bottom of the grid line?). Alternatively, or in addition, we can add some text to the beehive to the effect that e.g. "each hive depicts 3 months" of the signal.

@krivard
Copy link
Contributor Author

krivard commented Apr 24, 2023

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
Copy link
Member

RoniRos commented Apr 24, 2023

Maybe 1-2 hours worth of badly?

@krivard
Copy link
Contributor Author

krivard commented Apr 25, 2023

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
Copy link
Contributor Author

krivard commented Apr 25, 2023

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:
image

Zero anchor:
image

2023-04-01

No zero anchor:
image

Zero anchor:
image

@RoniRos
Copy link
Member

RoniRos commented Apr 25, 2023

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
Copy link
Member

RoniRos commented Apr 25, 2023

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

@krivard
Copy link
Contributor Author

krivard commented Apr 26, 2023

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

image

@RoniRos
Copy link
Member

RoniRos commented Apr 26, 2023

y. I do like it.

* Switch sparkline length from 4 weeks to 3 months
* Switch window length from 4 months to 9 months
* Increase visibility of y-axis gridlines
* Switch y-axis gridlines from marking weeks to marking months
* Add feature descriptions to hexmap legend
@krivard krivard force-pushed the krivard/hex-range branch from b1b31d2 to 6bb20bd Compare April 28, 2023 15:02
@krivard krivard merged commit be63317 into dev Apr 28, 2023
@krivard krivard deleted the krivard/hex-range branch April 28, 2023 15:13
@melange396 melange396 mentioned this pull request May 3, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants