qmd-lab / closeread

https://closeread.dev
MIT License
128 stars 5 forks source link

Add plot build-up demo #110

Closed jimjam-slam closed 3 weeks ago

jimjam-slam commented 4 weeks ago

This adds a demo to the gallery where we build up a ggplot one detail at a time, allowing us to discuss a plot with two potential messages. There's some light customisation too (I've added it as a raw HTML block rather than linking to a stylesheet), but nothing wild.

One big thing to note is that it only works because we're not using .scale-to-fill — if you turn that on, each new step scales up from its natural size when it become visible. That's not a problem for most R/Python/Julia plots, which will be rasterised by default (and they'll still scale down, so as long as you make them big enough for desktop, it's fine).

We could fix that issue by running scaleToFill() on every sticky on page load and on window resize — that way they scaled correctly before you get to them. Not sure if it would interfere with the focus effects, though; maybe you'd want to be more careful on the window resize in terms of checking where you are. What do you think, @andrewpbray?

andrewpbray commented 4 weeks ago

Ooo, this is lovely. I few thoughts:

  1. The issue with .scale-to-fill is one that I figured we'd bump into at some point - guess that point is now! I think the behavior that you mention - doing the scaling on load - is the one that makes more sense. The zoom-in effect is kinda cool, though! I guess you could get the same effect by using scale-by when you trigger a new sticky. If combined with .scale-to-fill and the user wants a zoom in effect of 25%, we'd probably want to first scale-to-fill, then scale-by .80 (all before cr-active is added), then add scale-by 1.25 to achieve an overall effect of, "scale the sticky by 25% so that it fits the viewport"

  2. Was it intention to not propagate the annotated axis arrows in the second plot?

  3. I like the blue background. Thoughts on appropriating that for the index?

jimjam-slam commented 3 weeks ago

Ooo, this is lovely. I few thoughts:

  1. The issue with .scale-to-fill is one that I figured we'd bump into at some point - guess that point is now! I think the behavior that you mention - doing the scaling on load - is the one that makes more sense. The zoom-in effect is kinda cool, though! I guess you could get the same effect by using scale-by when you trigger a new sticky. If combined with .scale-to-fill and the user wants a zoom in effect of 25%, we'd probably want to first scale-to-fill, then scale-by .80 (all before cr-active is added), then add scale-by 1.25 to achieve an overall effect of, "scale the sticky by 25% so that it fits the viewport"

Reckon I might split this off to a separate issue to pick up during/after the contest!

  1. Was it intention to not propagate the annotated axis arrows in the second plot?

It wasn't, but you could also choose to leave them there!

  1. I like the blue background. Thoughts on appropriating that for the index?

I'm happy for it to be used if you like it, but I also quite like the bright blue tbh!