fk-iea

Florida Keys IEA, as Rmarkdown website.

This website uses a simple interactive infographics implementation based on JavaScript only (ie not using the R-based infographiq).

technical implementation

The illustration in scalable vector graphics (.svg) format has individual elements given an identifier (ie id) that 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: svg/fl-keys.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='libs/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/fl-keys.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>

build and view website in R

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:

develop

install

Rscript -e 'devtools::install(pkg=".", quick=TRUE, quiet=TRUE, upgrade=TRUE)'

content editing workflow

1. edit .Rmd files in ./docs/modals/
2. run Rscript ./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.

testing

Because of CORS restrictions, need local web server to debug:

# build website
source("render_site.R")

# serve website
servr::httd("docs") # http://127.0.0.1:4321

or using Python:

cd ./docs; python3 -m http.server

The render_site.R script renders the modal and website pages.

Note the actual html content served at marinebon.github.io/mbnms via Github Pages is all the html/jss/csss files copied into the docs/ folder of this repository.