Gitiles
Code Review Sign In
korap.ids-mannheim.de / IDS-Mannheim / posterdown / 7e62bbdb374ad650d049fb7266b9108041fe3854 / . / index.html
blob: 7be0d734fd4c15e9045502fdd8180ef438e56448 [file] [log] [blame]
brentthorne7e62bbd2019-02-06 21:22:01 -0500[diff] [blame^]1<!DOCTYPE html>
2<html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta charset="utf-8" />
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6 <meta name="generator" content="pandoc" />
7 <meta name="viewport" content="width=device-width, initial-scale=1">
8
9 <meta name="author" content="W. Brent Thorne1" /><meta name="author" content="William B. Thorne1" />
10
11 <title>Using posterdown to generate reproducible conference posters via RMarkdown &gt; Knitr &gt; Markdown &gt; Pandoc &gt; HTML/CSS &gt; PDF workflow</title>
12
13 <script src="skeleton_files/kePrint-0.0.1/kePrint.js"></script>
14 <script src="skeleton_files/htmlwidgets-1.3/htmlwidgets.js"></script>
15 <script src="skeleton_files/jquery-1.12.4/jquery.min.js"></script>
16 <link href="skeleton_files/leaflet-1.3.1/leaflet.css" rel="stylesheet" />
17 <script src="skeleton_files/leaflet-1.3.1/leaflet.js"></script>
18 <link href="skeleton_files/leafletfix-1.0.0/leafletfix.css" rel="stylesheet" />
19 <script src="skeleton_files/Proj4Leaflet-1.0.1/proj4-compressed.js"></script>
20 <script src="skeleton_files/Proj4Leaflet-1.0.1/proj4leaflet.js"></script>
21 <link href="skeleton_files/rstudio_leaflet-1.3.1/rstudio_leaflet.css" rel="stylesheet" />
22 <script src="skeleton_files/leaflet-binding-2.0.2/leaflet.js"></script>
23
24
25 <style type="text/css">a.sourceLine { display: inline-block; line-height: 1.25; }
26a.sourceLine { pointer-events: none; color: inherit; text-decoration: inherit; }
27a.sourceLine:empty { height: 1.2em; }
28.sourceCode { overflow: visible; }
29code.sourceCode { white-space: pre; position: relative; }
30div.sourceCode { margin: 1em 0; }
31pre.sourceCode { margin: 0; }
32@media screen {
33div.sourceCode { overflow: auto; }
34}
35@media print {
36code.sourceCode { white-space: pre-wrap; }
37a.sourceLine { text-indent: -1em; padding-left: 1em; }
38}
39pre.numberSource a.sourceLine
40 { position: relative; left: -4em; }
41pre.numberSource a.sourceLine::before
42 { content: attr(data-line-number);
43 position: relative; left: -1em; text-align: right; vertical-align: baseline;
44 border: none; pointer-events: all; display: inline-block;
45 -webkit-touch-callout: none; -webkit-user-select: none;
46 -khtml-user-select: none; -moz-user-select: none;
47 -ms-user-select: none; user-select: none;
48 padding: 0 4px; width: 4em;
49 color: #aaaaaa;
50 }
51pre.numberSource { margin-left: 3em; border-left: 1px solid #aaaaaa; padding-left: 4px; }
52div.sourceCode
53 { background-color: #f8f8f8; }
54@media screen {
55a.sourceLine::before { text-decoration: underline; }
56}
57code span.al { color: #ef2929; } /* Alert */
58code span.an { color: #8f5902; font-weight: bold; font-style: italic; } /* Annotation */
59code span.at { color: #c4a000; } /* Attribute */
60code span.bn { color: #0000cf; } /* BaseN */
61code span.cf { color: #204a87; font-weight: bold; } /* ControlFlow */
62code span.ch { color: #4e9a06; } /* Char */
63code span.cn { color: #000000; } /* Constant */
64code span.co { color: #8f5902; font-style: italic; } /* Comment */
65code span.cv { color: #8f5902; font-weight: bold; font-style: italic; } /* CommentVar */
66code span.do { color: #8f5902; font-weight: bold; font-style: italic; } /* Documentation */
67code span.dt { color: #204a87; } /* DataType */
68code span.dv { color: #0000cf; } /* DecVal */
69code span.er { color: #a40000; font-weight: bold; } /* Error */
70code span.ex { } /* Extension */
71code span.fl { color: #0000cf; } /* Float */
72code span.fu { color: #000000; } /* Function */
73code span.im { } /* Import */
74code span.in { color: #8f5902; font-weight: bold; font-style: italic; } /* Information */
75code span.kw { color: #204a87; font-weight: bold; } /* Keyword */
76code span.op { color: #ce5c00; font-weight: bold; } /* Operator */
77code span.ot { color: #8f5902; } /* Other */
78code span.pp { color: #8f5902; font-style: italic; } /* Preprocessor */
79code span.sc { color: #000000; } /* SpecialChar */
80code span.ss { color: #4e9a06; } /* SpecialString */
81code span.st { color: #4e9a06; } /* String */
82code span.va { color: #000000; } /* Variable */
83code span.vs { color: #4e9a06; } /* VerbatimString */
84code span.wa { color: #8f5902; font-weight: bold; font-style: italic; } /* Warning */</style>
85
86
87 <style>
88 @page {
89 size: 45in 38in;
90 margin: 0;
91 padding: 0;
92 }
93 body {
94 margin: 0;
95 font-size: 45px;
96 width: 45in;
97 height: 38in;
98 padding: 0;
99 text-align: justify;
100 font-family: Palatino;
101 background-color: #ffffff;
102 }
103 .title_container {
104 width: 100%;
105 height: 15%;
106 overflow: hidden;
107 background-color: #008080;
108 border: 1cm solid #0b4545;
109 }
110 .logo_left {
111 float: left;
112 width: 10%;
113 height: 100%;
114 background-color: #008080;
115 display: flex;
116 align-items: center;
117 justify-content: center;
118 }
119 .logo_right {
120 float: right;
121 width: 10%;
122 height: 100%;
123 background-color: #008080;
124 display: flex;
125 align-items: center;
126 justify-content: center;
127 }
128 .poster_title {
129 text-align: center;
130 position: relative;
131 float: left;
132 width: 80%;
133 height: 100%;
134 color: #ffffff;
135 top: 50%;
136 transform: translateY(-50%);
137 -webkit-transform: translateY(-50%);
138 }
139 #title {
140 font-family: Helvetica;
141 }
142 /* unvisited link */
143 a:link {
144 color: #0b4545;
145 }
146
147 /* visited link */
148 a:visited {
149 color: #0b4545;
150 }
151
152 /* mouse over link */
153 a:hover {
154 color: #0b4545;
155 }
156
157 /* selected link */
158 a:active {
159 color: #0b4545;
160 }
161 .poster_body {
162 -webkit-column-count: 3; /* Chrome, Safari, Opera */
163 -moz-column-count: 3; /* Firefox */
164 column-count: 3;
165 -webkit-column-fill: auto;
166 -moz-column-fill: auto;
167 column-fill: auto;
168 -webkit-column-rule-width: 1mm;
169 -moz-column-rule-width: 1mm;
170 column-rule-width: 1mm;
171 -webkit-column-rule-style: dashed;
172 -moz-column-rule-style: dashed;
173 column-rule-style: dashed;
174 -webkit-column-rule-color: #008080;
175 -moz-column-rule-color: #008080;
176 column-rule-color: #008080;
177 width: 100%;
178 height: 85%;
179 padding-left: 1cm;
180 padding-right: 1cm;
181 padding-bottom: 1cm;
182 padding-top: 1cm;
183 color: #000000;
184 }
185 .poster_title h1 {
186 font-size: 75pt;
187 margin: 0;
188 padding: 0;
189 border: 0;
190 padding-top: 1cm;
191 padding-bottom: 0;
192 }
193 .poster_title h3 {
194 color: #0b4545;
195 font-size: 50pt;
196 margin: 0;
197 padding: 0;
198 padding-top: 1cm;
199 padding-bottom: 0.5cm;
200 border: 0;
201 }
202 .poster_title h5 {
203 color: #FFFFFF;
204 font-size: ;
205 margin: 0;
206 padding: 0;
207 border: 0;
208 padding-top: 1cm;
209 }
210 img {
211 margin-top: 2cm;
212 margin-bottom: 0;
213 }
214 .poster_body h1 {
215 text-align: center;
216 color: #ffffff;
217 font-size: 50pt;
218 border: 2mm solid #0b4545;
219 background-color: #0b4545;
220 border-radius: 4mm 0mm;
221 margin-top: 2mm;
222 margin-bottom: 2mm;
223 padding-top: 5mm;
224 padding-bottom: 5mm;
225 }
226 .poster_body h2 {
227 color: #0b4545;
228 font-size: 40pt;
229 padding-left: 4mm;
230 }
231 .span h1 {
232 text-align: center;
233 color: #ffffff;
234 font-size: 50pt;
235 border: 2mm solid yellow;
236 background-color: yellow;
237 border-radius: 4mm 0mm;
238 margin-top: 5mm;
239 margin-bottom: 5mm;
240 padding-top: 5mm;
241 padding-bottom: 5mm;
242 width: 100%
243 }
244 .span {
245 background-color: red;
246 width: 200%;
247 position:relative;
248 }
249 /* center align leaflet map,
250 from https://stackoverflow.com/questions/52112119/center-leaflet-in-a-rmarkdown-document */
251 .html-widget {
252 margin: auto;
253 position: sticky;
254 margin-top: 2cm;
255 margin-bottom: 2cm;
256 }
257 .leaflet.html-widget.html-widget-static-bound.leaflet-container.leaflet-touch.leaflet-fade-anim.leaflet-grab.leaflet-touch-drag.leaflet-touch-zoom {
258 position: sticky;
259 width: 100%;
260 }
261 pre.sourceCode.r {
262 background-color: #dddddd40;
263 border-radius: 4mm;
264 padding: 4mm;
265 width: 75%;
266 /* align-items: center; */
267 margin: auto;
268 padding-left: 2cm;
269 }
270 code.sourceCode.r{
271 background-color: transparent;
272 font-size: 20pt;
273 border-radius: 2mm;
274 }
275 .caption {
276 font-size: 25pt;
277 }
278 .table caption {
279 font-size: 25pt;
280 padding-bottom: 3mm;
281
282 }
283 code {
284 font-size: 25pt;
285 font-family: monospace;
286 background-color: #00808024;
287 color: #0b4545;
288 padding: 1.2mm;
289 border-radius: 2mm;
290 }
291 table {
292 font-size: 40px;
293 margin: auto;
294 border-top: 3px solid #666;
295 border-bottom: 3px solid #666;
296 }
297 table thead th {
298 border-bottom: 3px solid #ddd;
299 }
300 td {
301 padding: 8px;
302 }
303 th {
304 padding: 15px;
305 }
306 caption {
307 margin-bottom: 10px;
308 }
309 .poster_body p {
310 margin-right: 4mm;
311 margin-left: 4mm;
312 margin-top: 6mm;
313 margin-bottom: 10mm;
314 }
315 .poster_body ol {
316 margin-right: 4mm;
317 margin-left: 4mm;
318 }
319 #ul {
320 margin-right: 4mm;
321 margin-left: 4mm;
322 }
323 .references p {
324 font-size: 20pt;
325 }
326 </style>
327
328 </head>
329 <body>
330
331
332<div class="title_container">
333 <!-- Left Logo -->
334 <div class="logo_left">
335 <img src= 'Figures/posterdownlogo.png' style="width: 80%">
336 </div>
337 <!-- Poster Title -->
338 <div class= "poster_title">
339 <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>
340 <h3 id="author">W. Brent Thorne<sup>1</sup>, William B. Thorne<sup>1</sup></h3>
341 <h5 id="affiliation"><sup>1</sup>Department of Earth Science, Brock University</h5>
342
343 </div>
344 <!-- Right Logo -->
345 <div class="logo_right">
346 <img src="Figures/posterdownlogo.png" style="width: 80%">
347 </div>
348</div>
349
350<div class='poster_body'>
351<!--
352Bellow 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.
353ENJOY! XD
354-->
355<div id="introduction" class="section level1">
356<h1><span class="header-section-number">1</span> Introduction</h1>
357<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>
358<div id="study-site" class="section level2">
359<h2><span class="header-section-number">1.1</span> Study Site</h2>
360<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>
361<div class="figure" style="text-align: center"><span id="fig:mymapfig"></span>
362<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%" />
363<p class="caption">
364Figure 1.1: Map of Long Lake eample from the <a href="https://github.com/paleolimbot/ggspatial">ggspatial</a> package.
365</p>
366</div>
367</div>
368<div id="objectives" class="section level2">
369<h2><span class="header-section-number">1.2</span> Objectives</h2>
370<ol style="list-style-type: decimal">
371<li>Easy to use reproducible poster design.</li>
372<li>Integration with <code>RMarkdown</code>.</li>
373<li>Easy transition from <code>posterdown</code> to <code>thesisdown</code> or <code>rticles</code></li>
374</ol>
375</div>
376</div>
377<div id="methods" class="section level1">
378<h1><span class="header-section-number">2</span> Methods</h1>
379<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>
380<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>
381</div>
382<div id="results" class="section level1">
383<h1><span class="header-section-number">3</span> Results</h1>
384<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>
385<table class="table" style="margin-left: auto; margin-right: auto;">
386<caption>
387<span id="tab:mytable">Table 3.1: </span>Table caption.
388</caption>
389<thead>
390<tr>
391<th style="text-align:center;">
392Sepal.Length
393</th>
394<th style="text-align:center;">
395Sepal.Width
396</th>
397<th style="text-align:center;">
398Petal.Length
399</th>
400<th style="text-align:center;">
401Petal.Width
402</th>
403</tr>
404</thead>
405<tbody>
406<tr>
407<td style="text-align:center;">
4085.1
409</td>
410<td style="text-align:center;">
4113.5
412</td>
413<td style="text-align:center;">
4141.4
415</td>
416<td style="text-align:center;">
4170.2
418</td>
419</tr>
420<tr>
421<td style="text-align:center;">
4224.9
423</td>
424<td style="text-align:center;">
4253.0
426</td>
427<td style="text-align:center;">
4281.4
429</td>
430<td style="text-align:center;">
4310.2
432</td>
433</tr>
434<tr>
435<td style="text-align:center;">
4364.7
437</td>
438<td style="text-align:center;">
4393.2
440</td>
441<td style="text-align:center;">
4421.3
443</td>
444<td style="text-align:center;">
4450.2
446</td>
447</tr>
448<tr>
449<td style="text-align:center;">
4504.6
451</td>
452<td style="text-align:center;">
4533.1
454</td>
455<td style="text-align:center;">
4561.5
457</td>
458<td style="text-align:center;">
4590.2
460</td>
461</tr>
462<tr>
463<td style="text-align:center;">
4645.0
465</td>
466<td style="text-align:center;">
4673.6
468</td>
469<td style="text-align:center;">
4701.4
471</td>
472<td style="text-align:center;">
4730.2
474</td>
475</tr>
476</tbody>
477</table>
478<p>Look at this animation!!!! Figure <a href="#fig:gganimatefig">3.1</a>.</p>
479<pre class="sourceCode r"><code class="sourceCode r"><span class="kw">library</span>(ggplot2)
480<span class="kw">library</span>(gganimate)
481<span class="kw">library</span>(gapminder)
482
483<span class="kw">ggplot</span>(gapminder, <span class="kw">aes</span>(gdpPercap,
484 lifeExp,
485 <span class="dt">size =</span> pop,
486 <span class="dt">colour =</span> country)) <span class="op">+</span>
487<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>
488<span class="st"> </span><span class="kw">scale_colour_manual</span>(<span class="dt">values =</span> country_colors) <span class="op">+</span>
489<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>
490<span class="st"> </span><span class="kw">scale_x_log10</span>() <span class="op">+</span>
491<span class="st"> </span><span class="kw">facet_wrap</span>(<span class="op">~</span>continent) <span class="op">+</span>
492<span class="st"> </span><span class="co"># Here comes the gganimate specific bits</span>
493<span class="st"> </span><span class="kw">labs</span>(<span class="dt">title =</span> <span class="st">&#39;Year: {frame_time}&#39;</span>,
494 <span class="dt">x =</span> <span class="st">&#39;GDP per capita&#39;</span>,
495 <span class="dt">y =</span> <span class="st">&#39;life expectancy&#39;</span>) <span class="op">+</span>
496<span class="st"> </span><span class="kw">transition_time</span>(year) <span class="op">+</span>
497<span class="st"> </span><span class="kw">ease_aes</span>(<span class="st">&#39;linear&#39;</span>)</code></pre>
498<div class="figure" style="text-align: center"><span id="fig:gganimatefig"></span>
499<img src="skeleton_files/figure-html/gganimatefig-1.gif" alt="WOW THIS IS AN AWESOME GIF!" width="80%" />
500<p class="caption">
501Figure 3.1: WOW THIS IS AN AWESOME GIF!
502</p>
503</div>
504<div class="figure" style="text-align: center"><span id="fig:unnamed-chunk-2"></span>
505<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%" />
506<p class="caption">
507Figure 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!
508</p>
509</div>
510</div>
511<div id="next-steps" class="section level1">
512<h1><span class="header-section-number">4</span> Next Steps</h1>
513<p>There is still <strong>A LOT</strong> of work to do on this package which include (but are note limited to):</p>
514</div>
515<div id="conclusion" class="section level1">
516<h1><span class="header-section-number">5</span> Conclusion</h1>
517<div class="figure" style="text-align: center"><span id="fig:leafletfig"></span>
518<div id="htmlwidget-3a12806d7d1f68b67f74" style="width:672px;height:480px;" class="leaflet html-widget"></div>
519<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>
520<p class="caption">
521Figure 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.
522</p>
523</div>
524</div>
525<div id="references" class="section level1 unnumbered">
526<h1>References</h1>
527<div id="refs" class="references">
528<div id="ref-turnerControlsWaterBalance2014">
529<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>
530</div>
531</div>
532</div>
533</div>
534
535
536
537 </body>
538</html>