<!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" />
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta name="author" content="W. Brent Thorne1" /><meta name="author" content="William B. Thorne1" />
    
    <title>Using posterdown to generate reproducible conference posters via RMarkdown &gt; Knitr &gt; Markdown &gt; Pandoc &gt; HTML/CSS &gt; PDF workflow</title>

        <script src="skeleton_files/kePrint-0.0.1/kePrint.js"></script>
    <script src="skeleton_files/htmlwidgets-1.3/htmlwidgets.js"></script>
    <script src="skeleton_files/jquery-1.12.4/jquery.min.js"></script>
    <link href="skeleton_files/leaflet-1.3.1/leaflet.css" rel="stylesheet" />
    <script src="skeleton_files/leaflet-1.3.1/leaflet.js"></script>
    <link href="skeleton_files/leafletfix-1.0.0/leafletfix.css" rel="stylesheet" />
    <script src="skeleton_files/Proj4Leaflet-1.0.1/proj4-compressed.js"></script>
    <script src="skeleton_files/Proj4Leaflet-1.0.1/proj4leaflet.js"></script>
    <link href="skeleton_files/rstudio_leaflet-1.3.1/rstudio_leaflet.css" rel="stylesheet" />
    <script src="skeleton_files/leaflet-binding-2.0.2/leaflet.js"></script>
    
    
    <style type="text/css">a.sourceLine { display: inline-block; line-height: 1.25; }
a.sourceLine { pointer-events: none; color: inherit; text-decoration: inherit; }
a.sourceLine:empty { height: 1.2em; }
.sourceCode { overflow: visible; }
code.sourceCode { white-space: pre; position: relative; }
div.sourceCode { margin: 1em 0; }
pre.sourceCode { margin: 0; }
@media screen {
div.sourceCode { overflow: auto; }
}
@media print {
code.sourceCode { white-space: pre-wrap; }
a.sourceLine { text-indent: -1em; padding-left: 1em; }
}
pre.numberSource a.sourceLine
  { position: relative; left: -4em; }
pre.numberSource a.sourceLine::before
  { content: attr(data-line-number);
    position: relative; left: -1em; text-align: right; vertical-align: baseline;
    border: none; pointer-events: all; display: inline-block;
    -webkit-touch-callout: none; -webkit-user-select: none;
    -khtml-user-select: none; -moz-user-select: none;
    -ms-user-select: none; user-select: none;
    padding: 0 4px; width: 4em;
    color: #aaaaaa;
  }
