Figure Layout

Amplify figures by customizing layout

Table of Contents


Default layout

There are a variety of ways to layout figures included within Radix articles. This layout is controlled by a set of layout classes, which are in turn applied to R Markdown chunks using the layout chunk option.

The default layout if layout is not specified is l-body, which will cause content to span the width of the main article body:

l-body

For example, a plot with the default l-body layout would look like this:

Wider layouts

For elements you want to display a little larger, try l-body-outset or l-page:

l-body-outset

l-page

For example, here the l-body-outset layout is selected using the layout chunk option:


```{r, layout="l-body-outset", fig.width=6, fig.height=1.5}
library(ggplot2)
ggplot(diamonds, aes(carat, price)) + geom_smooth() +
  facet_grid(~ cut)
```

Note that when specifying an alternate layout you should also specify an appropriate fig.width and fig.height for that layout.

Full screen layout

Occasionally you’ll want to use the full browser width. For this, use l-screen:

l-screen

If you want a bit space at the edges then you can use the l-screen-inset layout, which adds 15 pixels of padding to each side. Here we use l-screen-inset to display a Leaflet map:


```{r, layout="l-screen-inset"}
library(leaflet)
leaflet() %>%
  addTiles() %>%  # Add default OpenStreetMap map tiles
  addMarkers(lng=174.768, lat=-36.852, popup="The birthplace of R")
```

Depending on the content displayed by l-screen-inset, sometimes it’s nice to add some shading to further deliniate the display. You can do this by adding shaded to the layout declaration:


```{r, layout="l-screen-inset shaded"}
library(leaflet)
leaflet() %>%
  addTiles() %>%  # Add default OpenStreetMap map tiles
  addMarkers(lng=174.768, lat=-36.852, popup="The birthplace of R")
```

Layout for images

To include static images that occupy the full width of the article text, be sure to add the width=100% attribute. For example:


![](images/figure.png){width=100%}    

To include a static images that adheres to a Radix layout, wrap it in a markdown div (:::) named with the appropriate class. For example:


::: l-body-outset
![](images/figure.png){width=100%}  
:::

If you are including a figure from an external source, it’s good practice to delineate this by applying the .external class and adding a caption indicating where it is from. For example:


![Figure from https://example.com](heatmap.png){.external width=100%}    

Using the .external class and providing a “Figure from” link makes it clear that the figure originated elsewhere (and is therefore not covered by any of your article’s copyright or creative commons license grants). For example, here’s how a figure taken from a Stack Overflow post might appear:

Figure from https://stackoverflow.com/questions/12196756/
Figure from https://stackoverflow.com/questions/12196756/

Corrections

If you see mistakes or want to suggest changes, please create an issue on the source repository.

Reuse

Text and figures are licensed under Creative Commons Attribution CC BY 4.0. Source code is available at https://github.com/radixpub/radix-r, unless otherwise noted. The figures that have been reused from other sources don't fall under this license and can be recognized by a note in their caption: "Figure from ...".