Switch branches/tags
Nothing to show
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
data
img
libs
pages
site_libs
svg
.nojekyll
README.html
coral-reef.html
index.html
kelp-forest.html
pelagic.html

README.html

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="generator" content="pandoc" />




<title></title>

<script src="site_libs/jquery-1.11.3/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="site_libs/bootstrap-3.3.5/css/cosmo.min.css" rel="stylesheet" />
<script src="site_libs/bootstrap-3.3.5/js/bootstrap.min.js"></script>
<script src="site_libs/bootstrap-3.3.5/shim/html5shiv.min.js"></script>
<script src="site_libs/bootstrap-3.3.5/shim/respond.min.js"></script>
<script src="site_libs/navigation-1.1/tabsets.js"></script>
<link href="site_libs/highlightjs-1.1/textmate.css" rel="stylesheet" />
<script src="site_libs/highlightjs-1.1/highlight.js"></script>
<script src="./libs/d3.v3.min.js"></script>
<script src="./libs/d3-dsv.v1.min.js"></script>

<style> 
/* set the CSS: [Simple d3.js tooltips - bl.ocks.org](http://bl.ocks.org/d3noob/a22c42db65eb00d4e369)*/
    div.tooltip {
        position: absolute;
        text-align: center;
        width: 70px;
        height: 30px;
        padding: 2px;
        font: 12px sans-serif;
        background: lightsteelblue;
        border: 0px;
        border-radius: 8px;
        pointer-events: none;
    }
  </style>

<style type="text/css">code{white-space: pre;}</style>
<style type="text/css">
  pre:not([class]) {
    background-color: white;
  }
</style>
<script type="text/javascript">
if (window.hljs && document.readyState && document.readyState === "complete") {
   window.setTimeout(function() {
      hljs.initHighlighting();
   }, 0);
}
</script>



<style type="text/css">
h1 {
  font-size: 34px;
}
h1.title {
  font-size: 38px;
}
h2 {
  font-size: 30px;
}
h3 {
  font-size: 24px;
}
h4 {
  font-size: 18px;
}
h5 {
  font-size: 16px;
}
h6 {
  font-size: 12px;
}
.table th:not([align]) {
  text-align: left;
}
</style>

<link rel="stylesheet" href="libs/styles.css" type="text/css" />

</head>

<body>

<style type = "text/css">
.main-container {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
}
code {
  color: inherit;
  background-color: rgba(0, 0, 0, 0.04);
}
img {
  max-width:100%;
  height: auto;
}
.tabbed-pane {
  padding-top: 12px;
}
button.code-folding-btn:focus {
  outline: none;
}
</style>


<style type="text/css">
/* padding for bootstrap navbar */
body {
  padding-top: 51px;
  padding-bottom: 40px;
}
/* offset scroll position for anchor links (for fixed navbar)  */
.section h1 {
  padding-top: 56px;
  margin-top: -56px;
}

.section h2 {
  padding-top: 56px;
  margin-top: -56px;
}
.section h3 {
  padding-top: 56px;
  margin-top: -56px;
}
.section h4 {
  padding-top: 56px;
  margin-top: -56px;
}
.section h5 {
  padding-top: 56px;
  margin-top: -56px;
}
.section h6 {
  padding-top: 56px;
  margin-top: -56px;
}
</style>

<script>
// manage active state of menu based on current page
$(document).ready(function () {
  // active menu anchor
  href = window.location.pathname
  href = href.substr(href.lastIndexOf('/') + 1)
  if (href === "")
    href = "index.html";
  var menuAnchor = $('a[href="' + href + '"]');

  // mark it active
  menuAnchor.parent().addClass('active');

  // if it's got a parent navbar menu mark it active as well
  menuAnchor.closest('li.dropdown').addClass('active');
});
</script>


<div class="container-fluid main-container">

<!-- tabsets -->
<script>
$(document).ready(function () {
  window.buildTabsets("TOC");
});
</script>

<!-- code folding -->






