forked from bearloga/wmf-allhands18
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
593 lines (547 loc) · 59.8 KB
/
index.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
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
<!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="progressive" content="false" />
<meta name="allow-skip" content="false" />
<title>Plotting the Course Through Charted Waters</title>
<!-- highlightjs -->
<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>
</head>
<body>
<div class="pageContent band">
<div class="bandContent page">
<div class="topics">
<div id="section-introduction" class="section level2">
<h2>Introduction</h2>
<p>Heat maps, stacked area plots, mosaic plots, choropleths – oh my! There are so many different ways to visually convey relationships and patterns in data! In this workshop on data visualization literacy, you’ll learn to recognize many popular types of charts and how to glean insights from them. The <strong>Appendix</strong> contains some examples of data visualization as visual essays and it also includes links to resources for learning how to create your own.</p>
<p>This workshop is <a href="https://github.com/bearloga/wmf-allhands18">available as open source</a>. There is an <a href="http://dataviz-literacy.wmflabs.org/">interactive version</a> (which should automatically send you to either <a href="http://dataviz-lit-01.wmflabs.org/">mirror 1</a>, <a href="http://dataviz-lit-02.wmflabs.org/">mirror 2</a>, or <a href="http://dataviz-lit-03.wmflabs.org/">mirror 3</a>) and a <a href="https://bearloga.github.io/wmf-allhands18/">static version</a>.</p>
<table>
<thead>
<tr class="header">
<th align="right"></th>
<th align="left">Contact Information</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td align="right"><strong>Work</strong></td>
<td align="left">mikhail at wikimedia dot org</td>
</tr>
<tr class="even">
<td align="right"><strong>Personal</strong></td>
<td align="left">mikhail at mpopov dot com</td>
</tr>
<tr class="odd">
<td align="right"><strong>IRC</strong></td>
<td align="left">bearloga in #wikimedia-discovery, etc.</td>
</tr>
<tr class="even">
<td align="right"><strong>Twitter</strong></td>
<td align="left"><a href="https://twitter.com/bearloga">bearloga</a></td>
</tr>
</tbody>
</table>
<!-- Piwik -->
<script type="text/javascript">
var _paq = _paq || [];
_paq.push(["setDomains", ["*.dataviz-literacy.wmflabs.org"]]);
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="//piwik.wikimedia.org/";
_paq.push(['setTrackerUrl', u+'piwik.php']);
_paq.push(['setSiteId', '15']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
})();
</script>
<noscript>
<p>
<img src="//piwik.wikimedia.org/piwik.php?idsite=15" style="border:0;" alt="" />
</p>
</noscript>
<!-- End Piwik Code -->
</div>
<div id="section-terms-and-basics" class="section level2">
<h2>Terms and basics</h2>
<div id="section-data-visualization-as-storytelling" class="section level3">
<h3>Data visualization as storytelling</h3>
<p>Graphical displays should:</p>
<ul>
<li>Show the data</li>
<li>Induce the viewer to think about the substance rather than graphic design or format</li>
<li>Avoid distorting the data</li>
<li>Present many numbers in a small space</li>
<li>Make large data sets coherent</li>
<li>Encourage the eye to compare different pieces of data</li>
</ul>
<p>– Edward R. Tufte, <em>The Visual Display of Quantitative Information</em></p>
</div>
<div id="section-types-of-variables" class="section level3">
<h3>Types of variables</h3>
<ul>
<li><a href="https://en.wikipedia.org/wiki/Likert_scale"><em>Quantitative</em> variables</a> have a numeric value and/or an ordering
<ul>
<li><em>Continuous</em> variables have an infinite range of possible values
<ul>
<li><strong>Examples</strong>: time, age, weight, lengths (height, distance, time spent online), drug dosage</li>
</ul></li>
<li>Quantitative variables that have limited possible values are <em>discrete</em>
<ul>
<li><strong>Examples</strong>: population size, number of times an event occurred, pageviews, number of questions a student got correct on a test</li>
</ul></li>
<li>Continuous variables are sometimes discretized by rounding if precision is not necessary</li>
</ul></li>
<li><a href="https://en.wikipedia.org/wiki/Categorical_variable"><em>Categorical</em></a> / <em>discrete</em> / <em>qualitative</em> variables have a limited number of possible values:
<ul>
<li><em>Nominal</em> variables have two or more categories that do not have an intrinsic order
<ul>
<li><strong>Examples</strong>: gender, ethnicity, controls vs test group, operating system</li>
</ul></li>
<li><em>Ordinal</em> variables are like nominal, but the categories have an ordering/ranking such as the <a href="https://en.wikipedia.org/wiki/Likert_scale">Likert rating scale</a></li>
<li>Categorical variables can also be created from quantitative variables
<ul>
<li><strong>Example</strong>: survey takers are often combined into age groups such as “18-24”</li>
</ul></li>
</ul></li>
</ul>
<p>Refer to <a href="https://en.wikipedia.org/wiki/Level_of_measurement">levels of measurement</a> for more information.</p>
</div>
<div id="section-things-to-look-for" class="section level3">
<h3>Things to look for</h3>
<ul>
<li>Title (most plots should have this)</li>
<li>Axis labels (almost all plots should have this)</li>
<li>How many variables and their types
<ul>
<li>Including ones used to dictate colors, shapes, patterns, sizes, opacities, etc.</li>
<li>Independent (“<em>predictor</em>”) variables (e.g. time) are usually on the X (horizontal) axis
<ul>
<li>Occasionally time is plotted on the vertical axis for specific reasons</li>
</ul></li>
<li>Dependent (“<em>outcome</em>” / “<em>response</em>”) variables are usually on the Y (vertical) axis</li>
</ul></li>
<li>Scales (especially log-transformed ones)</li>
</ul>
</div>
</div>
<div id="section-common-visualizations" class="section level2">
<h2>Common visualizations</h2>
<div id="section-pies-waffles-bars-and-tables" class="section level3">
<h3>Pies, Waffles, Bars, and Tables</h3>
<p>A <a href="https://en.wikipedia.org/wiki/Pie_chart">pie chart</a> and a <a href="https://en.wikipedia.org/wiki/Bar_chart">bar chart</a> (sometimes called a <em>bar plot</em>) are an easy way to visually compare values. The pie chart – where the slices represent proportions of the whole – is excellent for 2-4 categories, the table is great for 1-8 categories, and the bars’ heights work well for comparing more than 5 categories.</p>
<img src="index_files/figure-html4/pie_chart-1.png" width="624" />
<div class="figure">
<img src="index_files/figure-html4/bar_chart-1.png" alt="Notice how the use of color allows us to compare survivorship within classes." width="624" />
<p class="caption">
Notice how the use of color allows us to compare survivorship within classes.
</p>
</div>
<table>
<thead>
<tr class="header">
<th align="left">Class</th>
<th align="right">Did not survive</th>
<th align="right">Survived</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td align="left">1st</td>
<td align="right">122</td>
<td align="right">203</td>
</tr>
<tr class="even">
<td align="left">2nd</td>
<td align="right">167</td>
<td align="right">118</td>
</tr>
<tr class="odd">
<td align="left">3rd</td>
<td align="right">528</td>
<td align="right">178</td>
</tr>
<tr class="even">
<td align="left">Crew</td>
<td align="right">673</td>
<td align="right">212</td>
</tr>
</tbody>
</table>
<p>In the past decade, a semi-alternative to the pie chart called <em>waffle charts</em> (or “square pie charts”) has gained popularity at representing relative sizes between groups. (See <a href="https://eagereyes.org/techniques/square-pie-charts">Women in IT – Squaring the Pie?</a>.) <strong>Semi-alternative</strong> becauses waffles compare <strong>totals</strong> and pie charts compare <strong>percentages</strong>. As such, waffle charts are good for comparing relative sizes, but not at comparing relative %s.</p>
<p>Each square represents a certain number of units, which I think makes it easier to visually compare sizes of groups. For example, it is easier to compare 11 squares (2nd class passengers who survived) to 20 squares (1st class passengers who survived) than 1 pie slice to another pie slice that is 1.8 times bigger:</p>
<p><img src="index_files/figure-html4/waffle-1.png" width="624" /></p>
</div>
<div id="section-histograms-and-densities" class="section level3">
<h3>Histograms and Densities</h3>
<p>A <a href="https://en.wikipedia.org/wiki/Histogram">histogram</a> shows the distribution of a continuous variable by splitting it into bins and counting how many observations fall into each bin (left). Sometimes those counts are divided by the total number of observations to yield proportions/probabilities instead (right). <strong>Note</strong> that the histogram on the right also includes a <a href="https://en.wikipedia.org/wiki/Density_estimation">probability density estimate</a>.</p>
<p><img src="index_files/figure-html4/histograms-1.png" width="624" /></p>
<p>An important factor to watch out for is the bin size, which – ideally – was carefully chosen by the creator of the visualization. Bins that are too wide will cause the distribution to appear wide, while bins that are too narrow will make the distribution appear to noisy:</p>
<div class="figure">
<img src="index_files/figure-html4/bin_sizes-1.png" alt="The three little histo-bears." width="624" />
<p class="caption">
The three little histo-bears.
</p>
</div>
<p>For a deeper look at histograms, I encourage you to check out <a href="https://tinlizzie.org/histograms/">Exploring Histograms</a> by Aran Lunzer and Amelia McNamara.</p>
</div>
<div id="section-comparing-distributions" class="section level3">
<h3>Comparing Distributions</h3>
<p>When you see one of these, they are used for comparing distributions of a continuous variable (such as sepal length of Iris flowers) between different groups (such as different species):</p>
<p><img src="index_files/figure-html4/comparing_distributions-1.png" width="624" /></p>
<p>The <a href="https://en.wikipedia.org/wiki/Kernel_density_estimation">density plot</a> on the left is like a smooth histogram that doesn’t discretize the variable into bins. The <a href="https://en.wikipedia.org/wiki/Violin_plot">violin plot</a> on the left is a rotated version that makes it easier to perform the comparison because the densities (distributions) are not overlapping.</p>
<p>An alternative called <em>ridgeline plot</em> recently gained a lot of popularity for comparing distributions across groups because of how compact it was, which was especially useful when comparing many groups.</p>
<div class="figure">
<img src="index_files/figure-html4/ridgeline.png" alt="Ridgeline plot of sepal length." />
<p class="caption">Ridgeline plot of sepal length.</p>
</div>
<p>A <a href="https://en.wikipedia.org/wiki/Box_plot">box-and-whiskers chart</a> (also known as a <em>box plot</em>) allows you to visually compare the distributions by way of a <a href="https://en.wikipedia.org/wiki/Five-number_summary">five number summary</a> which includes:</p>
<ul>
<li>Sample minimum (the smallest value)</li>
<li>First <a href="https://en.wikipedia.org/wiki/Quartile">quartile</a> (<em>Q<sub>1</sub></em>) which is the 25th percentile</li>
<li>Second quartile (<em>Q<sub>2</sub></em>) also known as the <a href="https://en.wikipedia.org/wiki/Median"><em>median</em></a></li>
<li>Third quartile (<em>Q<sub>3</sub></em>) which is the 75th percentile</li>
<li>Sample maximum (the largest value)</li>
</ul>
<p><img src="index_files/figure-html4/boxplot-1.png" width="624" /></p>
<p>My personal preference is when a violin plot and a box plot are combined so you still see the distribution in case there are multiple peaks (<a href="https://en.wikipedia.org/wiki/Mode_(statistics)"><em>modes</em></a> – something you can’t see with just a box-and-whiskers plot – but you also see the summaries:</p>
<div class="figure">
<img src="index_files/figure-html4/violin_box_combined-1.png" alt="Notice how the box plot hides the three modes." width="624" />
<p class="caption">
Notice how the box plot hides the three modes.
</p>
</div>
</div>
<div id="section-multiple-variables" class="section level3">
<h3>Multiple variables</h3>
<p><a href="https://en.wikipedia.org/wiki/Scatter_plot">Scatter plots</a> are the most popular and simplest way to investigate relationships between quantitative variables. You have one variable on the X axis and one variable on the Y axis. Each point represents a single unit from your dataset (e.g. a subject of an experiment):</p>
<div class="figure">
<img src="index_files/figure-html4/scatterplot-1.png" alt="Shape and color of the points are determined by the species. Shapes are often used together with color to make the graphic better for colorblindness and grayscale printing." width="624" />
<p class="caption">
Shape and color of the points are determined by the species. Shapes are often used together with color to make the graphic better for colorblindness and grayscale printing.
</p>
</div>
<p>Data scientists and analysts often use <em>scatterplot matrices</em> to look at many different relationships between pairs of variables simultaneously:</p>
<div class="figure">
<img src="index_files/figure-html4/scatterplot_matrices-1.png" alt="These are usually not present in final drafts of reports and are instead used as tools during the exploratory data analysis step." width="624" />
<p class="caption">
These are usually not present in final drafts of reports and are instead used as tools during the exploratory data analysis step.
</p>
</div>
<p>At first glance there is <strong>a lot</strong> going on in that particular matrix, but really there are three main components that we can focus on just one at a time:</p>
<ol style="list-style-type: decimal">
<li>the four panels along the <em>diagonal</em> have histograms of the individual variables,</li>
<li>the six panels in the <em>upper triangle</em> above the diagonal have basic scatter plots with points colored according to species for each pair of variables, and</li>
<li>the six panels in the <em>lower triangle</em> below the diagonal are also scatterplots, but with ellipses tracing the two-dimensional densities (assuming <a href="https://en.wikipedia.org/wiki/Multivariate_normal_distribution">Normality</a>).</li>
</ol>
<p><a href="https://en.wikipedia.org/wiki/Line_chart">Line charts</a> are the most common way to visualize <a href="https://en.wikipedia.org/wiki/Time_series">time series</a> data, with time <strong>usually</strong> as the horizontal X axis and range of a quantitative variable as the vertical Y axis:</p>
<div class="figure">
<img src="index_files/figure-html4/tsplot-1.png" alt="You may notice that the linear scale and the difference in magnitude makes it difficult to notice patterns for French Wikipedia. Perhaps this chart can be improved later in the workshop?" width="624" />
<p class="caption">
You may notice that the linear scale and the difference in magnitude makes it difficult to notice patterns for French Wikipedia. Perhaps this chart can be improved later in the workshop?
</p>
</div>
</div>
</div>
<div id="section-other-visualizations" class="section level2">
<h2>Other visualizations</h2>
<div id="section-mosaic-plots" class="section level3">
<h3>Mosaic plots</h3>
<p><a href="https://en.wikipedia.org/wiki/Mosaic_plot">Mosaic plots</a> are used to visualize the relationships between two or more qualitative variables, and they are incredibly rare. While they are very useful once you learn how to read them, that step can be very difficult and so it is unsurprising that they don’t show up more. They’re often used by statisticians during exploratory data analysis to perform a visual check before performing a statistical test of independence.</p>
<p>We will use these to examine distribution of hair and eye colors in ~600 statistics students at University of Delaware reported by Snee, R. D. in <em>The American Statistician</em> journal in 1974:</p>
<p><img src="index_files/figure-html4/mosaic1-1.png" width="624" /></p>
<p>We can extend a mosaic plot to include <em>standardized residuals</em> (also called <a href="https://en.wikipedia.org/wiki/Studentized_residual"><em>studentized residuals</em></a>) from a <a href="https://en.wikipedia.org/wiki/Log-linear_model">log-linear model</a>. Cells representing <span style="color:red;font-weight:bold;">negative residuals</span> – meaning there are <span style="color:red;font-weight:bold;">fewer observations than would have been expected under independence</span> – are drawn as <span style="color:red;font-weight:bold;">red</span> with broken borders; <span style="color:blue;font-weight:bold;">positive residuals</span> – meaning <span style="color:blue;font-weight:bold;">more observations than would be expected</span> – are drawn in <span style="color:blue;font-weight:bold;">blue</span> with solid borders.</p>
<p><img src="index_files/figure-html4/mosaic2-1.png" width="624" /></p>
<p>We can also look at the proportions across all three variables:</p>
<p><img src="index_files/figure-html4/mosaic3-1.png" width="624" /></p>
<p>What the third mosaic plot tells us:</p>
<ul>
<li>Blond was the most prevalent hair color among those with blue eyes.</li>
<li>More brown-haired men had blue eyes than brown-haired women.</li>
<li>More blond-haired women had blue eyes than blonde-haired men.</li>
</ul>
</div>
<div id="section-stacked-area-plots" class="section level3">
<h3>Stacked area plots</h3>
<p>A <em>stacked area plot</em> is a way to visualize changes in amounts (or proportions) over time.</p>
<div class="figure">
<img src="index_files/figure-html4/stacked_area-1.png" alt="Beginning with 1925, the number of people over the age of 64 has increased dramatically, especially after 1975." width="624" />
<p class="caption">
Beginning with 1925, the number of people over the age of 64 has increased dramatically, especially after 1975.
</p>
</div>
</div>
<div id="section-heat-maps" class="section level3">
<h3>Heat maps</h3>
<p><a href="https://en.wikipedia.org/wiki/Heat_map">Heatmaps</a> are a graphical representation of matrices. For example, we can visualize a dataset of top 50 NBA players’ performance statistics from <a href="(https://en.wikipedia.org/wiki/2008%E2%80%9309_NBA_season)">the 2008-09 season</a> (obtained from <a href="https://www.rotowire.com/">RotoWire</a>, formerly databaseBasketball):</p>
<p><img src="index_files/figure-html4/heatmap-1.png" width="624" /></p>
<p>Some observations:</p>
<ul>
<li><a href="https://en.wikipedia.org/wiki/Dwight_Howard">Dwight Howard</a> was the best at blocking shots</li>
<li>Dwight Howard was also one of the worst at making free throws</li>
<li><a href="https://en.wikipedia.org/wiki/Yao_Ming">Yao Ming</a> was the best at making three-pointers (by % successful out of total attempts)</li>
</ul>
<p><img src="index_files/figure-html4/corr_map-1.png" width="624" /></p>
<p>Some observations:</p>
<ul>
<li><strong>Negative correlations</strong> (in <span style="font-weight:bold;color:#CA0020;">red</span>):
<ul>
<li>Players who made a higher percentage of field goals (“Fldgl.”) stayed away from trying to make three-point shots (“Thr-pa” is “Three-point attempts”).</li>
</ul></li>
<li><strong>Positive correlations</strong> (in <span style="font-weight:bold;color:#404040;">grey</span>):
<ul>
<li>Players who attempted/made more field goals (“Fldgla”/“Fldglm”) also scored more points.</li>
</ul></li>
</ul>
</div>
<div id="section-tree-maps" class="section level3">
<h3>Tree maps</h3>
<p><a href="https://en.wikipedia.org/wiki/Treemapping">Treemapping</a> is a way to visualize hierarchical (nested) data as rectangles within other rectangles, with the area of the rectangle representing the proportion and sometimes a shade or color representing another variable. It is not dissimilar to a mosaic plot!</p>
<div class="figure">
<img src="index_files/figure-html4/treemap-1.png" alt="Almost all of the crew was male and almost 80% of them died. Most of the 3rd class passengers did not make it either, while more than 85% of women in 1st and 2nd classes survived." width="624" />
<p class="caption">
Almost all of the crew was male and almost 80% of them died. Most of the 3rd class passengers did not make it either, while more than 85% of women in 1st and 2nd classes survived.
</p>
</div>
</div>
<div id="section-choropleths" class="section level3">
<h3>Choropleths</h3>
<p><a href="https://en.wikipedia.org/wiki/Choropleth_map">Choropleths</a> are geographical maps that are colored and/or shaded according to some variable such as population density.</p>
<p><img src="index_files/figure-html4/choropleth-1.png" width="624" /></p>
</div>
<div id="section-networks-and-graphs" class="section level3">
<h3>Networks and graphs</h3>
<p><a href="https://en.wikipedia.org/wiki/Graph_drawing">Network diagrams</a> are for visualizing <a href="https://en.wikipedia.org/wiki/Graph_(discrete_mathematics)">graphs</a> (from <a href="https://en.wikipedia.org/wiki/Graph_theory">graph theory</a>) and networks (from <a href="https://en.wikipedia.org/wiki/Network_theory">network theory</a>) where there are <a href="https://en.wikipedia.org/wiki/Node_(computer_science)"><em>nodes</em></a> (<a href="https://en.wikipedia.org/wiki/Vertex_(graph_theory)"><em>vertices</em></a>) connected by <em>links</em> (<a href="https://en.wikipedia.org/wiki/Edge_(graph_theory)"><em>edges</em></a>). Their goal is to visually represent relationships between units. For example, using <a href="https://meta.wikimedia.org/wiki/Research:Wikipedia_clickstream">the Wikipedia Clickstream data</a> from November 2017 we can start at the article on net neutrality and visualize a <em>neighborhood</em> of articles that are <em>adjacent</em> to the central one:</p>
<p><a title="By MPopov (WMF) (Own work) [CC BY-SA 4.0 (https://creativecommons.org/licenses/by-sa/4.0)], via Wikimedia Commons" href="https://commons.wikimedia.org/wiki/File%3ANet_neutrality_clickstream_(Nov_2017).png"><img width="512" alt="Net neutrality clickstream (Nov 2017)" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/Net_neutrality_clickstream_%28Nov_2017%29.png/512px-Net_neutrality_clickstream_%28Nov_2017%29.png"/></a></p>
<p>The darkness of the edges connecting the vertices represents how many clicks there were between the pairs of articles. We can see that there are more clicks between “net neutrality” and “digital rights” than between “net neutrality” and “human rights”, but way more clicks between “net neutrality” and “Wikipedia Zero”.</p>
</div>
</div>
<div id="section-scales-and-transformed-data" class="section level2">
<h2>Scales and transformed data</h2>
<p>Sometimes the author of the visualization has chosen to apply a <a href="https://en.wikipedia.org/wiki/Data_transformation_(statistics)">transformation to the data</a> because the data is <a href="https://en.wikipedia.org/wiki/Skewness">skewed</a>. It is important to watch out for these, especially <a href="https://en.wikipedia.org/wiki/Logarithmic_scale">logarithmic scales</a>.</p>
<p><img src="index_files/figure-html4/transformed_scatterplot-1.png" width="624" height="624" /></p>
<p>Let us revisit the pageviews data from earlier by utilizing a logarithmic axis:</p>
<div class="figure">
<img src="index_files/figure-html4/tsplot_log10-1.png" alt="Notice how the French Wikipedia pageviews are no longer dampened by English Wikipedia pageviews' magnitude." width="624" />
<p class="caption">
Notice how the French Wikipedia pageviews are no longer dampened by English Wikipedia pageviews’ magnitude.
</p>
</div>
<p>It is possible (but rare) to encounter logarithmically scaled time axes, which are helpful when you have long tails caused by outliers:</p>
<p><img src="index_files/figure-html4/transformed_histogram-1.png" width="624" /></p>
</div>
<div id="section-group-activity" class="section level2">
<h2>Group activity</h2>
<p>Pair up with someone sitting next to you and pick one of the following 3 visualizations. You and your partner(s) should agree on the same one.</p>
<ol style="list-style-type: decimal">
<li><strong>This part is done individually</strong> (3 minutes)
<ul>
<li>Note 2-3 interesting observations.</li>
<li><strong>Reminder:</strong>
<ul>
<li>Once you’ve identified the variables involved, you are looking for relationships between them.</li>
<li>You’re also looking for patterns and outliers.</li>
</ul></li>
</ul></li>
<li><strong>This part is done with your partner(s)</strong> (2-3 minutes)
<ul>
<li>Share your insights with your partner(s).</li>
<li>Check if they agree with your observations.</li>
<li>If they didn’t notice the same things as you, explain how you arrived at your interpretation of the chart.</li>
</ul></li>
</ol>
<p>A different take on the Titanic data:</p>
<p><img src="index_files/figure-html4/plot1-1.png" width="624" /></p>
<p>A different take on the violent crime rates data:</p>
<p><img src="index_files/figure-html4/plot2-1.png" width="624" /></p>
<p>A different take on the Wikipedia pageviews data:</p>
<p><img src="index_files/figure-html4/plot3-1.png" width="624" /></p>
</div>
<div id="section-assessment" class="section level2">
<h2>Assessment</h2>
<p>Some questions to verify that you understand the core concepts in data visualization:</p>
<div class="panel panel-default">
<div class="panel-heading tutorial-panel-heading">Quiz</div>
<table class="table quiz-table">
<tr>
<td>
<div id="htmlwidget-c8443784442e84902141" style="width:100%;height:auto;", class = "quiz html-widget">
<div class="panel panel-default">
<div class="panel-body quizArea">
</div>
</div>
</div>
<script type="application/json" data-for="htmlwidget-c8443784442e84902141">{"x":{"question":"Which of these are examples of a discrete quantitative variable?","answers":[{"option":"Time spent reading a Wikipedia article","correct":false,"message":null},{"option":"Number of articles edited by user","correct":true,"message":null},{"option":"User session ID","correct":false,"message":null},{"option":"Percent change in monthly pageviews from previous month","correct":false,"message":null},{"option":"Total pageviews last month","correct":true,"message":null}],"label":"quiz-1","skipStartButton":true,"perQuestionResponseAnswers":true,"perQuestionResponseMessaging":true,"preventUnanswered":true,"displayQuestionCount":false,"displayQuestionNumber":false,"disableRanking":true,"nextQuestionText":"","checkAnswerText":"Submit Answer","allowRetry":false,"randomSortAnswers":true,"json":{"info":{"name":"","main":""},"questions":[{"q":"Which of these are examples of a discrete quantitative variable?","a":[{"option":"Time spent reading a Wikipedia article","correct":false,"message":null},{"option":"Number of articles edited by user","correct":true,"message":null},{"option":"User session ID","correct":false,"message":null},{"option":"Percent change in monthly pageviews from previous month","correct":false,"message":null},{"option":"Total pageviews last month","correct":true,"message":null}],"correct":"Correct!","incorrect":"Time spent and % change are continuous and user session ID is a qualitative variable.","force_checkbox":true}]}},"evals":[],"jsHooks":[]}</script>
</td>
</tr>
<tr>
<td>
<div id="htmlwidget-b7f619c3f2d14ea6f4f4" style="width:100%;height:auto;", class = "quiz html-widget">
<div class="panel panel-default">
<div class="panel-body quizArea">
</div>
</div>
</div>
<script type="application/json" data-for="htmlwidget-b7f619c3f2d14ea6f4f4">{"x":{"question":"A log transformation of the data can help when a variable has positive skew (a long tail on the right)","answers":[{"option":"True","correct":true,"message":null},{"option":"False","correct":false,"message":null}],"label":"quiz-2","skipStartButton":true,"perQuestionResponseAnswers":true,"perQuestionResponseMessaging":true,"preventUnanswered":true,"displayQuestionCount":false,"displayQuestionNumber":false,"disableRanking":true,"nextQuestionText":"","checkAnswerText":"Submit Answer","allowRetry":false,"randomSortAnswers":false,"json":{"info":{"name":"","main":""},"questions":[{"q":"A log transformation of the data can help when a variable has positive skew (a long tail on the right)","a":[{"option":"True","correct":true,"message":null},{"option":"False","correct":false,"message":null}],"correct":"Correct!","incorrect":"Incorrect."}]}},"evals":[],"jsHooks":[]}</script>
</td>
</tr>
<tr>
<td>
<div id="htmlwidget-57432a5282ec824e0b6a" style="width:100%;height:auto;", class = "quiz html-widget">
<div class="panel panel-default">
<div class="panel-body quizArea">
</div>
</div>
</div>
<script type="application/json" data-for="htmlwidget-57432a5282ec824e0b6a">{"x":{"question":"Which basic chart is the best type for showing a relationship between two continuous quantitative variables?","answers":[{"option":"pie","correct":false,"message":null},{"option":"bar","correct":false,"message":null},{"option":"scatter","correct":true,"message":null},{"option":"histogram","correct":false,"message":null},{"option":"box and whiskers","correct":false,"message":null},{"option":"mosaic","correct":false,"message":null}],"label":"quiz-3","skipStartButton":true,"perQuestionResponseAnswers":true,"perQuestionResponseMessaging":true,"preventUnanswered":true,"displayQuestionCount":false,"displayQuestionNumber":false,"disableRanking":true,"nextQuestionText":"","checkAnswerText":"Submit Answer","allowRetry":false,"randomSortAnswers":true,"json":{"info":{"name":"","main":""},"questions":[{"q":"Which basic chart is the best type for showing a relationship between two continuous quantitative variables?","a":[{"option":"pie","correct":false,"message":null},{"option":"bar","correct":false,"message":null},{"option":"scatter","correct":true,"message":null},{"option":"histogram","correct":false,"message":null},{"option":"box and whiskers","correct":false,"message":null},{"option":"mosaic","correct":false,"message":null}],"correct":"Correct!","incorrect":"Incorrect."}]}},"evals":[],"jsHooks":[]}</script>
</td>
</tr>
<tr>
<td>
<div id="htmlwidget-da58215fa163b0b08e6d" style="width:100%;height:auto;", class = "quiz html-widget">
<div class="panel panel-default">
<div class="panel-body quizArea">
</div>
</div>
</div>
<script type="application/json" data-for="htmlwidget-da58215fa163b0b08e6d">{"x":{"question":"An effective data visualization will include some or all of the following:","answers":[{"option":"Distribution of a variable","correct":true,"message":null},{"option":"Relationship(s) between variables","correct":true,"message":null},{"option":"Labels","correct":true,"message":null},{"option":"Fancy fonts","correct":false,"message":null},{"option":"Aesthetically pleasing colors","correct":false,"message":null},{"option":"Interactivity","correct":false,"message":null}],"label":"quiz-4","skipStartButton":true,"perQuestionResponseAnswers":true,"perQuestionResponseMessaging":true,"preventUnanswered":true,"displayQuestionCount":false,"displayQuestionNumber":false,"disableRanking":true,"nextQuestionText":"","checkAnswerText":"Submit Answer","allowRetry":false,"randomSortAnswers":true,"json":{"info":{"name":"","main":""},"questions":[{"q":"An effective data visualization will include some or all of the following:","a":[{"option":"Distribution of a variable","correct":true,"message":null},{"option":"Relationship(s) between variables","correct":true,"message":null},{"option":"Labels","correct":true,"message":null},{"option":"Fancy fonts","correct":false,"message":null},{"option":"Aesthetically pleasing colors","correct":false,"message":null},{"option":"Interactivity","correct":false,"message":null}],"correct":"Correct!","incorrect":"Interactivity CAN make a data visualization more effective, but we have seen static (non-interactive) examples so far that are completely fine without it. When it comes to colors, the most important factor is whether they convey the information well, and having a color scheme that is aesthetically pleasing is really nice, but is not technically necessary. Fancy fonts can look good, but they don't add to the story the visualization is meant to tell.","force_checkbox":true}]}},"evals":[],"jsHooks":[]}</script>
</td>
</tr>
<tr>
<td>
<div id="htmlwidget-734e94e9246a356d2175" style="width:100%;height:auto;", class = "quiz html-widget">
<div class="panel panel-default">
<div class="panel-body quizArea">
</div>
</div>
</div>
<script type="application/json" data-for="htmlwidget-734e94e9246a356d2175">{"x":{"question":"A heatmap is a choropleth","answers":[{"option":"True","correct":false,"message":null},{"option":"False","correct":true,"message":null}],"label":"quiz-5","skipStartButton":true,"perQuestionResponseAnswers":true,"perQuestionResponseMessaging":true,"preventUnanswered":true,"displayQuestionCount":false,"displayQuestionNumber":false,"disableRanking":true,"nextQuestionText":"","checkAnswerText":"Submit Answer","allowRetry":false,"randomSortAnswers":false,"json":{"info":{"name":"","main":""},"questions":[{"q":"A heatmap is a choropleth","a":[{"option":"True","correct":false,"message":null},{"option":"False","correct":true,"message":null}],"correct":"Correct!","incorrect":"Choropleth maps include geographical boundaries, which heatmaps do not."}]}},"evals":[],"jsHooks":[]}</script>
</td>
</tr>
<tr>
<td>
<div id="htmlwidget-f1c3ee789a7c1b3f7f5f" style="width:100%;height:auto;", class = "quiz html-widget">
<div class="panel panel-default">
<div class="panel-body quizArea">
</div>
</div>
</div>
<script type="application/json" data-for="htmlwidget-f1c3ee789a7c1b3f7f5f">{"x":{"question":"Which of the following are examples of a qualitative/categorical variable? (This includes nominal and ordinal types.)","answers":[{"option":"Survey responder's age group "65 and older"","correct":true,"message":null},{"option":"Survey responder's age","correct":false,"message":null},{"option":"Rating scale (e.g. "worst" to "best")","correct":true,"message":null},{"option":"Survey responder's gender","correct":true,"message":null},{"option":"How much time user spent responding to survey","correct":false,"message":null}],"label":"quiz-6","skipStartButton":true,"perQuestionResponseAnswers":true,"perQuestionResponseMessaging":true,"preventUnanswered":true,"displayQuestionCount":false,"displayQuestionNumber":false,"disableRanking":true,"nextQuestionText":"","checkAnswerText":"Submit Answer","allowRetry":false,"randomSortAnswers":true,"json":{"info":{"name":"","main":""},"questions":[{"q":"Which of the following are examples of a qualitative/categorical variable? (This includes nominal and ordinal types.)","a":[{"option":"Survey responder's age group "65 and older"","correct":true,"message":null},{"option":"Survey responder's age","correct":false,"message":null},{"option":"Rating scale (e.g. "worst" to "best")","correct":true,"message":null},{"option":"Survey responder's gender","correct":true,"message":null},{"option":"How much time user spent responding to survey","correct":false,"message":null}],"correct":"Correct!","incorrect":"Age is quantitative while an age group is qualitative. Time spent is quantitative.","force_checkbox":true}]}},"evals":[],"jsHooks":[]}</script>
</td>
</tr>
</table>
</div>
</div>
<div id="section-appendix" class="section level2">
<h2>Appendix</h2>
<div id="section-visual-essays" class="section level3">
<h3>Visual essays</h3>
<ul>
<li><a href="http://www.r2d3.us/visual-intro-to-machine-learning-part-1/">A visual introduction to machine learning</a> by Stephanie Yee and Tony Chu</li>
<li><a href="https://tinlizzie.org/histograms/">Exploring Histograms</a> by Aran Lunzer and Amelia McNamara</li>
<li><a href="http://algorithms-tour.stitchfix.com/">Algorithms Tour</a>: How data science is woven into the fabric of StitchFix</li>
<li><a href="https://pudding.cool/2017/03/hamilton/index.html">An Interactive Visualization of Every Line in Hamilton</a> by Shirley Wu</li>
<li><a href="http://flowingdata.com/2017/11/28/career-paths/">Constructed Career Paths from Job Switching Data</a> by Nathan Yau</li>
</ul>
</div>
<div id="section-collections" class="section level3">
<h3>Collections</h3>
<ul>
<li><a href="https://twitter.com/nytgraphics">The New York Times Graphics Department</a></li>
<li><a href="https://www.informationisbeautifulawards.com/">Information is Beautiful Awards</a></li>
<li><a href="http://flowingdata.com/">FlowingData</a>’s <a href="https://flowingdata.com/2017/12/28/10-best-data-visualization-projects-of-2017/">10 Best Data Visualization Projects of 2017</a></li>
</ul>
</div>
<div id="section-further-reading" class="section level3">
<h3>Further reading</h3>
<ul>
<li><a href="https://www.edwardtufte.com/tufte/books_vdqi">The Visual Display of Quantitative Information</a> by Edward Tufte</li>
<li><a href="http://www.springer.com/us/book/9783540330363">Handbook of Data Visualization</a> (Editors: Chun-houh Chen, Wolfgang Karl Härdle, Antony Unwin)</li>
</ul>
</div>
<div id="section-making-your-own" class="section level3">
<h3>Making your own</h3>
<ul>
<li><a href="http://book.flowingdata.com/">Visualize This: The FlowingData Guide to Design, Visualization, and Statistics</a> by Nathan Yau</li>
<li><a href="http://shop.oreilly.com/product/0636920063704.do">R Graphics Cookbook</a> by Winston Chang</li>
<li><a href="http://ggplot2.org/book/">ggplot2: Elegant Graphics for Data Analysis</a> by Hadley Wickham</li>
<li><a href="http://shop.oreilly.com/product/0636920037057.do">Data Visualization with Python and JavaScript</a> by Kyran Dale</li>
<li><a href="http://shop.oreilly.com/product/0636920045335.do">SVG Animations: From Common UX Implementations to Complex Responsive Animation</a> by Sarah Drasner</li>
<li><a href="https://www.manning.com/books/d3js-in-action-second-edition">D3.js in Action</a> by Elijah Meeks
<script type="application/shiny-prerendered" data-context="server-start">
library(learnr)
knitr::opts_chunk$set(echo = FALSE, warning = FALSE, message = FALSE)
</script>
<script type="application/shiny-prerendered" data-context="server">
learnr:::register_http_handlers(session, metadata = list(id = "org.wikimedia.mikhail.dataviz-literacy", version = "0.9.6"))
</script>
<script type="application/shiny-prerendered" data-context="data">
library(magrittr)
library(dplyr)
library(ggplot2)
titanic <- data.frame(Titanic)
compress <- function(x, round_by = 2) {
div <- findInterval(x, c(1, 1e3, 1e6, 1e9, 1e12))
return(paste0(round( x / 10 ^ (3 * ifelse(div - 1 < 0, 0, div - 1)), round_by),
c("", "", "K", "M", "B", "T")[div + 1]))
}
</script>
<!--html_preserve-->
<script type="application/shiny-prerendered" data-context="dependencies">
{"type":"list","attributes":{},"value":[{"type":"list","attributes":{"names":{"type":"character","attributes":{},"value":["name","version","src","meta","script","stylesheet","head","attachment","package","all_files"]},"class":{"type":"character","attributes":{},"value":["html_dependency"]}},"value":[{"type":"character","attributes":{},"value":["jquery"]},{"type":"character","attributes":{},"value":["1.11.3"]},{"type":"list","attributes":{"names":{"type":"character","attributes":{},"value":["file"]}},"value":[{"type":"character","attributes":{},"value":["rmd/h/jquery-1.11.3"]}]},{"type":"NULL"},{"type":"character","attributes":{},"value":["jquery.min.js"]},{"type":"NULL"},{"type":"NULL"},{"type":"NULL"},{"type":"character","attributes":{},"value":["rmarkdown"]},{"type":"logical","attributes":{},"value":[true]}]},{"type":"list","attributes":{"names":{"type":"character","attributes":{},"value":["name","version","src","meta","script","stylesheet","head","attachment","package","all_files"]},"class":{"type":"character","attributes":{},"value":["html_dependency"]}},"value":[{"type":"character","attributes":{},"value":["bootstrap"]},{"type":"character","attributes":{},"value":["3.3.5"]},{"type":"list","attributes":{"names":{"type":"character","attributes":{},"value":["file"]}},"value":[{"type":"character","attributes":{},"value":["rmd/h/bootstrap-3.3.5"]}]},{"type":"list","attributes":{"names":{"type":"character","attributes":{},"value":["viewport"]}},"value":[{"type":"character","attributes":{},"value":["width=device-width, initial-scale=1"]}]},{"type":"character","attributes":{},"value":["js/bootstrap.min.js","shim/html5shiv.min.js","shim/respond.min.js"]},{"type":"character","attributes":{},"value":["css/cosmo.min.css"]},{"type":"NULL"},{"type":"NULL"},{"type":"character","attributes":{},"value":["rmarkdown"]},{"type":"logical","attributes":{},"value":[true]}]},{"type":"list","attributes":{"names":{"type":"character","attributes":{},"value":["name","version","src","meta","script","stylesheet","head","attachment","package","all_files"]},"class":{"type":"character","attributes":{},"value":["html_dependency"]}},"value":[{"type":"character","attributes":{},"value":["pagedtable"]},{"type":"character","attributes":{},"value":["1.1"]},{"type":"list","attributes":{"names":{"type":"character","attributes":{},"value":["file"]}},"value":[{"type":"character","attributes":{},"value":["rmd/h/pagedtable-1.1"]}]},{"type":"NULL"},{"type":"character","attributes":{},"value":["js/pagedtable.js"]},{"type":"character","attributes":{},"value":["css/pagedtable.css"]},{"type":"NULL"},{"type":"NULL"},{"type":"character","attributes":{},"value":["rmarkdown"]},{"type":"logical","attributes":{},"value":[true]}]},{"type":"list","attributes":{"names":{"type":"character","attributes":{},"value":["name","version","src","meta","script","stylesheet","head","attachment","package","all_files"]},"class":{"type":"character","attributes":{},"value":["html_dependency"]}},"value":[{"type":"character","attributes":{},"value":["highlightjs"]},{"type":"character","attributes":{},"value":["1.1"]},{"type":"list","attributes":{"names":{"type":"character","attributes":{},"value":["href"]}},"value":[{"type":"character","attributes":{},"value":["index_files/highlightjs-1.1"]}]},{"type":"NULL"},{"type":"character","attributes":{},"value":["highlight.js"]},{"type":"character","attributes":{},"value":["textmate.css"]},{"type":"NULL"},{"type":"NULL"},{"type":"NULL"},{"type":"logical","attributes":{},"value":[true]}]},{"type":"list","attributes":{"names":{"type":"character","attributes":{},"value":["name","version","src","meta","script","stylesheet","head","attachment","package","all_files"]},"class":{"type":"character","attributes":{},"value":["html_dependency"]}},"value":[{"type":"character","attributes":{},"value":["tutorial"]},{"type":"character","attributes":{},"value":["0.9.1"]},{"type":"list","attributes":{"names":{"type":"character","attributes":{},"value":["file"]}},"value":[{"type":"character","attributes":{},"value":["lib/tutorial"]}]},{"type":"NULL"},{"type":"character","attributes":{},"value":["tutorial.js"]},{"type":"character","attributes":{},"value":["tutorial.css"]},{"type":"NULL"},{"type":"NULL"},{"type":"character","attributes":{},"value":["learnr"]},{"type":"logical","attributes":{},"value":[true]}]},{"type":"list","attributes":{"names":{"type":"character","attributes":{},"value":["name","version","src","meta","script","stylesheet","head","attachment","package","all_files"]},"class":{"type":"character","attributes":{},"value":["html_dependency"]}},"value":[{"type":"character","attributes":{},"value":["tutorial-autocompletion"]},{"type":"character","attributes":{},"value":["0.9.1"]},{"type":"list","attributes":{"names":{"type":"character","attributes":{},"value":["file"]}},"value":[{"type":"character","attributes":{},"value":["lib/tutorial"]}]},{"type":"NULL"},{"type":"character","attributes":{},"value":["tutorial-autocompletion.js"]},{"type":"NULL"},{"type":"NULL"},{"type":"NULL"},{"type":"character","attributes":{},"value":["learnr"]},{"type":"logical","attributes":{},"value":[true]}]},{"type":"list","attributes":{"names":{"type":"character","attributes":{},"value":["name","version","src","meta","script","stylesheet","head","attachment","package","all_files"]},"class":{"type":"character","attributes":{},"value":["html_dependency"]}},"value":[{"type":"character","attributes":{},"value":["tutorial-diagnostics"]},{"type":"character","attributes":{},"value":["0.9.1"]},{"type":"list","attributes":{"names":{"type":"character","attributes":{},"value":["file"]}},"value":[{"type":"character","attributes":{},"value":["lib/tutorial"]}]},{"type":"NULL"},{"type":"character","attributes":{},"value":["tutorial-diagnostics.js"]},{"type":"NULL"},{"type":"NULL"},{"type":"NULL"},{"type":"character","attributes":{},"value":["learnr"]},{"type":"logical","attributes":{},"value":[true]}]},{"type":"list","attributes":{"names":{"type":"character","attributes":{},"value":["name","version","src","meta","script","stylesheet","head","attachment","package","all_files"]},"class":{"type":"character","attributes":{},"value":["html_dependency"]}},"value":[{"type":"character","attributes":{},"value":["tutorial-format"]},{"type":"character","attributes":{},"value":["0.9.1"]},{"type":"list","attributes":{"names":{"type":"character","attributes":{},"value":["file"]}},"value":[{"type":"character","attributes":{},"value":["rmarkdown/templates/tutorial/resources"]}]},{"type":"NULL"},{"type":"character","attributes":{},"value":["tutorial-format.js"]},{"type":"character","attributes":{},"value":["tutorial-format.css"]},{"type":"NULL"},{"type":"NULL"},{"type":"character","attributes":{},"value":["learnr"]},{"type":"logical","attributes":{},"value":[true]}]},{"type":"list","attributes":{"names":{"type":"character","attributes":{},"value":["name","version","src","meta","script","stylesheet","head","attachment","package","all_files"]},"class":{"type":"character","attributes":{},"value":["html_dependency"]}},"value":[{"type":"character","attributes":{},"value":["jquery"]},{"type":"character","attributes":{},"value":["1.11.3"]},{"type":"list","attributes":{"names":{"type":"character","attributes":{},"value":["file"]}},"value":[{"type":"character","attributes":{},"value":["rmd/h/jquery-1.11.3"]}]},{"type":"NULL"},{"type":"character","attributes":{},"value":["jquery.min.js"]},{"type":"NULL"},{"type":"NULL"},{"type":"NULL"},{"type":"character","attributes":{},"value":["rmarkdown"]},{"type":"logical","attributes":{},"value":[true]}]},{"type":"list","attributes":{"names":{"type":"character","attributes":{},"value":["name","version","src","meta","script","stylesheet","head","attachment","package","all_files"]},"class":{"type":"character","attributes":{},"value":["html_dependency"]}},"value":[{"type":"character","attributes":{},"value":["font-awesome"]},{"type":"character","attributes":{},"value":["4.5.0"]},{"type":"list","attributes":{"names":{"type":"character","attributes":{},"value":["file"]}},"value":[{"type":"character","attributes":{},"value":["rmd/h/font-awesome-4.5.0"]}]},{"type":"NULL"},{"type":"NULL"},{"type":"character","attributes":{},"value":["css/font-awesome.min.css"]},{"type":"NULL"},{"type":"NULL"},{"type":"character","attributes":{},"value":["rmarkdown"]},{"type":"logical","attributes":{},"value":[true]}]},{"type":"list","attributes":{"names":{"type":"character","attributes":{},"value":["name","version","src","meta","script","stylesheet","head","attachment","package","all_files"]},"class":{"type":"character","attributes":{},"value":["html_dependency"]}},"value":[{"type":"character","attributes":{},"value":["bootbox"]},{"type":"character","attributes":{},"value":["4.4.0"]},{"type":"list","attributes":{"names":{"type":"character","attributes":{},"value":["file"]}},"value":[{"type":"character","attributes":{},"value":["lib/bootbox"]}]},{"type":"NULL"},{"type":"character","attributes":{},"value":["bootbox.min.js"]},{"type":"NULL"},{"type":"NULL"},{"type":"NULL"},{"type":"character","attributes":{},"value":["learnr"]},{"type":"logical","attributes":{},"value":[true]}]},{"type":"list","attributes":{"names":{"type":"character","attributes":{},"value":["name","version","src","meta","script","stylesheet","head","attachment","package","all_files"]},"class":{"type":"character","attributes":{},"value":["html_dependency"]}},"value":[{"type":"character","attributes":{},"value":["localforage"]},{"type":"character","attributes":{},"value":["1.5"]},{"type":"list","attributes":{"names":{"type":"character","attributes":{},"value":["file"]}},"value":[{"type":"character","attributes":{},"value":["lib/localforage"]}]},{"type":"NULL"},{"type":"character","attributes":{},"value":["localforage.min.js"]},{"type":"NULL"},{"type":"NULL"},{"type":"NULL"},{"type":"character","attributes":{},"value":["learnr"]},{"type":"logical","attributes":{},"value":[true]}]},{"type":"list","attributes":{"names":{"type":"character","attributes":{},"value":["name","version","src","meta","script","stylesheet","head","attachment","package","all_files"]},"class":{"type":"character","attributes":{},"value":["html_dependency"]}},"value":[{"type":"character","attributes":{},"value":["tutorial"]},{"type":"character","attributes":{},"value":["0.9.1"]},{"type":"list","attributes":{"names":{"type":"character","attributes":{},"value":["file"]}},"value":[{"type":"character","attributes":{},"value":["lib/tutorial"]}]},{"type":"NULL"},{"type":"character","attributes":{},"value":["tutorial.js"]},{"type":"character","attributes":{},"value":["tutorial.css"]},{"type":"NULL"},{"type":"NULL"},{"type":"character","attributes":{},"value":["learnr"]},{"type":"logical","attributes":{},"value":[true]}]},{"type":"list","attributes":{"names":{"type":"character","attributes":{},"value":["name","version","src","meta","script","stylesheet","head","attachment","package","all_files"]},"class":{"type":"character","attributes":{},"value":["html_dependency"]}},"value":[{"type":"character","attributes":{},"value":["tutorial-autocompletion"]},{"type":"character","attributes":{},"value":["0.9.1"]},{"type":"list","attributes":{"names":{"type":"character","attributes":{},"value":["file"]}},"value":[{"type":"character","attributes":{},"value":["lib/tutorial"]}]},{"type":"NULL"},{"type":"character","attributes":{},"value":["tutorial-autocompletion.js"]},{"type":"NULL"},{"type":"NULL"},{"type":"NULL"},{"type":"character","attributes":{},"value":["learnr"]},{"type":"logical","attributes":{},"value":[true]}]},{"type":"list","attributes":{"names":{"type":"character","attributes":{},"value":["name","version","src","meta","script","stylesheet","head","attachment","package","all_files"]},"class":{"type":"character","attributes":{},"value":["html_dependency"]}},"value":[{"type":"character","attributes":{},"value":["tutorial-diagnostics"]},{"type":"character","attributes":{},"value":["0.9.1"]},{"type":"list","attributes":{"names":{"type":"character","attributes":{},"value":["file"]}},"value":[{"type":"character","attributes":{},"value":["lib/tutorial"]}]},{"type":"NULL"},{"type":"character","attributes":{},"value":["tutorial-diagnostics.js"]},{"type":"NULL"},{"type":"NULL"},{"type":"NULL"},{"type":"character","attributes":{},"value":["learnr"]},{"type":"logical","attributes":{},"value":[true]}]},{"type":"list","attributes":{"names":{"type":"character","attributes":{},"value":["name","version","src","meta","script","stylesheet","head","attachment","package","all_files"]},"class":{"type":"character","attributes":{},"value":["html_dependency"]}},"value":[{"type":"character","attributes":{},"value":["htmlwidgets"]},{"type":"character","attributes":{},"value":["1.0"]},{"type":"list","attributes":{"names":{"type":"character","attributes":{},"value":["file"]}},"value":[{"type":"character","attributes":{},"value":["www"]}]},{"type":"NULL"},{"type":"character","attributes":{},"value":["htmlwidgets.js"]},{"type":"NULL"},{"type":"NULL"},{"type":"NULL"},{"type":"character","attributes":{},"value":["htmlwidgets"]},{"type":"logical","attributes":{},"value":[true]}]},{"type":"list","attributes":{"names":{"type":"character","attributes":{},"value":["name","version","src","meta","script","stylesheet","head","attachment","package","all_files"]},"class":{"type":"character","attributes":{},"value":["html_dependency"]}},"value":[{"type":"character","attributes":{},"value":["quiz-binding"]},{"type":"character","attributes":{},"value":["0.9.1"]},{"type":"list","attributes":{"names":{"type":"character","attributes":{},"value":["file"]}},"value":[{"type":"character","attributes":{},"value":["htmlwidgets"]}]},{"type":"NULL"},{"type":"character","attributes":{},"value":["quiz.js"]},{"type":"NULL"},{"type":"NULL"},{"type":"NULL"},{"type":"character","attributes":{},"value":["learnr"]},{"type":"logical","attributes":{},"value":[false]}]},{"type":"list","attributes":{"names":{"type":"character","attributes":{},"value":["name","version","src","meta","script","stylesheet","head","attachment","package","all_files"]},"class":{"type":"character","attributes":{},"value":["html_dependency"]}},"value":[{"type":"character","attributes":{},"value":["jquery"]},{"type":"character","attributes":{},"value":["1.11.3"]},{"type":"list","attributes":{"names":{"type":"character","attributes":{},"value":["file"]}},"value":[{"type":"character","attributes":{},"value":["rmd/h/jquery-1.11.3"]}]},{"type":"NULL"},{"type":"character","attributes":{},"value":["jquery.min.js"]},{"type":"NULL"},{"type":"NULL"},{"type":"NULL"},{"type":"character","attributes":{},"value":["rmarkdown"]},{"type":"logical","attributes":{},"value":[true]}]},{"type":"list","attributes":{"names":{"type":"character","attributes":{},"value":["name","version","src","meta","script","stylesheet","head","attachment","package","all_files"]},"class":{"type":"character","attributes":{},"value":["html_dependency"]}},"value":[{"type":"character","attributes":{},"value":["bootstrap"]},{"type":"character","attributes":{},"value":["3.3.5"]},{"type":"list","attributes":{"names":{"type":"character","attributes":{},"value":["file"]}},"value":[{"type":"character","attributes":{},"value":["rmd/h/bootstrap-3.3.5"]}]},{"type":"list","attributes":{"names":{"type":"character","attributes":{},"value":["viewport"]}},"value":[{"type":"character","attributes":{},"value":["width=device-width, initial-scale=1"]}]},{"type":"character","attributes":{},"value":["js/bootstrap.min.js","shim/html5shiv.min.js","shim/respond.min.js"]},{"type":"character","attributes":{},"value":["css/bootstrap.min.css"]},{"type":"NULL"},{"type":"NULL"},{"type":"character","attributes":{},"value":["rmarkdown"]},{"type":"logical","attributes":{},"value":[true]}]},{"type":"list","attributes":{"names":{"type":"character","attributes":{},"value":["name","version","src","meta","script","stylesheet","head","attachment","package","all_files"]},"class":{"type":"character","attributes":{},"value":["html_dependency"]}},"value":[{"type":"character","attributes":{},"value":["bootbox"]},{"type":"character","attributes":{},"value":["4.4.0"]},{"type":"list","attributes":{"names":{"type":"character","attributes":{},"value":["file"]}},"value":[{"type":"character","attributes":{},"value":["lib/bootbox"]}]},{"type":"NULL"},{"type":"character","attributes":{},"value":["bootbox.min.js"]},{"type":"NULL"},{"type":"NULL"},{"type":"NULL"},{"type":"character","attributes":{},"value":["learnr"]},{"type":"logical","attributes":{},"value":[true]}]},{"type":"list","attributes":{"names":{"type":"character","attributes":{},"value":["name","version","src","meta","script","stylesheet","head","attachment","package","all_files"]},"class":{"type":"character","attributes":{},"value":["html_dependency"]}},"value":[{"type":"character","attributes":{},"value":["localforage"]},{"type":"character","attributes":{},"value":["1.5"]},{"type":"list","attributes":{"names":{"type":"character","attributes":{},"value":["file"]}},"value":[{"type":"character","attributes":{},"value":["lib/localforage"]}]},{"type":"NULL"},{"type":"character","attributes":{},"value":["localforage.min.js"]},{"type":"NULL"},{"type":"NULL"},{"type":"NULL"},{"type":"character","attributes":{},"value":["learnr"]},{"type":"logical","attributes":{},"value":[true]}]},{"type":"list","attributes":{"names":{"type":"character","attributes":{},"value":["name","version","src","meta","script","stylesheet","head","attachment","package","all_files"]},"class":{"type":"character","attributes":{},"value":["html_dependency"]}},"value":[{"type":"character","attributes":{},"value":["tutorial"]},{"type":"character","attributes":{},"value":["0.9.1"]},{"type":"list","attributes":{"names":{"type":"character","attributes":{},"value":["file"]}},"value":[{"type":"character","attributes":{},"value":["lib/tutorial"]}]},{"type":"NULL"},{"type":"character","attributes":{},"value":["tutorial.js"]},{"type":"character","attributes":{},"value":["tutorial.css"]},{"type":"NULL"},{"type":"NULL"},{"type":"character","attributes":{},"value":["learnr"]},{"type":"logical","attributes":{},"value":[true]}]},{"type":"list","attributes":{"names":{"type":"character","attributes":{},"value":["name","version","src","meta","script","stylesheet","head","attachment","package","all_files"]},"class":{"type":"character","attributes":{},"value":["html_dependency"]}},"value":[{"type":"character","attributes":{},"value":["tutorial-autocompletion"]},{"type":"character","attributes":{},"value":["0.9.1"]},{"type":"list","attributes":{"names":{"type":"character","attributes":{},"value":["file"]}},"value":[{"type":"character","attributes":{},"value":["lib/tutorial"]}]},{"type":"NULL"},{"type":"character","attributes":{},"value":["tutorial-autocompletion.js"]},{"type":"NULL"},{"type":"NULL"},{"type":"NULL"},{"type":"character","attributes":{},"value":["learnr"]},{"type":"logical","attributes":{},"value":[true]}]},{"type":"list","attributes":{"names":{"type":"character","attributes":{},"value":["name","version","src","meta","script","stylesheet","head","attachment","package","all_files"]},"class":{"type":"character","attributes":{},"value":["html_dependency"]}},"value":[{"type":"character","attributes":{},"value":["tutorial-diagnostics"]},{"type":"character","attributes":{},"value":["0.9.1"]},{"type":"list","attributes":{"names":{"type":"character","attributes":{},"value":["file"]}},"value":[{"type":"character","attributes":{},"value":["lib/tutorial"]}]},{"type":"NULL"},{"type":"character","attributes":{},"value":["tutorial-diagnostics.js"]},{"type":"NULL"},{"type":"NULL"},{"type":"NULL"},{"type":"character","attributes":{},"value":["learnr"]},{"type":"logical","attributes":{},"value":[true]}]},{"type":"list","attributes":{"names":{"type":"character","attributes":{},"value":["name","version","src","meta","script","stylesheet","head","attachment","package","all_files"]},"class":{"type":"character","attributes":{},"value":["html_dependency"]}},"value":[{"type":"character","attributes":{},"value":["slickquiz"]},{"type":"character","attributes":{},"value":["1.5.20"]},{"type":"list","attributes":{"names":{"type":"character","attributes":{},"value":["file"]}},"value":[{"type":"character","attributes":{},"value":["htmlwidgets/lib/slickquiz"]}]},{"type":"NULL"},{"type":"character","attributes":{},"value":["js/slickQuiz.js"]},{"type":"character","attributes":{},"value":["css/slickQuiz.css","css/slickQuizTutorial.css"]},{"type":"NULL"},{"type":"NULL"},{"type":"character","attributes":{},"value":["learnr"]},{"type":"logical","attributes":{},"value":[true]}]}]}
</script>
<!--/html_preserve--></li>
</ul>
</div>
</div>
</div> <!-- topics -->
<div class="topicsContainer">
<div class="topicsPositioner">
<div class="band">
<div class="bandContent topicsListContainer">
<!-- begin doc-metadata -->
<div id="doc-metadata">
<h2 class="title toc-ignore" style="display:none;">Plotting the Course Through Charted Waters</h2>
</div>
<!-- end doc-metadata -->
</div> <!-- bandContent.topicsListContainer -->
</div> <!-- band -->
</div> <!-- topicsPositioner -->
</div> <!-- topicsContainer -->
</div> <!-- bandContent page -->
</div> <!-- pageContent band -->
<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://mathjax.rstudio.com/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML";
document.getElementsByTagName("head")[0].appendChild(script);
})();
</script>
</body>
</html>