• Create Rmd website
• Add infographic dependencies
• Insert infographic
• Build website
• View website
• technical implementation
  • core files: .svg, .csv
  • html and js/css dependencies

Create Rmd website

Create Rmd website, per 10.5 rmarkdown’s site generator | R Markdown: The Definitive Guide.

First, we need a configuration file _site.yml:

name: "my-website"
navbar:
  title: "My Website"
  left:
    - text: "Home"
      href: index.html
    - text: "About"
      href: about.html
output_dir: "docs"

Then two Rmd files, index.Rmd:

---
title: "My Website"
---

Hello, Website!

and about.Rmd:

---
title: "About This Website"
---

Add infographic dependencies

• libs/
• _svg-html_child.Rmd

Insert infographic

• svg/
• modals/

Implement the infographics using a combination of Rmd parameters and an Rmd child document.

For example:

```
---
title: "Pelagic"
params:
  svg: "svg/cinms_pelagic.svg"
  csv: "svg/svg_links.csv"
---

```{r svg, child = '_svg-html_child.Rmd'}
```

So the infographic rendering is handled by the child doc _svg-html_child.Rmd using the parameters svg and csv.

Build website

Build tab > Build Website button in RStudio or rmarkdown::render_site().

View website

servr::httd("docs")

technical implementation

The illustration in scalable vector graphics (.svg) format has individual elements given an identefier (ie id) which are linked to popup (ie "modal") windows of content using a simple table in comma-seperated value (.csv) format using d3.

core files: .svg, .csv

These two files are at the core of the infographic construction:

1. illustration: cinms_pelagic.svg
2. table: svg_links.csv

Each link in the table per element identified (id) is the page of content displayed in the modal popup window when the given element is clicked. The title determines the name on hover and title of the modal window.

html and js/css dependencies

The illustration (.svg) and table (.csv) get rendered with the link_svg() function (defined in infographiq.js) with the following HTML:

<!-- load dependencies on JS & CSS -->
<script src='https://d3js.org/d3.v5.min.js'></script>
<script src='infographiq.js'></script>

<!-- add placeholder in page for placement of svg -->
<div id='svg'></div>

<!-- run function to link the svg -->
<script>link_svg(svg='svg/cinms_pelagic.svg', csv='svg/svg_links.csv');</script>

The modal popup windows are rendered by Bootstrap modals. This dependency is included with the default Rmarkdown rendering, but if you need to seperately include it then add this HTML:

<!-- load dependencies on JS & CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>