The following button is for navigating to the Github Action for rendering the website:
- Then click on "Run workflow", assuming you are logged into Github with an account granted Collaborator status on this repository.
- You might do this after making changes to the sanctsound website content Google Sheet.
- Note:
- The entire website gets rebuilt, so it can might 10 to 30 minutes to complete.
- This Github Action already automatically runs after every new commit to any file in this Github repository.
- If you want to skip this Github Action, you can include "[skip actions]" in the Github commit message.
- R Markdown Websites
- 10.5 rmarkdown’s site generator | R Markdown: The Definitive Guide
- R Markdown Websites
This website uses a simple interactive infographics implementation based on JavaScript only (ie not using the R-based infographiq).
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.
These two files are at the core of the infographic construction:
- illustration:
cinms_pelagic.svg
- 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.
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>
This website is constructed using Rmarkdown website for enabling easy construction of site-wide navigation (see _site.yml
) and embedding of htmlwidgets, which provide interactive maps, time series plots, etc into the html pages to populate the modal window content in modals/
. To build the website and view it, here are the commands to run in R:
- edit .Rmd files in
./docs/modals/
- run
script render_site.R
NOTE: The .html
files can be edited but by default .html
files are overwritten by content knit from the Rmd
files of the same name.
To use html directly set redo_modals <- T
, but you will need to clear .html
files manually with this setting.
Because of CORS restrictions, need local web server to debug:
# build website
source("render_site.R")
# serve website
#servr::httd(".")
servr::httd(here::here(""))
# stop website
servr::daemon_stop(1)
or using Python:
cd ~/github/cinms/docs; python -m SimpleHTTPServer
The render_site.R
script renders the modal and website pages.
Note the actual html content served at marinebon.github.io/cinms via Github Pages is all the html/jss/csss files copied into the docs/
folder of this repository.