-
Notifications
You must be signed in to change notification settings - Fork 1
/
training-resources.html
390 lines (333 loc) · 22.9 KB
/
training-resources.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
<!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>Training, Templates and Tutorials</title>
<script src="site_libs/jquery-1.12.4/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-9.12.0/textmate.css" rel="stylesheet" />
<script src="site_libs/highlightjs-9.12.0/highlight.js"></script>
<script src="site_libs/htmlwidgets-1.3/htmlwidgets.js"></script>
<link href="site_libs/datatables-css-0.0.0/datatables-crosstalk.css" rel="stylesheet" />
<script src="site_libs/datatables-binding-0.5/datatables.js"></script>
<link href="site_libs/dt-core-1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" />
<link href="site_libs/dt-core-1.10.16/css/jquery.dataTables.extra.css" rel="stylesheet" />
<script src="site_libs/dt-core-1.10.16/js/jquery.dataTables.min.js"></script>
<link href="site_libs/crosstalk-1.0.0/css/crosstalk.css" rel="stylesheet" />
<script src="site_libs/crosstalk-1.0.0/js/crosstalk.min.js"></script>
<meta name="description" content="OxShef promotes and supports the use of interactive data visualisations for communicating research datasets and outputs. This is a collaboration between University of Oxford and University of Sheffield, with dedicated support for hosting visualisations for researchers at these universities on a number of different services." />
<link rel="icon" type="image/png" href="images/favicon.png" />
<script type="text/javascript" src="js/rmarkdown.js"></script>
<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) {
hljs.configure({languages: []});
hljs.initHighlightingOnLoad();
if (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="css/rmarkdown.css" type="text/css" />
<link rel="stylesheet" href="css/title-0px.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;
}
.html-widget {
margin-bottom: 20px;
}
button.code-folding-btn:focus {
outline: none;
}
</style>
<div class="container-fluid main-container">
<!-- tabsets -->
<script>
$(document).ready(function () {
window.buildTabsets("TOC");
});
</script>
<!-- code folding -->
<div id="rStudioHeader" class="alwaysShrunk">
<div class="innards bandContent">
<div>
<a class="menuItem" href="index.html">OxShef: dataviz</a>
</div>
<div id="menu">
<div id="menuToggler"></div>
<div id="menuItems">
<a class="menuItem" href="training-resources.html">Training, Templates and Tutorials</a>
<a class="menuItem" href="contact.html">Contact us</a>
<a class="menuItem gitHub" href="https://github.com/OxShef/oxshef"></a>
<a class="menuItem gitHubText" href="https://github.com/OxShef/oxshef">Source on GitHub</a>
</div>
</div>
</div>
</div>
<style type="text/css">
#TOC {
margin-left: 35px;
margin-top: 90px;
}
</style>
<script type="text/javascript">
$(".main-container").removeClass("main-container").removeClass("container-fluid").addClass("footerPushDown");
</script>
<div id="pageContent" class="standardPadding">
<div class="articleBandContent">
<style type="text/css">
.title {
display: none;
}
#disqus_thread {
display: none;
}
</style>
<div class="fluid-row" id="header">
<h1 class="title toc-ignore">Training, Templates and Tutorials</h1>
</div>
<p><link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet"></p>
<div id="training-templates-and-tutorials" class="section level2">
<h2>Training, Templates and Tutorials</h2>
<p><strong>OxShef: dataviz</strong> splits our documentation over multiple websites, this page combines a high-level overview of all the things you need to know from these sites in order to design effective visualisations as part of a reproducible dataviz workflow.</p>
<div class="row">
<div class="col-sm-6">
<center>
<h5>
<a href="https://charts.oxshef.io"><strong>OxShef: Charts</strong></a>
</h5>
</center>
<center>
<i class='fas fa-chart-area fa-2x'></i>
</center>
<p><strong>charts.oxshef.io</strong> provides advice on how to select the most appropriate charts for your data and how to avoid common mistakes when visualising data.</p>
</div>
<div class="col-sm-6">
<center>
<h5>
<a href="https://tools.oxshef.io"><strong>OxShef: Tools</strong></a>
</h5>
</center>
<center>
<i class='fas fa-wrench fa-2x'></i>
</center>
<p><strong>tools.oxshef.io</strong> provides advice on choosing data visualisations tools that <a href="http://oxshef-tools.netlify.com/reproducible-dataviz-workflow.html">support a reproducible dataviz workflow</a></p>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<center>
<h5>
<a href="http://publishers.oxshef.io"><strong>OxShef: Publishers</strong></a>
</h5>
</center>
<center>
<i class='fas fa-file-pdf fa-2x'></i>
</center>
<p><strong>publishers.oxshef.io</strong> provides advice on choosing publishers that support embedding visualisations alongside publications.</p>
</div>
<div class="col-sm-6">
<center>
<h5>
<a href="http://repositories.oxshef.io"><strong>OxShef: Repositories</strong></a>
</h5>
</center>
<center>
<i class='fas fa-database fa-2x'></i>
</center>
<p><strong>repositories.oxshef.io</strong> provides an overview of DOI, ORCIDs and offers support in choosing the most appropriate data repository for your data.</p>
</div>
</div>
<hr>
</div>
<div id="advice-on-charts" class="section level1">
<h1>Advice on charts</h1>
<p><link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet"></p>
<p><strong>OxShef: Charts</strong> provides general advice on choosing the most appropriate visualisation for your data and to avoid making common mistakes or pitfalls in data viz. However, we do not provide interactive tools for matching your data to charts (or vice versa).</p>
<div class="row">
<div class="col-sm-7">
<p>There are many tools (Excel, Google Sheets, Plotly, Tableau) which automatically suggest charts based on the properties of your dataset. This is possible thanks to excellent research into visual perception theory and machine vision from back in the <a href="http://doi.org/10.2307/2288400">1980s</a> through to today.</p>
<p>In fact, some tools like <a href="https://doi.org/10.1145/2047196.2047247">ReVision</a> are even capable of taking existing charts and re-designing them to be more accessible and easy to read by humans. The example here shows a number of badly designed pie charts that have been converted into much easier to understand barcharts.</p>
</div>
<div class="col-sm-5">
<p><img src='images/revision-pie.png'></img></p>
</div>
</div>
<p><strong>OxShef: Charts</strong> maintains a collection of tools and resources to assist you in developing and designing effective visualisations, split into the following three categories:</p>
<!-- There are many excellent tools which can help -->
<!-- **OxShef: Charts** is designed to help you select the most appropriate visualisations for your data, primarily by using the [Financial Times' Visual Vocabulary](http://ft-interactive.github.io/visual-vocabulary/) and roughly dividing dataviz into the following categories; Charts, Geoviz (Maps), Networks and Time Series. Unfortunately, this is not sufficient advice for us to guarantee you select the best (and effectively designed) dataviz. There are a number of third-party resources and tutorials that we split into the following three categories: -->
<div class="row">
<div class="col-sm-4">
<center>
<h5>
Choosing a dataviz
</h5>
</center>
<center>
<i class='fas fa-search fa-2x'></i></i>
</center>
<p>Some charts are more suitable for specific purposes than others. In some cases these resources can automate the chart selection process, or at least help exclude some chart options.</p>
</div>
<div class="col-sm-4">
<center>
<h5>
Designing good dataviz
</h5>
</center>
<center>
<i class='fas fa-eye fa-2x'></i></i>
</center>
<p>There are many best practices for dataviz which radically improve the legibility of a chart, for instance: horizontal barcharts with bars arranged from longest to shortest are significantly easier to interpet than unordered vertical barcharts.</p>
</div>
<div class="col-sm-4">
<center>
<h5>
Adding interactivity
</h5>
</center>
<center>
<i class='fas fa-magic fa-2x'></i></i>
</center>
<p>Sadly, there’s little general advice for effectively adding interactivity to charts. However, two extremely useful rules of thumb are <a href="https://twitter.com/brianboyer/status/784874560009150464">“Make the least interactive thing that works”</a> (<a href="https://twitter.com/brianboyer">@BrianBoyer</a>) and Ben Shneiderman’s mantra <a href="https://doi.org/10.1109/VL.1996.545307">Overview first, zoom and filter, then details-on-demand</a>.</p>
</div>
</div>
<div id="htmlwidget-812493b15564058f17b2" style="width:100%;height:auto;" class="datatables html-widget"></div>
<script type="application/json" data-for="htmlwidget-812493b15564058f17b2">{"x":{"filter":"none","data":[["<a href='https://doi.org/10.1109/VL.1996.545307' target='_blank'><h5>Ben Shneiderman's mantra<\/h5><\/a>","<a href='http://chartmaker.visualisingdata.com/' target='_blank'><h5>Chart Maker (Visualising Data)<\/h5><img src='images/table-of-viz-tutorials-etc/chartmaker-logo.jpg' style='max-height:150px'><\/img><\/a>","<a href='https://eagereyes.org' target='_blank'><h5>Eager Eyes<\/h5><img src='images/table-of-viz-tutorials-etc/eager-eyes-logo.png' style='max-height:150px'><\/img><\/a>","<a href='https://github.com/ft-interactive/chart-doctor/blob/master/visual-vocabulary/Visual-vocabulary.pdf' target='_blank'><h5>Financial Times Visual Vocabulary<\/h5><img src='images/table-of-viz-tutorials-etc/ft-vocabulary-logo.png' style='max-height:150px'><\/img><\/a>","<a href='https://github.com/archietse/malofiej-2016/blob/master/tse-malofiej-2016-slides.pdf' target='_blank'><h5>Why We Are Doing Fewer Interactives <br> Archie Tse<\/h5><\/a>"],["<a href='https://doi.org/10.1109/VL.1996.545307' target='_blank'>Ben Shneiderman's mantra<\/a> is one of the few general purpose pieces of advice for adding interactivity to dataviz:\r\n<br>\r\n<blockquote>Overview first, zoom and filter, then details-on-demand<\/blockquote>","Andy Kirk designed and maintains the Chart Maker as a tool for selecting data visualisation tools based on specific charts. Andy has put a lot of effort into designing minimal explanations of each chart, this is a great reference tool when selecting both charts and dataviz tools.","Eager Eyes provides long-form articles and investigations into a wide variety of data visualisation topics and best practices. This website is not only useful for designing good dataviz, but also in choosing which chart to use in the first place.","The Financial Times has invested significantly in their data visualisation toolkit, part of which is a \"visual vocabulary\" that they use to help automatically choose the most appropriate dataviz for each dataset. In the future the FT are planning on open sourcing their tools based on this visual vocabularly, for the time being this remains a useful cheat sheet.","Archie Tse from the New York Times spoke at the 26th Infographics World Summit in 2016 about how their team has reduced the number of interactives they've developed in response to user testing. Archie's overall advice can be summed up as \"if anything other than scrolling is required, make something spectacular happen\"."],["Research paper","Interactive tool for comparing different charts","Robert Kosara’s website and blog dedicated to long-form articles on data viz.","Poster presenting the Financial Times' taxonomy of dataviz types.","Conference presentation"],["<i class='fa fa-magic fa-2x'><\/i>","<i class='fa fa-search fa-2x'><\/i>","<i class='fa fa-eye fa-2x'><\/i>","<i class='fa fa-search fa-2x'><\/i>","<i class='fa fa-magic fa-2x'><\/i>"]],"container":"<table class=\"display\">\n <thead>\n <tr>\n <th>Resources<\/th>\n <th>Description<\/th>\n <th>Resource description<\/th>\n <th>Type of Advice<\/th>\n <\/tr>\n <\/thead>\n<\/table>","options":{"scrollX":true,"autoWidth":true,"columnDefs":[{"width":"150px","targets":0},{"width":"550px","targets":1},{"width":"100px","targets":3},{"className":"dt-center","targets":[0,3]}],"dom":"t","order":[],"orderClasses":false}},"evals":[],"jsHooks":[]}</script>
<hr>
</div>
<div id="advice-on-dataviz-tool-selection" class="section level1">
<h1>Advice on dataviz tool selection</h1>
<p><strong>OxShef: Tools</strong> cannot be a complete overview of all visualisation tools available, nor can we maintain a complete overview of training and templates available for the dataviz tools that meet our <a href="https://oxshef-tools.netlify.com/reproducible-dataviz-workflow.html">reproducible dataviz workflow criteria</a>. However, you might find these resources generally useful:</p>
<ul>
<li><p><a href="https://github.com/sindresorhus/awesome">Awesome Lists (Data Viz)</a>: This is a crowd sourced collection of resources about data visualisation tools, tutorials and other resources. It’s maintained via GitHub, so anyone can contribute.</p></li>
<li><p><a href="https://Lynda.com">Lynda.com</a>: Subscription learning service with courses on a wide variety of dataviz tools, many Universities provide access to Lynda.com for free. Contact your local research support teams for support.</p></li>
<li><p><a href="https://datacamp.com">Datacamp.com</a>: Subscription learning service with courses on a variety of dataviz tools.</p></li>
</ul>
<p>Materials specific to dataviz tools that meet our <a href="https://oxshef-tools.netlify.com/reproducible-dataviz-workflow.html">reproducible dataviz workflow criteria</a>.</p>
<div id="section" class="section level2 tabset">
<h2></h2>
<div id="dash" class="section level3">
<h3>Dash</h3>
<p><a href="https://plot.ly/products/dash/">Dash</a> is a technology developed by <a href="http://plot.ly">plot.ly</a> that allows Python users to create rich, interactive data visualisations and interfaces - commonly abbreviated to “data dashboards”. This is a fairly new technology (first released June 2017) that does not have much coverage outside of the first-party resources on the plot.ly website.</p>
<p><strong>OxShef: dataviz</strong> are currently drafting a dedicated site with training, tutorials and templates for Dash dashboards. In the meantime, we recommend you check out the <a href="https://medium.com/@plotlygraphs/introducing-dash-5ecf7191b503">blog annoucement</a> and Chris’ <a href="https://youtu.be/sea2K4AuPOk">conference presentation at SciPy 2017</a>.</p>
</div>
<div id="jupyter" class="section level3">
<h3>Jupyter</h3>
<p><a href="jupyter.org">Jupyter</a> notebooks are the successor to iPython notebooks, a <em>literate programming</em> technology that allows text, code, charts and interactive content to be combined together into a single document. Jupyter allows code from multiple languages to be combined in the same document, the easiest to use languaes are <strong>Julia</strong>, <strong>Python</strong> and <strong>R</strong>. Using a combination of these technologies it is possible to build rich, interactive data visualisations. With some additional effort it is possible to host Jupyter notebooks in such a fashion that enables a <a href="https://tools.oxshef.io/reproducible-dataviz-workflow.html">reproducible dataviz workflow</a>.</p>
<p><strong>OxShef: dataviz</strong> are currently drafting a dedicated site with training, tutorials and templates for using Jupyter in a reproducible dataviz workfow. In the meantime, you might find this <a href="https://www.datacamp.com/community/tutorials/tutorial-jupyter-notebook">Datacamp.com free tutorial</a> useful and there is also a Lynda.com course that introduces the basics of Jupyter notebooks</p>
<iframe width="560" height="315" src="https://www.lynda.com/player/embed/543336?fs=3&w=560&h=315&ps=paused&utm_medium=referral&utm_source=embed+video&utm_campaign=ldc-website&utm_content=vid-543336" mozallowfullscreen="true" webkitallowfullscreen="true" allowfullscreen="true" frameborder="0">
</iframe>
<div style="margin-bottom:10px">
<strong><a href="https://www.lynda.com/NumPy-tutorials/NumPy-Data-Science-Essential-Training/508873-2.html" title="Learn how to use NumPy, Python, and Jupyter Notebook for numerical, scientific, and statistical programming as you build your analytics, machine learning, and data science skills.">NumPy Data Science Essential Training</a></strong> by <a href="https://www.lynda.com/author/1705401">Charles Kelly</a>
</div>
</div>
<div id="shiny" class="section level3">
<h3>Shiny</h3>
<p><a href="shiny.rstudio.com">Shiny</a> is an <code>R</code> library developed by RStudio that allows R users to create interactive web applications without having to learn HTML, CSS or JavaScript. <a href="https://oxshef-shiny.netlify.com"><strong>OxShef: Shiny</strong></a> provides a host of training, tutorials and templates for creating Shiny apps within the context of a fully <a href="https://oxshef-tools.netlify.com/reproducible-dataviz-workflow.html">reproducible dataviz workflow</a>.</p>
<p>There are many excellent resources for learning more (and keeping up to date with) Shiny:</p>
<ul>
<li><a href="https://github.com/grabear/awesome-rshiny">Awesome Shiny Resources</a>: This is a crowd sourced collection of resources for Shiny users.</li>
<li><a href="https://www.datacamp.com/courses/building-web-applications-in-r-with-shiny">Datacamp.com Shiny Course</a>: This is a free entirely-in-browser introduction to Shiny that is highly recommended to complete beginners to Shiny.</li>
<li><a href="shiny.rstudio.com/gallery/">RStudio’s Shiny Gallery</a>: This is an excellent showcase of examples and template Shiny apps, along with in-depth technical documentation on how the internals of Shiny works.</li>
</ul>
<p>There is also a Lynda.com course dedicated to creating Shiny apps and interactive presentations with RMarkdown.</p>
<iframe width="560" height="315" src="https://www.lynda.com/player/embed/490016?fs=3&w=560&h=315&ps=paused&utm_medium=referral&utm_source=embed+video&utm_campaign=ldc-website&utm_content=vid-490016" mozallowfullscreen="true" webkitallowfullscreen="true" allowfullscreen="true" frameborder="0">
</iframe>
<div style="margin-bottom:10px">
<strong><a href="https://www.lynda.com/RStudio-tutorials/Creating-Interactive-Presentations-Shiny-R/452087-2.html" title="Make the results of big data analysis more compelling and clear. Learn how to create interactive presentations and dashboards with RStudio and Shiny.">Creating Interactive Presentations with Shiny and R</a></strong> by <a href="https://www.lynda.com/author/4174500">Martin Hadley</a>
</div>
<hr>
</div>
</div>
</div>
<div id="reproducability-and-working-with-publishers" class="section level1">
<h1>Reproducability and working with publishers</h1>
<p><strong>OxShef: Publishers</strong> provides resources to assist researchers in finding publishers who support or else collaborate in the embedding of data visualisations alongside publications, and what constitutes a <a href="https://publishers.oxshef.io/reproducible-dataviz-workflow.html">reproducible dataviz workflow</a>.</p>
<p>There are two extremely important technologies you should know about to work reproducibly:</p>
<ul>
<li><p>DOI: Digital Object Identifiers (DOI) allow research outputs to be uniquely and efficiently cited, all genuine academic journals and <a href="data-repositories-list.html">data repositories</a> issue DOI so that publications and datasets may be cited separately. DOI always have the format <code>10.xxxx/xx.x</code> and these can be converted into links that resolve to the research output as follows: <a href="">doi.org/10.xxxx/x.x</a>.</p></li>
<li><p>ORCID: Open Researcher and Contributor ID (ORCID) is a unique identifer for researchers, academics, journalists and anyone who wants to reproducibly claim ownership of their publications. ORCID is tightly integrated into the academic publishing industry, provided your ORCID is included in your article submissions an automatically generated publication profile will be crearted for you (<a href="https://orcid.org/0000-0002-4036-4269">an example ORCID profile</a>). ORCID are formatted as XXXX-XXXX-XXXX-XXXX and can be converted into links that resolve to the person you’re looking for as follows: <a href="orcid.org/XXXX-XXXX-XXXX-XXXX" class="uri">orcid.org/XXXX-XXXX-XXXX-XXXX</a>. Please note that many institutions support authenticating your position via your ORCID, consider searching for <code><institution name> ORCID integration</code>.</p></li>
</ul>
<p><strong>OxShef: Publishers</strong> doesn’t provide any further training or tutorials in this area as including DOI and ORCID in all your research outputs should be sufficient to support a fully <a href="http://oxshef-publishers.netlify.com/reproducible-dataviz-workflow.html">reproducible dataviz workflow</a>. However, you might find it useful to refer to our pages documenting <a href="http://oxshef-publishers.netlify.com/publishers-list.html">how to collaborate with publishers on dataviz</a></p>
</div>
</div> <!-- articleBandContent -->
</div> <!-- pageContent -->
<div id="rStudioFooter" class="band full">
<div class="bandContent">
<h4><a href="oxshef.io" target="_blank" style="color:#fff;font-weight:bold">OxShef</a></h4>
<div id="logos">
<!--<a href="https://twitter.com/rstudio" class="footerLogo twitter"></a>!-->
<a href="https://github.com/OxShef/oxshef_rmd_template" class="footerLogo gitHub"></a>
<!--<a href="https://www.linkedin.com/company/rstudio-inc" class="footerLogo linkedIn"></a>
<a href="https://www.facebook.com/pages/RStudio-Inc/267733656584415" Class="footerLogo facebook"></a>-->
</div>
</div>
</div>
<!-- bizible -->
<script type="text/javascript" src="//cdn.bizible.com/scripts/bizible.js" async=""></script>
</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>
</body>
</html>