yihui / rolldown Goto Github PK
View Code? Open in Web Editor NEWR Markdown output formats for storytelling
Home Page: https://cran.rstudio.com/package=rolldown
License: Other
R Markdown output formats for storytelling
Home Page: https://cran.rstudio.com/package=rolldown
License: Other
As other repo
This post by @JohnCoene looks very interesting: https://blog.john-coene.com/posts/2019-11-17-scrollytell/
And of course, this recent talk by @john-guerra is amazing: https://johnguerra.co/viz/influentials/story/?hashtag=useR2019
I just tried rolldown and it looks very interesting! I was just wondering if it was possible to not show tables and graphics twice (in the sidebar section on the left and the main section on the right). Essentially, I would like to have only the text on the left and the media (tables, graphs, videos) on the right.
Is this possible?
Thank you so much for your help!
Best,
Jens
I just tried rolldown and it is great! Thank you for your hardwork.
If I replace the plots in the sidebar example with a leaflet map, the map on the sidebar works fine. But the main map (in the right pane) has a weird behavior. If I click on the zoom buttons '+' or '-', the page moves to the top.
Also, is there a way to render everything (map/plot) in a way that it takes up the complete space in the right pane (just like the table in the first section takes up the complete width)?
---
title: "Scrollama Document (Sidebar Layout)"
author: "Anonymous Llama"
date: "`r Sys.Date()`"
output: rolldown::scrollama_sidebar
---
```{css, echo=FALSE}
.level1 {
min-height: 400px;
border: 1px solid;
margin-bottom: 4em;
padding: 1em 2em 2em;
opacity: .5;
}
.is-active {
opacity: 1;
background-color: lightyellow;
}
body {
margin-bottom: 80vh;
}
```
# Introduction
## Level-two heading
Level-two and below headings...
### Level-three
...are all contained in the same section.
### A table
```{r, echo=FALSE}
knitr::kable(head(mtcars), caption = 'A boring table.')
```
And no chairs.
# Text
Example text.
No figures or tables in this section. Nothing to display in the main area.
# Plots
You may include any number of plots in a section.
```{r, fig.cap=c('A boring scatterplot.')}
library(leaflet)
leaflet() %>%
addProviderTiles(providers$Esri.WorldImagery) %>%
setView(-83, 46, zoom = 6)
```
# Images
Local news [reported](https://www.desmoinesregister.com/story/news/2018/04/27/rubber-duck-des-moines-yess-duck-derby/558852002/) a giant inflatable rubber duck rolling down the street of Des Moines, where this package is conceived.
![The Rolling Duck](https://user-images.githubusercontent.com/163582/60457872-c164ff00-9c02-11e9-8d0f-cdae566b75ed.jpeg)
# Videos
You can also embed videos here.
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/7gYIs7uYbMo" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
# Technical details
The current implementation of this sidebar layout is kind of cumbersome. The HTML template is `rolldown:::pkg_resource('html', 'scrollama-side.html')`. We have hard-coded some CSS and JavaScript code in this template, which means, for example, you cannot easily customize the initialization of Scrollama (if you really want to, you must provide your own HTML template). You should be free to customize CSS, though (like we did in the beginning of this example document).
Activating sections doesn't work well (especially in RStudio Viewer). We don't know why at the moment.
Perhaps the enter function could trigger an input change which invalidates the corresponding 'output'
Improve default style rolldown_default_style()
at R/style.R
:
scrollama_sidebar()
): grey scale/blurAlso may have a dark style variant.
Hi,
I apologise for my poor coding skills but I do not know how to put Rmd code in Github...
I have tried to create a scollama_sidebar with a trelliscope plot on car dataset using the following RMD file in this zip folder
RollDownTest.zip
The good news is that it is able to knit the script.
The bad news I think the side bar is too small to see the diagram
Is there a way to increase the size of the sidebar ?
I've been hoping for a scrollytelling implementation in R for a while so I'm immensely thankful for your work.
I'm wondering how output: rolldown::scrollama_sidebar will interact with a website built using the Distill for R Markdown package (which has its own output using similar syntax).
I'm aware this is experimental and likely has not been considered yet, just curious on your thoughts.
I want to brainstorm ideas about tomorrow afternoon's presentation. I have one idea: turn this thread uncoast-unconf/uu-2019-day-zero#11 to a storytelling (R Markdown) document and demo it in our talk. Wouldn't it be a perfect application of rolldown?!!
Maybe I'm missing the point of rolldown, but sometimes I want to go back and forth with a 'slidelike' format in this. So I'd like to be able to type text (or bullets etc) and have it be displayed in the main section rather than only in the sidebar part. Is this possible in any way? Thanks!
Plots/images in the first or the last section in scrollama_sidebar()
layout cannot be displayed in the exhibit area, because they cannot be positioned across the center line and be activated.
Add invisible dummy sections in the layout before the first and after the last section, so that they can be pushed across the center line.
Hi there,
thanks for creating this package, I think it has a lot of potentials.
Issue:
Currently, I am trying to get a nice example up and running and was wondering how I can avoid, that my plots show up in both frames (sidebar & main column).
When I use the template = 'scrollama-sidebar' and look at the "Plots" section, 'The boring scatterplot' is shown in the sidebar as well as in the main column.
I would like to show the code in the sidebar and the plot on the main section. Any idea how I might achieve this?
Thanks in advance!
First install the package with remotes::install_github('uncoast-unconf/rolldown')
. Here is a minimal example:
---
title: "Untitled"
output:
rolldown::scrollama:
self_contained: no
---
```{css, echo=FALSE}
.level1 {
min-height: 400px;
border: 1px solid;
margin-bottom: 4em;
padding: 1em 2em 2em;
}
.is-active {
background-color: yellow;
}
```
# Section One
## A subsection
Some text.
```{r}
plot(cars)
plot(pressure)
```
# Section Two
More text.
# Section Three
Even more text.
```{r}
rolldown::scrollama_config()
```
This pudding article outlines five additional js libraries for storytelling. They are Waypoints, ScrollStory, ScrollMagic, graph-scroll.js, and in-view.js
There is also an excellent Medium article that shows examples of both scroll- and step-based storytelling. We may want to implement the ability to step through sections in the future.
We can open up issues for the libraries we want to implement (after scrollama), but for now I will post any additional options as comments under this issue.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.