<div class="navbar navbar-default  navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="index.html">Sanctuary Status</a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li>
  <a href="index.html">Home</a>
</li>
<li>
  <a href="pelagic.html">Pelagic</a>
</li>
<li>
  <a href="kelp-forest.html">Kelp Forest</a>
</li>
<li>
  <a href="coral-reef.html">Coral Reef</a>
</li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li>
  <a href="README.html">
    <span class="fa fa-info-circle fa-lg"></span>
     
  </a>
</li>
      </ul>
    </div><!--/.nav-collapse -->
  </div><!--/.container -->
</div><!--/.navbar -->

<div class="fluid-row" id="header">




</div>


<div id="cr-metrics" class="section level1">
<h1>cr-metrics</h1>
<p>Condition Report metrics to inform on National Marine Sanctuaries status using interactive infographic approach to displaying habitat-based elements that link to time series data. Proposed by Jenn Brown (2016).</p>
<div id="creation" class="section level2">
<h2>Creation</h2>
<p>Given a vector illustration of habitat scenes with different elements (eg pelagic: whales, fish, etc), running the following R code will generate the website for pulling up timeseries plots by clicking on the elements:</p>
<pre class="r"><code># create pages
source(&#39;functions.R&#39;) # clear_site()
create_site()</code></pre>
</div>
<div id="technology-overview" class="section level2">
<h2>Technology Overview</h2>
<p>The core functionality of this interactive infographic is to link graphical elements to interactive plots of time series or maps:</p>
<ul>
<li><p><strong>Ecosystem elements</strong> should be in the form of scalable vector graphics (*.svg), the most popular vector format (vs raster images) for illustration and animation on the web.</p></li>
<li><p><strong>Interactive plots</strong> are easily generated with the cross-platform statistical programming language <a href="https://cran.r-project.org/">R</a> and the many packages utilizing the htmlwidgets framework for porting JavaScript data visualization libraries to R functions that feed in the data. Check out the <a href="http://www.htmlwidgets.org/showcase_leaflet.html">htmlwidgets showcase</a> for compelling examples. The data pages with these htmlwidgets embedded are generated using the <a href="http://rmarkdown.rstudio.com/">Rmarkdown</a> package, which weaves in simple formatted text evaluated chunks of R code to render in any desired output format (html, doc, pdf…). I strongly encourage you to watch the 1 minute video <a href="https://vimeo.com/178485416">What is R Markdown? on Vimeo</a>. You can see the code that generates these pages from the <a href="https://github.com/marinebon/cr-metrics/blob/master/data/csv_indicators.csv">data/csv_indicators.csv</a> at <a href="https://github.com/marinebon/cr-metrics/blob/master/functions.R">functions.R</a>.</p></li>
</ul>
<p>To link the svg elements with the indicator plots, the powerful <a href="https://d3js.org/">d3</a> JavaScript library is used to read in the <a href="https://github.com/marinebon/cr-metrics/blob/master/data/svg_elements.csv">data/svg_elements.csv</a> and apply links to the elements. See code in <a href="https://raw.githubusercontent.com/marinebon/cr-metrics/master/_svg.Rmd">_svg.Rmd</a>.</p>
</div>
<div id="files" class="section level2">
<h2>Files</h2>
<p>Here’s an overview of all the files as a tree in alphabetic order, except for habitat Rmarkdown files to show similarity.</p>
<pre><code>$ tree -L 2
.
├── README.md                # this README with instructions
├── _footer.html             # website header
├── _header.html             # website footer
├── _site.yml                # site menu
├── _svg.Rmd                 # child Rmarkdown for habitats
├── coral-reef.Rmd           # habitat Rmarkdown
├── kelp-forest.Rmd          # habitat Rmarkdown
├── pelagic.Rmd              # habitat Rmarkdown
├── cr-metrics.Rproj         # R project file (optional)
├── data/                    # data folder
│   ├── csv_indicators.csv   # - table of timeseries csv
│   └── svg_elements.csv     # - table of svg elements
├── docs/                    # website folder, gets regenerated
├── functions.R              # core functions to creat website
├── img/                     # images for README
├── index.Rmd                # home page of website
├── libs/                    # libraries folder
│   ├── d3-dsv.v1.min.js     # - JavaScript to read csv
│   ├── d3.v3.min.js         # - JavaScript to manipulate svg
│   └── styles.css           # - minor styling with CSS
├── svg/                     # svg folder
│   ├── coral-reef.svg       # - habitat svg
│   ├── kelp-forest.svg      # - habitat svg
│   └── pelagic.svg          # - habitat svg
└── svg_prep/                # svg prep files (deletable)</code></pre>
</div>
<div id="process" class="section level2">
<h2>Process</h2>
<p>Besides the habitat illustration as a scalable vector graphics file (eg <a href="https://github.com/marinebon/cr-metrics/blob/master/svg/pelagic.svg">pelagics.svg</a>), the <code>create_site()</code> function relies on two tables in comma-seperated value (data/*.csv) format:</p>
<ul>
<li><a href="https://github.com/marinebon/cr-metrics/blob/master/data/svg_elements.csv"><strong>svg_elements.csv</strong></a>: identifies the elements in the svg habitat scene(s)</li>
<li><a href="https://github.com/marinebon/cr-metrics/blob/master/data/csv_indicators.csv"><strong>csv_indicators.csv</strong></a>: provides the ERDDAP URL to the timeseries data and other parameters to describe the timeseries plots and match to the svg element</li>
</ul>
<p>The website content is output to the <code>docs/</code> folder, providing an interactive user experience with only basic web files (*.html, *.js, *.css) that any web server can host.</p>
<p>You can see the files for this site hosted on Github here:</p>
<ul>
<li><a href="https://github.com/marinebon/cr-metrics" class="uri">https://github.com/marinebon/cr-metrics</a></li>
</ul>
<p>Please visit <a href="https://marinebon.github.io/help/apps.html#interactive-infographics">Help &amp; Documentation for MBON - Applications - Interactive Infographics</a> for more background.</p>
<p>Here are detailed steps to prep the necessary files (svg scenes, csv tables of elements and indicators)…</p>
<ol style="list-style-type: decimal">
<li>Download and unzip the template site here:</li>
</ol>
<ul>
<li><a href="https://github.com/marinebon/cr-metrics/archive/master.zip" class="uri">https://github.com/marinebon/cr-metrics/archive/master.zip</a></li>
</ul>
<ol style="list-style-type: decimal">
<li>Edit the vector graphics file of the habitat scene with elements using the free <a href="http://inkscape.org">Inkscape</a> program that natively uses scalable vector graphics (<code>*.svg</code>) format:
<ul>
<li>remove text labels</li>
<li><p>add <strong>ID</strong> to element or group of elements:</p>
<img src="img/inkscape-screenshot_svg-id.png" /></li>
<li><p>save to folder <code>svg/*.svg</code> as “Plain SVG” (such as <code>svg/pelagic.svg</code>)</p></li>
</ul></li>
<li><p>Add rows to the <strong><code>svg/elements.csv</code></strong>:</p>
<table>
<colgroup>
<col width="10%" />
<col width="10%" />
<col width="14%" />
<col width="11%" />
<col width="10%" />
<col width="12%" />
<col width="19%" />
<col width="10%" />
</colgroup>
<thead>
<tr class="header">
<th>habitat</th>
<th>id</th>
<th>status_path</th>
<th>status_color</th>
<th>status_text</th>
<th>link_path</th>
<th>link</th>
<th>link_title</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td>pelagic</td>
<td>whales</td>
<td>path#whales</td>
<td>red</td>
<td>decreasing</td>
<td>path#whales</td>
<td>./pages/pinnipeds.html</td>
<td>Whales</td>
</tr>
<tr class="even">
<td>pelagic</td>
<td>forage-fish</td>
<td>g#forage-fish path</td>
<td>green</td>
<td>increasing</td>
<td>g#forage-fish</td>
<td>./pages/pinnipeds.html</td>
<td>Forage Fish</td>
</tr>
<tr class="odd">
<td>kelp-forest</td>
<td>otters</td>
<td>path#otters</td>
<td>purple</td>
<td>stable</td>
<td>path#otter</td>
<td>./pages/pinnipeds.html</td>
<td>Sea Otters</td>
</tr>
</tbody>
</table>
<ul>
<li><strong>habitat</strong>: the unique name to filter for elements of this habitat scene</li>
<li><strong>id</strong>: unique element identifier</li>
<li><strong>status_path</strong>: the SVG path, either <code>path#element</code> (eg <code>path#whales</code>) for single element, or <code>g#element path</code> for grouped elements (eg <code>g#forage-fish path</code>)</li>
<li><strong>status_color</strong>: the color of the element reflecting the status</li>
<li><strong>status_text</strong>: the text of the element reflecting the status that appears on hover</li>
<li><strong>link_path</strong>: the SVG path, either <code>path#element</code> (eg <code>path#whales</code>) for single element, or <code>g#element</code> for grouped elements (eg <code>g#forage-fish</code>)</li>
<li><strong>link</strong>: the hyperlink to the page of corresponding data (usually timeseries)</li>
<li><strong>link_title</strong>: the title that shows at the top of the modal popup window containing the page when the element is clicked</li>
</ul></li>
<li><p>Add / edit the <code>data/csv_indicators.csv</code> with the following key fields, originally drawn from the site <a href="https://www.integratedecosystemassessment.noaa.gov//regions/california-current-region/index.html">IEA - California Current</a>:</p>
<ul>
<li><strong>indicator</strong>: name of indicator, which will become the timeseries plot’s title</li>
<li><strong>y_label</strong>: label on the y-axis describing the value measured over time</li>
<li><strong>csv_url</strong>: the link to the ERDDAP data in CSV format, extractable from the ERDDAP image URL</li>
</ul></li>
<li><p>Create the site by running the following R code:</p>
<pre class="r"><code>source(&#39;functions.R&#39;)
create_site()</code></pre>
<ul>
<li>Be sure that your current working directory is in the <code>cr-metrics/</code> root folder (eg with <code>setwd()</code> in R).</li>
</ul>
<p>The website gets built into the <code>docs/</code> folder.</p></li>
<li><p>Push to website. This repository uses Github Pages:</p>
<ul>
<li><p>code: <a href="https://github.com/marinebon/cr-metrics" class="uri">https://github.com/marinebon/cr-metrics</a></p></li>
<li><p>site: <a href="https://marinebon.github.io/cr-metrics" class="uri">https://marinebon.github.io/cr-metrics</a></p></li>
</ul></li>
</ol>
</div>
<div id="todo" class="section level2">
<h2>TODO</h2>
<ul>
<li><p>Seperate into R package infographiq, and instances for FKNMS, MBNMS, etc.</p></li>
<li><p>Populate California example, using available ERDDAP-connected timeseries from <a href="https://www.integratedecosystemassessment.noaa.gov//regions/california-current-region/index.html">IEA - California Current</a></p></li>
<li><p>Populate Florida Keys NMS, working in particular with people at FKNMS (Mike Buchman, Steve Gittings) and FL MBON (Megan Hepner)</p></li>
</ul>
</div>
</div>

<p>Copyright &copy; 2017 Marine Biodiversity Observation Network & NOAA National Marine Sanctuaries.</p>



</div>

<script>

// add bootstrap table styles to pandoc tables
function bootstrapStylePandocTables() {
  $('tr.header').parent('thead').parent('table').addClass('table table-condensed');
}
$(document).ready(function () {
  bootstrapStylePandocTables();
});


</script>

<!-- dynamically load mathjax for compatibility with self-contained -->
<script>
  (function () {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src  = "https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML";
    document.getElementsByTagName("head")[0].appendChild(script);
  })();
</script>

</body>
</html>