here is the code of a slide with an r chunk and a graph:
---
```{r, echo=FALSE, warning=FALSE}
dd<-data.frame(x=1:10, y=21:30)
library(ggplot2)
ggplot(dd, aes(x,y)) + geom_point(color="red", size=6) +
theme(plot.background=element_rect(fill="gray7", color="gray7"),
panel.background=element_rect(fill="gray7"),
axis.line=element_line(color="white"),
panel.grid=element_blank(),
axis.text=element_text(color="white", size=rel(1.3)),
axis.title=element_text(color="white", size=rel(1.3))
)
```
---
this is my YAML:
---
framework : revealjs
revealjs : {theme: night, transition: none, center: "false"}
highlighter : highlight.js
hitheme : github
widgets : [mathjax]
mode : selfcontained
url : {lib: ./libraries}
knit : slidify::knit2slides
assets:
js:
- "http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"
- "http://bartaz.github.io/sandbox.js/jquery.highlight.js"
---
This gives this plot on the slide:
Obviously the border is there because this is the default for the reveal.js theme. I'm ok with the border on most slides, however for graphs being produced by some R chunks, I don't want it. I'm finding it hard to remove this simply. I have a hacky work-around. I don't include the output of the chunk and then I use some html to refer to the image that's just been named and saved to my assets/fig folder:
```{r, echo=FALSE, warning=FALSE, chunk_name, include=FALSE}
dd<-data.frame(x=1:10, y=21:30)
library(ggplot2)
ggplot(dd, aes(x,y)) + geom_point(color="red", size=6) +
theme(plot.background=element_rect(fill="gray7", color="gray7"),
panel.background=element_rect(fill="gray7"),
axis.line=element_line(color="white"),
panel.grid=element_blank(),
axis.text=element_text(color="white", size=rel(1.3)),
axis.title=element_text(color="white", size=rel(1.3))
)
```
<img src="assets/fig/chunk_name-1.png" style="background:none; border:none; box-shadow:none;">
---
This gives this output:
This is ok, but it doesn't seem the right way to do this and I can see how this might not work in all situations. Is there a better way to get rid of borders for the graphical output of r-chunks ?
edit: For the color aficionados, #111111 is the reveal.js background color, so would have been better to use that.
Ramnath actually gave me some advice as to the answer to this question:
into assets/css put this...
.noborder .reveal section img {
background:none;
border:none;
box-shadow:none;
}
Then refer to this css using the following at the beginning of your slide header:
--- ds:noborder
and obviously, include=T in the R chunk.
Related
I want to construct html on the fly and have that html rendered
in Quarto.
The actual application involves inserting an iFrame,
but for simplicity, let's just make an <img> tag.
Here is my .qmd code:
```{r}
source("awash-functions.r")
```
How do you inject html text produced in an r function into a **quarto** document?
In R markdown, I had the function `sprintf` a string. That doesn't seem to work here!
Here is `awash-functions.r`:
imageLink <- function(iUrl, iText) {
sprintf("<img src = '%s' width='24'> %s", iUrl, iText)
}
let's call the function and see what appears:
```{r echo=FALSE}
imageLink("https://www.united.com/8cd8323f017505df6908afc0b72b4925.svg", "united logo")
```
and now, here's what it's supposed to look like:
<img src = 'https://www.united.com/8cd8323f017505df6908afc0b72b4925.svg'> united logo
It renders, and the function clearly gets called,
but it shows the html code, not the image:
I know it's something simple, but I can't find it. Many thanks!
Two things to note:
Firstly, Quarto by default wraps any code chunk output within the <pre><code> tag. To get the output asis you need to use the chunk option results: asis.
Secondly, sprintf (or even print) returns output enclosed within quotes. So after using results: asis, you would get the html tags but would also get the quotes. So you need to wrap the sprintf with cat to get intended results.
---
format: html
---
```{r}
#| echo: false
imageLink <- function(iUrl, iText) {
cat(sprintf("<img src = '%s'> %s", iUrl, iText))
}
```
```{r}
#| echo: false
#| results: asis
imageLink("https://www.united.com/8cd8323f017505df6908afc0b72b4925.svg", "united logo")
```
and now, here's what it's supposed to look like:
<img src = 'https://www.united.com/8cd8323f017505df6908afc0b72b4925.svg'> united logo
Using R Markdown, I would like to generate an html report where I could browse multiple plots in the same 'window', e.g. using a scrollbar with two arrow buttons to print the previous and next plot. I have found several questions asking how to scroll within a large figure or image, but could not identify a solution to scroll between several plots.
For example, knitting the Rmd code below would generate three graphs on the top of each other. Which code should I use to make them scrollable?
EDIT: I need a 'single page view' to easily compare two consecutive plots, i.e. I should be able to move the scrollbar in a discrete, not continuous, way.
---
title: "Test multiple plots"
output: html_document
---
```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```
## Generating multiple plots
I would like these three plots to be at the same location, and to switch between them by pressing buttons or sliding a scroll bar in the html document.
```{r plots, echo = F}
plot(0, pch = 16, col = 1)
plot(0, pch = 16, col = 2)
plot(0, pch = 16, col = 3)
```
Thank you for your help.
You can use the following code:
---
title: "Test multiple plots"
output: html_document
---
<style>
.vscroll-plot {
width: 1000px;
height: 400px;
overflow-y: scroll;
overflow-x: hidden;
}
</style>
```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
options(width=200)
```
## Generating multiple plots
I would like these three plots to be at the same location, and to switch between them by pressing buttons or sliding a scroll bar in the html document.
<div class="vscroll-plot">
```{r plots, echo = F}
plot(0, pch = 16, col = 1)
plot(0, pch = 16, col = 2)
plot(0, pch = 16, col = 3)
```
</div>
Output:
You will see that there is a vertical scrollbar. You can change the height and width in the style to make the view bigger or smaller.
I am trying to add padding to a table I am creating in an RMarkdown file that will generate both a pdf and an html flexdashboard. I know that there are a number of functions/packages I could use (pander, xtable, DT, etc.), but I would prefer to use the kable function from the knitr package.
The trouble I am having is that the padding argument does not seem to work. I would appreciate any help in solving this without having to add custom CSS to my document.
As a example, I have tried to run the code with padding set to 0, 10, 20 but the tables all look identical in the html file.
knitr::kable(head(cars), format = "html", padding = 0)
knitr::kable(head(cars), format = "html", padding = 10)
knitr::kable(head(cars), format = "html", padding = 20)
I am using knitr_1.14 and rmarkdown_1.0, and my session information is as follows.
R version 3.3.0 (2016-05-03)
Platform: x86_64-w64-mingw32/x64 (64-bit)
Running under: Windows 7 x64 (build 7601) Service Pack 1
The option table.attr='cellpadding="20px"' does not work for me. Using CSS styles and adding a class to the table with table.attr='class="myTable"' leads to all tables having the desired padding property (even if only one table carries the new class).
If I only want to modify one single table I usually go with jQuery:
---
title: "Table Cell Padding"
output: html_document
---
```{r}
knitr::kable(head(cars), format = "html")
```
```{r}
knitr::kable(head(cars), format = "html", table.attr='class="myTable"')
```
<style>
.myTable td {
padding: 40px;
}
</style>
Another option is to use jQuery to edit individual elements. The following example modifies the table in the same way as the CSS styles above.
<script type="text/javascript">
// When the document is fully loaded...
$(document).ready(function() {
// ... select the cells of the table that has the class 'myTable'
// and add the attribute 'padding' with value '20px' to each cell
$('table.myTable td').css('padding','20px');
});
</script>
Here I add the class myTable to the table I want to modify. Afterwards I execute some JavaScript (see comments).
You could add any other CSS property to the table elements (or the table itself $('table.myTable').css(...)) in the same way (e.g. $('table.myTable td').css('background-color','red');)
I am generating a HTML file with knitr/pandoc which prints several tables in a loop. Here is a minimal example:
---
output:
html_document:
theme: cosmo
---
```{r results ="asis", echo=FALSE, warning=FALSE, kable}
library(knitr)
library(markdown)
library(pander)
for (i in 1:12) {
df = data.frame(matrix(rnorm(i), nrow=2))
cat(pandoc.table(df, split.table = Inf))
}
```
The printed data frames (tables) have a different number of cells, but they all have the same total width.
I tried to set a fixed width with CSS by setting the table width to "auto" and align it left, but I didn't succeed. How can I do this?
This is due to the width: 100% setting in the original CSS. You can override that by using a custom theme or an additional CSS -- e.g. something minimal like this:
table {
width: auto !important;
}
The !important rule stands for forcing this width instead of the original 100%. Now save this file as e.g. custom.css and pass it in the YAML header:
---
output:
html_document:
theme: cosmo
css: custom.css
---
And BTW you do not need to cat the results of pander :)
I am using r markdown and Rstudio to create an html report. I have some graphics that I would like to be extremely wide, however, there seems to be a limit to the width in the output even when using fig.width and out.width in the chunk options. For instance the following three code chunks produce figures which are the same width in the final output:
```{r,fig.height=7,fig.width=12,echo=FALSE}
plot(rnorm(1000),type="l")
```
```{r,fig.height=7,fig.width=40,echo=FALSE}
plot(rnorm(1000),type="l")
```
```{r,fig.height=7,fig.width=40,echo=FALSE,out.width=20000}
plot(rnorm(1000),type="l")
```
I have used options(width=LARGENUMBER) for output (e.g. such as print, etc.) which seems to work well for printing tables, but I have yet to find a a way to make these graphs any wider.
Any suggestions?
You could add something like this
---
output: html_document
---
<style>
img {
max-width: none;
/* other options:
max-width: 200%;
max-width: 700px;
max-width: 9in;
max-width: 25cm;
etc
*/
}
</style>
```{r,fig.height=7,fig.width=12,echo=FALSE}
plot(rnorm(1000),type="l")
```
```{r,fig.height=7,fig.width=40,echo=FALSE}
plot(rnorm(1000),type="l")
```
```{r,fig.height=7,fig.width=40,echo=FALSE}
plot(rnorm(1000),type="l")
```
or better yet set up your knitr.css file with
img {
max-width: 200%;
}
or whatever you like, and use
---
output:
html_document:
css: ~/knitr.css
---