Scrollytelling and Page Formatting

[ThiernoMbengue]

Description

Hello,

I am currently working on a Quarto project with two main objectives. The first is to develop a data visualization website similar to this one: https://vizagreste.agriculture.gouv.fr/. The site will include various charts and features, among which are:

Scrollytelling: For example, on the site https://vizagreste.agriculture.gouv.fr/evolution-du-nombre-d-exploitations.html, there is text that scrolls with the mouse, and also a diagram that changes color in accordance with the displayed explanations.

Page Formatting: The goal is to make the page very readable and aesthetically pleasing.

The second objective is to simplify this process as much as possible by using Quarto to automate visualization with various types of data. The aim is to make these tools easily accessible to individuals with basic R programming skills, enabling them to easily integrate their data and create visualizations.

My questions are as follows: Is it possible to create a website with these features using Quarto, while maintaining a simple approach? Specifically, is it possible to utilize the main scrollytelling options available in Quarto and optimize the web page layout? Do you have any suggestions or ideas that could help me in realizing this project?

Thank you in advance for your assistance.

[kshitizkhanal7]

It's not impossible but I suppose only a few people are working on it.
Some decent examples here: https://jimjam-slam.github.io/quarto-experiments/scrollytelling/ This uses scrollama.js
I haven't tried much. One way is to integrate Shiny apps or HTML widgets, but that's more for interactivity than scrollies.

[jimjam-slam]

This is really good, @declann! 👏🏻

[declann]

Thanks for the template to get me looking at this @jimjam-slam !
I thought vh units were super convenient making that but now I realise from actually reading scrollama docs that they were part to blame for my resize complaints

Anyways, I think the main point in these experiments is that Quarto isn't much getting in the way of creating these scroller type experiences.

[jimjam-slam]

Oh, that's good to know, @declann! Handling resizing has been a bit of a pain for @andrewpbray and I too extension. It's been a while since we looked at the spacing between narrative blocks; we'll take another look at it!

[declann]

Cool!

On resize then:
There's a resize trigger in scrollama, that I link to window.onresize events in a kinda elaborate way here

It's a mess what I did, but hopefully will find that a lot of it was unnecessary! I need to study scrollama more.

When I think about it now, maybe when the trigger is used scrollama tries to resync state: by rerunning steps from index 0. I saw these events and inhibited them instead. I rely on state updates in progress and in step changes but maybe more state changes should happen in step change even when it 'already' happens on scroll through progress, so that it can be recreated in this way too.

For spacing feel free to check my (familiar!) html pattern (also scroller.setup is here) and if ye make something cool please share :D

Scrollama docs has this caveat about the resize trigger, but somehow I thought it was necessary in what I setup. If you don't hook that trigger up to window.onresize like I did, then maybe the weird event re-runs won't happen.

[fsemecurbe]

I try to extend the scrollytelling observable framework example with markdownit. For this purpose, I create two new balises : the first to enter the scrolling (::: scroll-container) and the second to describe a step (~~~ scroll-section figure_name).

The figures are stored inside a dictionary. To display a figure in a scroll section, you just need to add the correct key (figure_name) from the dictionary.

The exemple is here : Examples of scrolling with observablehq framework | Scrollytelling 36

and the index.md here : scrollytelling_observablehq/scrollytelling/src/index.md at 41dee7853b754519255afb734c9f0b21e4d9a7f3 · fsemecurbe/scrollytelling_observablehq · GitHub 14

[cderv]

Revealjs 5 has a new Scroll View mode which is now available in Quarto 1.6
See https://prerelease.quarto.org/docs/presentations/revealjs/presenting.html#scroll-view

This could help in some scrollytelling scenario maybe

[blenback]

Came to share Closeread but realised that it seems to be the output of @jimjam-slam's experiments mentioned in this discussion? Really awesome stuff!

[jimjam-slam]

Oh, I forgot to come back and advertise it 😂 Yeah, @andrewpbray reached out to chat about them and then we went and made Closeread 🥳

[mcanouil]

Small note: Better to avoid advertising it (or anything) in all possible discussions/issues.
Show&Tell is there for that.