pre.numberSource { margin-left: 3em; border-left: 1px solid #aaaaaa;  padding-left: 4px; }
div.sourceCode
  { background-color: #f8f8f8; }
@media screen {
a.sourceLine::before { text-decoration: underline; }
}
code span.al { color: #ef2929; } /* Alert */
code span.an { color: #8f5902; font-weight: bold; font-style: italic; } /* Annotation */
code span.at { color: #c4a000; } /* Attribute */
code span.bn { color: #0000cf; } /* BaseN */
code span.cf { color: #204a87; font-weight: bold; } /* ControlFlow */
code span.ch { color: #4e9a06; } /* Char */
code span.cn { color: #000000; } /* Constant */
code span.co { color: #8f5902; font-style: italic; } /* Comment */
code span.cv { color: #8f5902; font-weight: bold; font-style: italic; } /* CommentVar */
code span.do { color: #8f5902; font-weight: bold; font-style: italic; } /* Documentation */
code span.dt { color: #204a87; } /* DataType */
code span.dv { color: #0000cf; } /* DecVal */
code span.er { color: #a40000; font-weight: bold; } /* Error */
code span.ex { } /* Extension */
code span.fl { color: #0000cf; } /* Float */
code span.fu { color: #000000; } /* Function */
code span.im { } /* Import */
code span.in { color: #8f5902; font-weight: bold; font-style: italic; } /* Information */
code span.kw { color: #204a87; font-weight: bold; } /* Keyword */
code span.op { color: #ce5c00; font-weight: bold; } /* Operator */
code span.ot { color: #8f5902; } /* Other */
code span.pp { color: #8f5902; font-style: italic; } /* Preprocessor */
code span.sc { color: #000000; } /* SpecialChar */
code span.ss { color: #4e9a06; } /* SpecialString */
code span.st { color: #4e9a06; } /* String */
code span.va { color: #000000; } /* Variable */
code span.vs { color: #4e9a06; } /* VerbatimString */
code span.wa { color: #8f5902; font-weight: bold; font-style: italic; } /* Warning */</style>

    
    <style>
      @page {
          size: 45in 38in;
          margin: 0;
          padding: 0;
      }
      body {
        margin: 0;
        font-size: 45px;
        width: 45in;
        height: 38in;
        padding: 0;
        text-align: justify;
        font-family: Palatino;
        background-color: #ffffff;
      }
      .title_container {
        width: 100%;
        height: 15%;
        overflow: hidden;
        background-color: #008080;
        border: 1cm solid #0b4545;
      }
      .logo_left {
        float: left;
        width: 10%;
        height: 100%;
        background-color: #008080;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .logo_right {
        float: right;
        width: 10%;
        height: 100%;
        background-color: #008080;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .poster_title {
        text-align: center;
        position: relative;
        float: left;
        width: 80%;
        height: 100%;
        color: #ffffff;
        top: 50%;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
      }
      #title {
        font-family: Helvetica;
            }
      /* unvisited link */
      a:link {
        color: #0b4545;
      }

      /* visited link */
      a:visited {
        color: #0b4545;
      }

      /* mouse over link */
      a:hover {
        color: #0b4545;
      }

      /* selected link */
      a:active {
        color: #0b4545;
      }
      .poster_body {
        -webkit-column-count: 3; /* Chrome, Safari, Opera */
        -moz-column-count: 3; /* Firefox */
        column-count: 3;
        -webkit-column-fill: auto;
        -moz-column-fill: auto;
        column-fill: auto;
        -webkit-column-rule-width: 1mm;
        -moz-column-rule-width: 1mm;
        column-rule-width: 1mm;
        -webkit-column-rule-style: dashed;
        -moz-column-rule-style: dashed;
        column-rule-style: dashed;
        -webkit-column-rule-color: #008080;
        -moz-column-rule-color: #008080;
        column-rule-color: #008080;
        width: 100%;
        height: 85%;
        padding-left: 1cm;
        padding-right: 1cm;
        padding-bottom: 1cm;
        padding-top: 1cm;
        color: #000000;
      }
      .poster_title h1 {
        font-size: 75pt;
        margin: 0;
        padding: 0;
        border: 0;
        padding-top: 1cm;
        padding-bottom: 0;
      }
      .poster_title h3 {
        color: #0b4545;
        font-size: 50pt;
        margin: 0;
        padding: 0;
        padding-top: 1cm;
        padding-bottom: 0.5cm;
        border: 0;
      }
      .poster_title h5 {
        color: #FFFFFF;
        font-size: ;
        margin: 0;
        padding: 0;
        border: 0;
        padding-top: 1cm;
      }
      img {
        margin-top: 2cm;
        margin-bottom: 0;
      }
      .poster_body h1 {
        text-align: center;
        color: #ffffff;
        font-size: 50pt;
        border: 2mm solid #0b4545;
        background-color: #0b4545;
        border-radius: 4mm 0mm;
        margin-top: 2mm;
        margin-bottom: 2mm;
        padding-top: 5mm;
        padding-bottom: 5mm;
      }
      .poster_body h2 {
        color: #0b4545;
        font-size: 40pt;
        padding-left: 4mm;
      }
      .span h1 {
        text-align: center;
        color: #ffffff;
        font-size: 50pt;
        border: 2mm solid yellow;
        background-color: yellow;
        border-radius: 4mm 0mm;
        margin-top: 5mm;
        margin-bottom: 5mm;
        padding-top: 5mm;
        padding-bottom: 5mm;
        width: 100%
      }
      .span {
        background-color: red;
        width: 200%;
        position:relative;
      }
      /* center align leaflet map,
      from https://stackoverflow.com/questions/52112119/center-leaflet-in-a-rmarkdown-document */
      .html-widget {
        margin: auto;
        position: sticky;
        margin-top: 2cm;
        margin-bottom: 2cm;
      }
      .leaflet.html-widget.html-widget-static-bound.leaflet-container.leaflet-touch.leaflet-fade-anim.leaflet-grab.leaflet-touch-drag.leaflet-touch-zoom {
        position: sticky;
        width: 100%;
      }
      pre.sourceCode.r {
        background-color: #dddddd40;
        border-radius: 4mm;
        padding: 4mm;
        width: 75%;
        /* align-items: center; */
        margin: auto;
        padding-left: 2cm;
      }
      code.sourceCode.r{
        background-color: transparent;
        font-size: 20pt;
        border-radius: 2mm;
      }
      .caption {
        font-size: 25pt;
      }
      .table caption {
        font-size: 25pt;
        padding-bottom: 3mm;

      }
      code {
        font-size: 25pt;
        font-family: monospace;
        background-color: #00808024;
        color: #0b4545;
        padding: 1.2mm;
        border-radius: 2mm;
      }
      table {
        font-size: 40px;
        margin: auto;
        border-top: 3px solid #666;
        border-bottom: 3px solid #666;
      }
      table thead th {
        border-bottom: 3px solid #ddd;
      }
      td {
        padding: 8px;
      }
      th {
        padding: 15px;
      }
      caption {
        margin-bottom: 10px;
      }
      .poster_body p {
        margin-right: 4mm;
        margin-left: 4mm;
        margin-top: 6mm;
        margin-bottom: 10mm;
      }
      .poster_body ol {
        margin-right: 4mm;
        margin-left: 4mm;
      }
      #ul {
        margin-right: 4mm;
        margin-left: 4mm;
      }
      .references p {
        font-size: 20pt;
      }
    </style>

  </head>
  <body>


<div class="title_container">
  <!-- Left Logo  -->
  <div class="logo_left">
    <img src= 'Figures/posterdownlogo.png' style="width: 80%">
  </div>
  <!-- Poster Title -->
  <div class= "poster_title">
    <h1 id="title">Using posterdown to generate reproducible conference posters via RMarkdown &gt; Knitr &gt; Markdown &gt; Pandoc &gt; HTML/CSS &gt; PDF workflow</h1>
    <h3 id="author">W. Brent Thorne<sup>1</sup>, William B. Thorne<sup>1</sup></h3>
    <h5 id="affiliation"><sup>1</sup>Department of Earth Science, Brock University</h5>

  </div>
  <!-- Right Logo  -->
    <div class="logo_right">
          <img src="Figures/posterdownlogo.png" style="width: 80%">
  </div>
</div>

<div class='poster_body'>
<!--
Bellow you will find typical RMarkdown syntax which should fill in the columns for the poster from top to bottom left to right. The more information you have the more will be filled. Please let me know if you have feedback at brentthorne18@gmail.com or at github.com/brentthorne/posterdown.
ENJOY! XD
-->
<div id="introduction" class="section level1">
<h1><span class="header-section-number">1</span> Introduction</h1>
<p>Welcome to <code>posterdown</code> ! This is my attempt to provide a semi-smooth workflow for those who wish to take their <code>RMarkdown</code> skills to the conference world. Many creature comforts from <code>RMarkdown</code> are available in this package such as <code>Markdown</code> section notation, figure captioning, and even citations like this one. The rest of this example poster will show how you can insert typical conference poster features into your own document.</p>
<div id="study-site" class="section level2">
<h2><span class="header-section-number">1.1</span> Study Site</h2>
<p>Here is a map made to show the study site using <code>ggplot2</code>, <code>ggspatial</code>, and <code>sf</code> and you can even reference this with a hyperlink, this will take you to <strong>Figure <a href="#fig:mymapfig">1.1</a></strong>.</p>
<div class="figure" style="text-align: center"><span id="fig:mymapfig"></span>
<img src="skeleton_files/figure-html/mymapfig-1.png" alt="Map of Long Lake eample from the [ggspatial](https://github.com/paleolimbot/ggspatial) package." width="100%" />
<p class="caption">
Figure 1.1: Map of Long Lake eample from the <a href="https://github.com/paleolimbot/ggspatial">ggspatial</a> package.
</p>
</div>
</div>
<div id="objectives" class="section level2">
<h2><span class="header-section-number">1.2</span> Objectives</h2>
<ol style="list-style-type: decimal">
<li>Easy to use reproducible poster design.</li>
<li>Integration with <code>RMarkdown</code>.</li>
<li>Easy transition from <code>posterdown</code> to <code>thesisdown</code> or <code>rticles</code></li>
</ol>
</div>
</div>
<div id="methods" class="section level1">
<h1><span class="header-section-number">2</span> Methods</h1>
<p>This package uses the same workflow approach as the <code>RMarkdown</code> you know and love. Basically it goes from RMarkdown &gt; Knitr &gt; Markdown &gt; Pandoc &gt; HTML/CSS &gt; PDF. You can even use the bibliography the same way <span class="citation">(Turner et al. 2014)</span>.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque auctor lorem ex. Pellentesque tempus accumsan nulla, nec eleifend erat rhoncus vel. Ut commodo metus ipsum, sed accumsan risus placerat ut. Proin eu ipsum ut quam maximus elementum. Duis ultricies varius placerat. Sed viverra justo at dignissim efficitur. Duis nec fermentum ex. Nulla ut fermentum purus.</p>
</div>
<div id="results" class="section level1">
<h1><span class="header-section-number">3</span> Results</h1>
<p>Usually you want to have a nice table displaying some important results that you have calcualated. In posterdown this is as easy as using the <code>kable</code> table formatting you are probably use to as per typical <code>RMarkdown</code> formatting. I suggesting checking out the <code>kableExtra</code> package and its in depth documentation on customizing these tables found <a href="https://haozhu233.github.io/kableExtra/awesome_table_in_pdf.pdf">here</a>. Hopfully I can make this with an inline refernce like, Table <a href="#tab:mytable">3.1</a>.</p>
<table class="table" style="margin-left: auto; margin-right: auto;">
<caption>
<span id="tab:mytable">Table 3.1: </span>Table caption.
</caption>
<thead>
<tr>
<th style="text-align:center;">
Sepal.Length
</th>
<th style="text-align:center;">
Sepal.Width
</th>
<th style="text-align:center;">
Petal.Length
</th>
<th style="text-align:center;">
Petal.Width
</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:center;">
5.1
</td>
<td style="text-align:center;">
3.5
</td>
<td style="text-align:center;">
1.4
</td>
<td style="text-align:center;">
0.2
</td>
</tr>
<tr>
<td style="text-align:center;">
4.9
</td>
<td style="text-align:center;">
3.0
</td>
<td style="text-align:center;">
1.4
</td>
<td style="text-align:center;">
0.2
</td>
</tr>
<tr>
<td style="text-align:center;">
4.7
</td>
<td style="text-align:center;">
3.2
</td>
<td style="text-align:center;">
1.3
</td>
<td style="text-align:center;">
0.2
</td>
</tr>
<tr>
<td style="text-align:center;">
4.6
</td>
<td style="text-align:center;">
3.1
</td>
<td style="text-align:center;">
1.5
</td>
<td style="text-align:center;">
0.2
</td>
</tr>
<tr>
<td style="text-align:center;">
5.0
</td>
<td style="text-align:center;">
3.6
</td>
<td style="text-align:center;">
1.4
</td>
<td style="text-align:center;">
0.2
</td>
</tr>
</tbody>
</table>
<p>Look at this animation!!!! Figure <a href="#fig:gganimatefig">3.1</a>.</p>
<pre class="sourceCode r"><code class="sourceCode r"><span class="kw">library</span>(ggplot2)
<span class="kw">library</span>(gganimate)
<span class="kw">library</span>(gapminder)

<span class="kw">ggplot</span>(gapminder, <span class="kw">aes</span>(gdpPercap,
                      lifeExp,
                      <span class="dt">size =</span> pop,
                      <span class="dt">colour =</span> country)) <span class="op">+</span>
<span class="st">  </span><span class="kw">geom_point</span>(<span class="dt">alpha =</span> <span class="fl">0.7</span>, <span class="dt">show.legend =</span> <span class="ot">FALSE</span>) <span class="op">+</span>
<span class="st">  </span><span class="kw">scale_colour_manual</span>(<span class="dt">values =</span> country_colors) <span class="op">+</span>
<span class="st">  </span><span class="kw">scale_size</span>(<span class="dt">range =</span> <span class="kw">c</span>(<span class="dv">2</span>, <span class="dv">12</span>)) <span class="op">+</span>
<span class="st">  </span><span class="kw">scale_x_log10</span>() <span class="op">+</span>
<span class="st">  </span><span class="kw">facet_wrap</span>(<span class="op">~</span>continent) <span class="op">+</span>
<span class="st">  </span><span class="co"># Here comes the gganimate specific bits</span>
<span class="st">  </span><span class="kw">labs</span>(<span class="dt">title =</span> <span class="st">&#39;Year: {frame_time}&#39;</span>,
       <span class="dt">x =</span> <span class="st">&#39;GDP per capita&#39;</span>,
       <span class="dt">y =</span> <span class="st">&#39;life expectancy&#39;</span>) <span class="op">+</span>
<span class="st">  </span><span class="kw">transition_time</span>(year) <span class="op">+</span>
<span class="st">  </span><span class="kw">ease_aes</span>(<span class="st">&#39;linear&#39;</span>)</code></pre>
<div class="figure" style="text-align: center"><span id="fig:gganimatefig"></span>
<img src="skeleton_files/figure-html/gganimatefig-1.gif" alt="WOW THIS IS AN AWESOME GIF!" width="80%" />
<p class="caption">
Figure 3.1: WOW THIS IS AN AWESOME GIF!
</p>
</div>
<div class="figure" style="text-align: center"><span id="fig:unnamed-chunk-2"></span>
<img src="skeleton_files/figure-html/unnamed-chunk-2-1.png" alt="Using ggplot and patchwork to generate a layout of multiple plots in one figure. The iris dataset was used to generate (a) a line graph, (b) a scatterplot, and (c) a boxplot all together!" width="100%" />
<p class="caption">
Figure 3.2: Using ggplot and patchwork to generate a layout of multiple plots in one figure. The iris dataset was used to generate (a) a line graph, (b) a scatterplot, and (c) a boxplot all together!
</p>
</div>
</div>
<div id="next-steps" class="section level1">
<h1><span class="header-section-number">4</span> Next Steps</h1>
<p>There is still <strong>A LOT</strong> of work to do on this package which include (but are note limited to):</p>
</div>
<div id="conclusion" class="section level1">
<h1><span class="header-section-number">5</span> Conclusion</h1>
<div class="figure" style="text-align: center"><span id="fig:leafletfig"></span>
<div id="htmlwidget-3a12806d7d1f68b67f74" style="width:672px;height:480px;" class="leaflet html-widget"></div>
<script type="application/json" data-for="htmlwidget-3a12806d7d1f68b67f74">{"x":{"options":{"crs":{"crsClass":"L.CRS.EPSG3857","code":null,"proj4def":null,"projectedBounds":null,"options":{}}},"calls":[{"method":"addTiles","args":["//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",null,null,{"minZoom":0,"maxZoom":18,"tileSize":256,"subdomains":"abc","errorTileUrl":"","tms":false,"noWrap":false,"zoomOffset":0,"zoomReverse":false,"opacity":1,"zIndex":1,"detectRetina":false,"attribution":"&copy; <a href=\"http://openstreetmap.org\">OpenStreetMap<\/a> contributors, <a href=\"http://creativecommons.org/licenses/by-sa/2.0/\">CC-BY-SA<\/a>"}]}]},"evals":[],"jsHooks":[]}</script>
<p class="caption">
Figure 5.1: Here is a leaflet figure which whill run as expected online, when printed it will take the last state it is left in beofre choosing to print.
</p>
</div>
</div>
<div id="references" class="section level1 unnumbered">
<h1>References</h1>
<div id="refs" class="references">
<div id="ref-turnerControlsWaterBalance2014">
<p>Turner, Kevin W., Brent B. Wolfe, Thomas W. D. Edwards, Trevor C. Lantz, Roland I. Hall, and Guillaume Larocque. 2014. “Controls on Water Balance of Shallow Thermokarst Lakes and Their Relations with Catchment Characteristics: A Multi-Year, Landscape-Scale Assessment Based on Water Isotope Tracers and Remote Sensing in Old Crow Flats, Yukon (Canada).” <em>Global Change Biology</em> 20 (5): 1585–1603. <a href="https://doi.org/10.1111/gcb.12465">https://doi.org/10.1111/gcb.12465</a>.</p>
</div>
</div>
</div>
</div>


  </body>
</html>