forked from KateRogers/slides_viz
-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
executable file
·842 lines (834 loc) · 54.6 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
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Quick Tips for Visualising Data</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/white.css">
<link rel="stylesheet" href="css/theme/white_custom.css" id="theme">
<link rel="stylesheet" href="css/overrides.css">
<link rel="stylesheet" href="css/balloon.min.css">
<!-- Centre Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Arvo&family=Source+Sans+Pro&display=swap" rel="stylesheet">
<!-- Theme used for syntax highlighting of code -->
<link rel="stylesheet" href="lib/css/monokai.css">
<!-- Printing and PDF exports -->
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
<script type="text/javascript">
(function (c, a) {
if (!a.__SV) {
var b = window; try { var d, m, j, k = b.location, f = k.hash; d = function (a, b) { return (m = a.match(RegExp(b + "=([^&]*)"))) ? m[1] : null }; f && d(f, "state") && (j = JSON.parse(decodeURIComponent(d(f, "state"))), "mpeditor" === j.action && (b.sessionStorage.setItem("_mpcehash", f), history.replaceState(j.desiredHash || "", c.title, k.pathname + k.search))) } catch (n) { } var l, h; window.mixpanel = a; a._i = []; a.init = function (b, d, g) {
function c(b, i) {
var a = i.split("."); 2 == a.length && (b = b[a[0]], i = a[1]); b[i] = function () {
b.push([i].concat(Array.prototype.slice.call(arguments,
0)))
}
} var e = a; "undefined" !== typeof g ? e = a[g] = [] : g = "mixpanel"; e.people = e.people || []; e.toString = function (b) { var a = "mixpanel"; "mixpanel" !== g && (a += "." + g); b || (a += " (stub)"); return a }; e.people.toString = function () { return e.toString(1) + ".people (stub)" }; l = "disable time_event track track_pageview track_links track_forms track_with_groups add_group set_group remove_group register register_once alias unregister identify name_tag set_config reset opt_in_tracking opt_out_tracking has_opted_in_tracking has_opted_out_tracking clear_opt_in_out_tracking people.set people.set_once people.unset people.increment people.append people.union people.track_charge people.clear_charges people.delete_user people.remove".split(" ");
for (h = 0; h < l.length; h++)c(e, l[h]); var f = "set set_once union unset remove delete".split(" "); e.get_group = function () { function a(c) { b[c] = function () { call2_args = arguments; call2 = [c].concat(Array.prototype.slice.call(call2_args, 0)); e.push([d, call2]) } } for (var b = {}, d = ["get_group"].concat(Array.prototype.slice.call(arguments, 0)), c = 0; c < f.length; c++)a(f[c]); return b }; a._i.push([b, d, g])
}; a.__SV = 1.2; b = c.createElement("script"); b.type = "text/javascript"; b.async = !0; b.src = "undefined" !== typeof MIXPANEL_CUSTOM_LIB_URL ?
MIXPANEL_CUSTOM_LIB_URL : "file:" === c.location.protocol && "//cdn4.mxpnl.com/libs/mixpanel-2-latest.min.js".match(/^\/\//) ? "https://cdn4.mxpnl.com/libs/mixpanel-2-latest.min.js" : "//cdn4.mxpnl.com/libs/mixpanel-2-latest.min.js"; d = c.getElementsByTagName("script")[0]; d.parentNode.insertBefore(b, d)
}
})(document, window.mixpanel || []);
</script>
</head>
<body>
<div class="reveal">
<div class="slides">
<section id="frontcover" data-background="#1bb580">
<!-- multilanguage toggler -->
<div class="ml-toggle white text-toggle">
EN |
<a class="active" href="fr/">FR</a>
</div>
<div class="title_container">
<h2 class="white">Quick Tips for Visualising Data</h2>
<h3 class="white">Examples from the COVID-19 Pandemic </h3>
<p class="text-small-centre white">
Created by <a href="https://centre.humdata.org/" target="_blank" >OCHA's Centre for Humanitarian Data</a> / <a href="http://twitter.com/humdata" target="_blank">@humdata</a>
</p>
<p class="text-small-centre white">
Press right on your keyboard or swipe right to navigate.
</p>
<div class="logos"><img src="pics/logo-ocha-white.png" /><img src="pics/logo-centre-white.png" /></div>
</div>
</section>
<section id="00-introduction" data-menu-title="Introduction">
<div class="header_bar centregreen">
<div class="header_title">Introduction</div>
</div>
<p class="text-small">The choices we make when we visualise data influence how people see, understand, and react to the underlying data. </p>
<p class="text-small">This session includes a series of slides to build your knowledge, a set of five short videos to demonstrate creating a graph and a short quiz to test your knowledge. The expected length of time to complete all segments is 25 minutes.</p>
<p class="text-small">In this introductory session to visualising data using examples from the COVID-19 pandemic, you will learn:
<ol class="text-small">
<li>best practices for designing thoughtful data visualisations;</li>
<li>how to identify and visually represent different relationships in data; and </li>
<li>how to prepare and structure your data in order to make a simple line graph.</li>
</ol>
</p>
</section>
<section id="contents" data-menu-title="Table of Contents">
<div class="header_bar centregreen">
<div class="header_title">Table of Contents</div>
</div>
</br>
<p class="text-small-centre">
<a class="contents_link" href="#/Why_We_Visualise">01: Why We Visualise Data</a>
</p>
<p class="text-small-centre">
<a class="contents_link" href="#/undertstand_context">02: Understand the Data</a>
</p>
<p class="text-small-centre">
<a class="contents_link" href="#/chart_choices"> 03: Choose the Right Visualisation</a>
</p>
<p class="text-small-centre">
<a class="contents_link" href="#/designing_thoughtfully">04: Designing Thoughtfully</a>
</p>
<p class="text-small-centre">
<a class="contents_link" href="#/do_it_yourself">05: Create Your Own Visualisation</a>
</p>
<p class="text-small-centre">
<a class="contents_link" href="#/quiz">06: Test Your Knowledge</a>
</p>
<p class="text-small-centre">
<a class="contents_link" href="#/annex">Annex</a>
</p>
</section>
<section>
<section id="instructions" data-menu-title="Instructions">
<div class="header_bar centregreen">
<div class="header_title header-sm-mobile">How to Navigate the Session</div>
</div>
<p class="text-small">The progress bar at the bottom of your screen lets you know where you are in the session. If you would like to skip through the pages, you can do this using the navigation menu at the bottom left of your screen.
</p>
<p class="text-small"> Each page introduces a tip, concept or best practice for visualising data during the COVID-19 pandemic. Scroll through the pages using your keyboard or by clicking on the right and left arrows at the bottom right of your screen.
</p>
<p class="text-small"> On certain pages, there is the option to scroll down to learn more about a particular topic. Navigate to these vertical pages using the down arrow on your keyboard or by clicking on the down arrow at the bottom right of your screen.
</p>
<p class="text-bottom"> Press down to learn more about navigating the session.</p>
</section>
<section id="instructions_cont.">
<div class="header_bar centregreen">
<div class="header_title header-sm-mobile">How to Navigate the Session</div>
</div>
<p class="text-small"> The navigation arrows at the bottom right of your screen are there to lead you through the session. In the example below, the left faded arrow indicates completed pages whereas both the down arrow and right arrow indicate pages you have yet to visit.
</p>
<div class="img-standard">
<img src="pics/nav_arrows.png" alt="nav_arrows" class="no_shadow"/>
</div>
<p class="text-small"> Now that you understand how to navigate this session, click on the right arrow to start the session.
</p>
</section>
</section>
<!-- SECTION 1 WHY -->
<section id="why_we_visualise" data-background="#007ce0" data-menu-title="Why We Visualise Data">
<div class="title_container">
<h1 class="white">Why We Visualise Data</h1>
</div>
</section>
<section id="to_explore_explain" data-menu-title="Explore & Explain">
<div class="header_bar centreblue">
<div class="header_title">01</div>
</div>
<h4>We Visualise to Explore & Explain</h4>
<p class="text-small"> We visualise data <b>to explore</b> it. Through exploratory data visualisation, we are able to uncover different relationships and to discover the most meaningful information to highlight or analyse further.
</p>
<p class="text-small"> We also visualise data <b>to explain</b> what we are seeing in it. Explanatory visualisation can be used to inform, persuade and engage an audience. This is the type of visualisation we are going to focus on here.
</p>
<div class="img-med">
<img src="pics/explore_explain.png" alt="explain-v-explore" class="no_shadow"/>
<p class="image-text"> Image inspired by <a href="https://slides.com/maartenzam/boehringer-1#/5/14/0" target="_blank">Maarten Lambrechts</a>
</p>
</div>
</section>
<section id="to_explain_how" data-menu-title="Explain with Visualisation" >
<div class="header_bar centreblue">
<div class="header_title">01</div>
</div>
<h4>How to Explain with Visualisation</h4>
<p class="text-small"> Explanatory data visualisation requires a defined audience and clear objective. Before you start to create your visualisation, ask yourself the following:
<ul class="text-small">
<li><b>What am I trying to say?</b> The message that you are trying to convey should guide the design choices that you make.</li>
<li><b>Who am I trying to say it to?</b> Thinking about who your audience is and how they will interact with and use your visualisation will help focus your final product.</li>
</ul>
</p>
</section>
<!-- SECTION 2 Context -->
<section id="undertstand_data" data-background="#f2645a" data-menu-title="Understand the Data">
<div class="title_container">
<h1 class="white">Understand the Data</h1>
</div>
</section>
<section>
<section id="context" data-menu-title="Get to Know Your Data">
<div class="header_bar centrered">
<div class="header_title">02</div>
</div>
<h4>Before you start, get to know your data</h4>
<p class="text-small">Before digging into a COVID-19 dataset, it is important to spend a bit of time understanding what can and cannot be said based on the data. Too often we jump into analysis before taking the time to understand what aspects of the world our data represents.
</p>
<p class="text-small">The first step is to understand the definitions of the data included in your dataset. To do this, you’ll want to review the following:
<ol class="text-small">
<li>the <span class="popup" class="tooltip-big-text" data-balloon-length="large" aria-label="Metadata is additional information or documentation about your dataset that will make it easier for others to understand and put your data into context." data-balloon-pos="up">metadata </span> </li>
<li>the <span class="popup" class="tooltip-big-text" data-balloon-length="large" aria-label="A data dictionary is used to catalog and communicate the structure and content of data, and provides meaningful descriptions for individually named data objects." data-balloon-pos="up">data dictionary</span></li>
</ol>
</p>
<p class="text-bottom"> Press down to learn more about metadata and data dictionaries.</p>
</section>
<section id="context_metadata" data-menu-title="Metadata">
<div class="header_bar centrered">
<div class="header_title">02</div>
</div>
<h4>Explore the Metadata</h4>
<p class="text-small"> Metadata is data about data. Reviewing the metadata before you download a new dataset can save you time and let you know whether the data you are about to download even has what you need. The Humanitarian Data Exchange requires all data shared on the platform to include <a href="https://centre.humdata.org/providing-metadata-for-your-datasets-on-hdx/" target="_blank">a few essential metadata fields</a>.
</p>
<p class="text-small"> Metadata provides basic information about a dataset such as:
<ol class="text-small">
<li> <b>Source:</b> who is releasing the dataset. </li>
<li><b>Date:</b> to include the date the dataset was initially released, the date it was last updated and released, and the expected frequency of update to anticipate the next release date.</li>
<li><b>Location:</b> the geographic extent of the dataset and the granularity of the dataset (e.g. for a specific number of countries with data at an admin1 level).</li>
<li><b>Methodology:</b> how the data was collected.</li>
</ol>
</p>
<p class="text-bottom"> Press down to learn more about data dictionaries.</p>
<!-- <div class="img-standard">
<img src="pics/hdx_metadata.png" alt="colour map" />
<p class="image-text"> Click here to read more about <a href="https://centre.humdata.org/providing-metadata-for-your-datasets-on-hdx/" target="_blank">HDX Metadata</a>
</br> <b style="color:#333">Press down to learn about data dictionaries</b>
</p>
</div> -->
</section>
<section id="context_data_dictionary" data-menu-title="Data Dictionary">
<div class="header_bar centrered">
<div class="header_title">02</div>
</div>
<h4>Read the data dictionary</h4>
<p class="text-small"> Some organisations will publish data dictionaries along with their data. Oftentimes the headers in a data set are condensed to conserve space and make them machine readable. For example, a field with a header named “cases” could mean cumulative cases, daily cases, or active cases. </p>
<p class="text-small"> A data dictionary provides definitions for variables in a data set to understand what each variable represents. The example below provides an example of definition given for positive and suspected patients as well as the data type (numeric).</p>
<div class="img-standard">
<img src="pics/data_dictionaryv3.png" alt="data dictionary" />
<p class="image-text"> Source: <a href="https://healthdata.gov/dataset/california-covid-19-hospital-data-and-case-statistics" target="_blank">Healthcare.gov Data Portal</a>
</p>
</div>
</section>
</section>
<section id="common_terms" data-menu-title="COVID-19 Data Points">
<div class="header_bar centrered">
<div class="header_title">02</div>
</div>
<h4>Common COVID-19 Data Points</h4>
<p class="text-small sm-mobile"> The following are a few common figures in COVID-19 datasets:
</p>
<p class="text-small sm-mobile">
<ol class="text-small sm-mobile">
<li><b>New Cases</b> includes the number of confirmed cases (and suspected cases where that is available) for a given timeframe. (Also known as “<span class="popup" class="tooltip-big-text" data-balloon-length="large" aria-label="The number of new cases of a health event (such as development of a disease, or reaction to a medicine) that occur during a specific time period, usually a year, in a specified population. Incidence is therefore also a measure of the risk of experiencing the health event during a certain period of time." data-balloon-pos="up">incidence</span>").</li>
<li><b>Cumulative Cases</b> are the total confirmed cases up to a given point in time, without subtracting people who have recovered or died. These numbers over time only get larger and larger as new cases are added.</li>
<li><b>Deaths</b> are the number of confirmed deaths (and probable where that is available) for a given timeframe. The case fatality ratio is the number of deaths divided by the number of confirmed cases.</li>
<li><b>Active Cases</b> includes the number of confirmed cases (and suspected cases where that is available) for a given timeframe minus those people who have died or recovered from COVID-19. (Also known as "<span class="popup" class="tooltip-big-text" data-balloon-length="large" aria-label="Prevalence is the proportion of a population found to have a condition (typically a disease or a risk factor such as smoking). Prevalence can be measured at a particular point in time (point prevalence), or over a specified period such as a year (period prevalence)." data-balloon-pos="up">prevalence</span>"). </li>
</ol>
</p>
</section>
<section>
<section id="data_reliability" data-menu-title="Data Reliability">
<div class="header_bar centrered">
<div class="header_title">02</div>
</div>
<h4>Data Reliability</h4>
<p class="text-small sm-mobile"> The accuracy of these numbers is dependent on a number of factors.
<ul class="text-small sm-mobile">
<li>The number of confirmed cases depends on the extent of testing being performed in a country, the accuracy of the tests, and the lag time between when a person is infected, symptomatic and tested.</li>
<li>The number of deaths depends on if deaths outside of hospitals are counted and if tests are being performed within hospitals prior to or after death. </li>
<li>The number of active cases is calculated using data on recovered cases. Not all locations are providing proper data on recovered cases and as a result this data may not be reliable. </li>
</ul>
</p>
<p class="text-small">To ensure that the data you have is as up-to-date and accurate as possible, prioritise data from reputable sources and data with well documented collection methodologies.</p>
<p class="text-bottom"> Press down to learn more about reliable data sources</p>
</section>
<section id="sources" data-menu-title="Data Sources">
<div class="header_bar centrered">
<div class="header_title">02</div>
</div>
<h4>COVID-19 Data on HDX</h4>
<p class="text-small">HDX houses a diverse range of datasets on COVID-19 for humanitarians. These include:</p>
<p class="text-small">
<ol class="text-small">
<li> Global case data from the <a href="https://data.humdata.org/dataset/novel-coronavirus-2019-ncov-cases" target="_blank">Johns Hopkins School of Public Health</a> and <a href="https://data.humdata.org/dataset/coronavirus-covid-19-cases-and-deaths" target="_blank">the World Health Organization;</a></li>
<li>Testing data from <a href="https://data.humdata.org/dataset/total-covid-19-tests-performed-by-country" target="_blank">Our World in Data;</a></li>
<li>Global school closures from <a href="https://data.humdata.org/dataset/covid-19-global-travel-restrictions-and-airline-information" target="_blank">UNESCO;</a> and </li>
<li>Global travel restrictions and airline information from <a href="https://data.humdata.org/dataset/global-school-closures-covid19" target="_blank">the World Food Programme.</a>
</li>
</ol>
</p>
</section>
</section>
<!-- SECTION 4 Charts -->
<section id="chart_choices" data-background="#f2645a" data-menu-title="Choose the Right Visualisation">
<div class="title_container">
<h1 class="white">Choose the Right Visualisation</h1>
</div>
</section>
<section id="relationship_types" data-menu-title="Relationship Types">
<div class="header_bar centrered">
<div class="header_title">03</div>
</div>
<h4>Relationship Types</h4>
<p class="text-small">Choosing the right visualisation can feel overwhelming. There are a lot of options out there. The best way to narrow it down is to identify the relationship between the variables you want to highlight. </p>
<p class="text-small"> In this section, we will explore the following relationship types and discuss good chart options for each:
<ol class="text-small">
<li>Change Over Time</li>
<li>Comparison</li>
<li>Distribution</li>
<li>Part-to-Whole</li>
<li>Geospatial</li>
</ol>
</p>
</section>
<section>
<section id="change_time" data-menu-title="Change over Time">
<div class="header_bar centrered">
<div class="header_title">03</div>
</div>
<h4>Change Over Time</h4>
<p class="text-small"> If you have <span class="popup" class="tooltip-big-text" data-balloon-length="large" aria-label="A series of data points ordered in time." data-balloon-pos="up">time series</span> data, a common relationship to visualise is change over time. Make sure to plot the timeline on the X axis. The following charts are options to illustrate trends over time.
</p>
<div class="img-standard">
<img src="pics/change.png" alt="change_over_time"/>
<p class="image-text"> Source: <a href="https://public.tableau.com/views/VisualVocabulary/VisualVocabulary?%3Aembed=y&%3Adisplay_count=yes&publish=yes&%3AshowVizHome=no" target="_blank">Andy Kriebel & The Financial Times</a>
</br> <b style="color:#333">Press down to learn more.</b>
</p>
</div>
</section>
<section id="line_graph" data-menu-title="Line Graph">
<div class="header_bar centrered">
<div class="header_title">03</div>
</div>
<h4>Line Graph</h4>
<p class="text-small"> A line graph will emphasise trends by showing a series of points connected by straight lines. Adding visual markers for important events, e.g. when stay at home orders went into effect, is an easy way to add context. Multiple time series should always use line graphs.
<div class="img-standard">
<img src="pics/covid19_line.png" alt="line graph" />
<p class="image-text">Source: <a href="https://ourworldindata.org/grapher/total-daily-covid-deaths" target="_blank"> Our World in Data </a>
</br> <b style="color:#333">Press down for more examples.</b>
</p>
</div>
</section>
<section id="bar_chart" data-menu-title="Bar Chart">
<div class="header_bar centrered">
<div class="header_title">03</div>
</div>
<h4>Bar Chart</h4>
<p class="text-small">Time series bar charts are used to emphasise individual values at distinct points in time. They work best when data points are at equal intervals such as days, months or years, e.g. the number of confirmed cases reported daily. Always make sure your Y axis starts at zero.
</p>
<div class="img-standard">
<img src="pics/covid19_bar.png" alt="bar chart"/>
<p class="image-text">Source:<a href="https://www.worldometers.info/coronavirus/" target="_blank"> Worldometer </a>
</br> <b style="color:#333"> Press down for more examples.</b>
</p>
</div>
</section>
<section id="stacked_area" data-menu-title="Stacked Area Graph">
<div class="header_bar centrered">
<div class="header_title">03</div>
</div>
<h4>Stacked Area Graph</h4>
<p class="text-small"> Stacked area graphs are useful for comparing multiple data series changing over time. The values of each series are displayed on top of each other, which allows you to visualise the change of the total value, e.g. the number of confirmed COVID-19 cases globally, and how the values are evolving in component groups, e.g. region.
</p>
<div class="img-standard">
<img src="pics/stacked_region.png" alt="area chart" />
<p class="image-text">Source:<a href="https://ourworldindata.org/grapher/daily-cases-covid-region" target="_blank"> Our World in Data </a>
</div>
</section>
</section>
<section>
<section id="comparison" data-menu-title="Comparison">
<div class="header_bar centrered">
<div class="header_title">03</div>
</div>
<h4>Comparison</h4>
<p class="text-small"> Visualisations will often use size, length and position to help viewers explore differences and similarities between categories and data series.
</p>
<div class="img-standard">
<img src="pics/comparison_v2.png" alt="mag_ranking"/>
<p class="image-text"> Source: <a href="https://public.tableau.com/views/VisualVocabulary/VisualVocabulary?%3Aembed=y&%3Adisplay_count=yes&publish=yes&%3AshowVizHome=no" target="_blank">Andy Kriebel & The Financial Times</a>
</br> <b style="color:#333"> Press down to learn more. </b>
</p>
</div>
</section>
<section id="ordered_bar" data-menu-title="Ordered Bar Chart">
<div class="header_bar centrered">
<div class="header_title">03</div>
</div>
<h4>Ordered Bar Chart</h4>
<p class="text-small"> Ordered bar and column charts are excellent for showing position and comparing across categories. When your labels are long, horizontal bars should be used. It is always preferable to sort your data as this will make it easier to read.
</p>
<div class="img-standard">
<iframe title="COVID-19 Pandemic in HRP Locations in Southern &amp; Eastern Africa" aria-label="Bar Chart" id="datawrapper-chart-QdfRZ" src="https://datawrapper.dwcdn.net/QdfRZ/4/" scrolling="no" frameborder="0" style="border: none;" width="710" height="324"></iframe>
<p class="image-text"><b style="color:#333"> Press down for more examples. </b>
</p>
</div>
</section>
<section id="proportional_symbol" data-menu-title="Proportional Symbol Chart">
<div class="header_bar centrered">
<div class="header_title">03</div>
</div>
<h4>Proportional Symbol Chart</h4>
<p class="text-small"> Often called bubble charts, these charts are typically used to compare and show the relationships between categorised circles using both positioning, colours and proportions.
</p>
<div class="img-standard">
<iframe title="COVID-19 Pandemic in Locations with a Humanitarian Response Plan" aria-label="chart" id="datawrapper-chart-ikRlr" src="https://datawrapper.dwcdn.net/ikRlr/11/" scrolling="no" frameborder="0" style="border: none;" width="600" height="307"></iframe>
<p class="image-text">Chart by OCHA Centre for Humanitarian Data</p>
</div>
</section>
</section>
<section>
<section id="distribution" data-menu-title="Distribution">
<div class="header_bar centrered">
<div class="header_title">03</div>
</div>
<h4>Distribution</h4>
<p class="text-small"> Distribution visualisations are often used to explore data as they show the values in the dataset and how often they occur. The shape (or the skew) of a distribution can be a memorable way of highlighting the lack of uniformity or equality in the data.
</p>
<div class="img-standard">
<img src="pics/distribution_two_box.png" alt="distribution"/>
<p class="image-text"> Source: <a href="https://public.tableau.com/views/VisualVocabulary/VisualVocabulary?%3Aembed=y&%3Adisplay_count=yes&publish=yes&%3AshowVizHome=no" target="_blank">Andy Kriebel & The Financial Times</a>
</br> <b style="color:#333"> Press down to learn more. </b>
</p>
</div>
</section>
<section id="histogram" data-menu-title="Histogram">
<div class="header_bar centrered">
<div class="header_title">03</div>
</div>
<h4>Histogram</h4>
<p class="text-small"> Histograms are useful for understanding the spread of the data. They show where values are concentrated, what the extremes are and whether there are any gaps. They may look similar to a vertical bar chart but are different in an important way. The horizontal (X) axis is numerical, not categorical.
</p>
<div class="img-sm">
<img src="pics/histogram.png" alt="histogramgraph"/>
<p class="image-text">Source: <a href="https://link.springer.com/article/10.1007/s00134-020-05991-x/figures/1" target="_blank">Springer</a>
</br> <b style="color:#333"> Press down for more examples. </b>
</p>
</div>
</section>
<section id="boxplot" data-menu-title="Box Plot">
<div class="header_bar centrered">
<div class="header_title">03</div>
</div>
<h4>Box Plot</h4>
<p class="text-small"> Box Plots (also referred to as box and whisker plots) are popular among statisticians and researchers. They are helpful for summarising multiple distributions by showing the median (centre) and range of the data. While useful for exploring data, not everyone understands how to interpret box plots. Use sparingly as an explanatory tool.
</p>
<div class="img-sm">
<img src="pics/boxplot_income.png" alt="boxplot"/>
<p class="image-text">Source: OCHA Centre for Humanitarian Data</p>
</div>
</section>
</section>
<section>
<section id="part_whole" data-menu-title="Part-to-Whole">
<div class="header_bar centrered">
<div class="header_title">03</div>
</div>
<h4>Part-To-Whole</h4>
<p class="text-small"> These charts are useful for showing how various parts of the data comprise the whole. While useful with a small number of categories they can quickly become difficult to read. If you are mainly interested in comparing the size of the parts, often a simple bar chart will be easier to read.
</p>
<div class="img-standard">
<img src="pics/part_two.png" alt="part_whole" />
<p class="image-text"> Source: <a href="https://public.tableau.com/views/VisualVocabulary/VisualVocabulary?%3Aembed=y&%3Adisplay_count=yes&publish=yes&%3AshowVizHome=no" target="_blank">Andy Kriebel & The Financial Times</a>
</br> <b style="color:#333"> Press down to learn more. </b>
</p>
</div>
</section>
<section id="donut_chart" data-menu-title="Donut Chart">
<div class="header_bar centrered">
<div class="header_title">03</div>
</div>
<h4>Donut Chart</h4>
<p class="text-small"> Over time, the donut chart has become increasingly popular. The donut chart is similar to a pie chart but the centre can be a good way of making space to include more information about the data (e.g. total).
</p>
<div class="img-standard">
<img src="pics/donut_chart.png" alt="donut"/>
<p class="image-text">Source: <a href="https://fts.unocha.org/emergencies/911/summary/2020" target="_blank">OCHA Financial Tracking Services</a>
</br> <b style="color:#333"> Press down for more examples.</b>
</p>
</div>
</section>
<section id="stacked_bar" data-menu-title="Proportional Stacked Bar">
<div class="header_bar centrered" >
<div class="header_title">03</div>
</div>
<h4>Proportional Stacked Bar</h4>
<p class="text-small">The proportional stacked bar is another simple way of showing a part-to-whole relationship. This chart is especially good when comparing variables across groups or at different points in time.
</p>
<div class="img-standard">
<img src="pics/stacked_home.png" alt="stacked bar graph" />
<p class="image-text">Source: <a href="https://public.tableau.com/profile/eleonora.nazander#!/vizhome/Workingforhome/Dashboard1" target="_blank">Eleonora Nazander</a>
</div>
</section>
</section>
<section>
<section id="geospatial" data-menu-title="Geospatial">
<div class="header_bar centrered">
<div class="header_title">03</div>
</div>
<h4>Geospatial</h4>
<p class="text-small">Only use maps when precise locations or geographical patterns in data are a crucial part of your message. When the interesting patterns in your data are not geographic patterns, a map may end up distracting from your message. Just because it can be mapped, does not mean it must be mapped.
</p>
<div class="img-standard">
<img src="pics/geospatial.png" alt="geopatial"/>
<p class="image-text"> Source: <a href="https://public.tableau.com/views/VisualVocabulary/Part-to-Whole?%3Aembed=y&%3Adisplay_count=yes&publish=yes&%3AshowVizHome=no" target="_blank">Andy Kriebel & The Financial Times</a>
</br> <b style="color:#333"> Press down to learn more. </b>
</p>
</div>
</section>
<section id="choropleth" data-menu-title="Choropleth Map">
<div class="header_bar centrered">
<div class="header_title">03</div>
</div>
<h4>CHOROPLETH</h4>
<p class="text-small">This standard approach for putting data on a map, displays geographical areas that are coloured, shaded or patterned in relation to a data variable. It is often better to use rates rather than totals for this type of map.
</p>
<div class="img-standard">
<img src="pics/map_shaded.png" alt="map" />
<p class="image-text">Source: <a href="https://www.humanitarianresponse.info/sites/www.humanitarianresponse.info/files/documents/files/global_humanitarian_response_plan_covid-19.pdf" target="_blank">United Nations Global Humanitarian Response Plan for COVID-19</a>
</br> <b style="color:#333"> Press down for more examples.</b>
</p>
</div>
</section>
<section id="proportional_symbol" data-menu-title="Proportional Symbol Map">
<div class="header_bar centrered">
<div class="header_title">03</div>
</div>
<h4>Proportional Symbol Map</h4>
<p class="text-small"> This map scales the size of symbols proportionally to the data value found at that location. The larger the symbol, generally the higher the value of something at a location.
</p>
<div class="img-standard">
<iframe title="COVID-19 Pandemic in Locations with a Humanitarian Response Plan" aria-label="Map" id="datawrapper-chart-LyNrW" src="https://datawrapper.dwcdn.net/LyNrW/6/" scrolling="no" frameborder="0" style="border: none;" width="600" height="400"></iframe>
</div>
</section>
</section>
<section id="chart_gif" data-menu-title="Visualisation & Chart Choosers">
<div class="header_bar centrered">
<div class="header_title">03</div>
</div>
<h4>Chart Choosers</h4>
<p class="text-small"> There are many tools out there to help you make the most appropriate graph for your data.
<ol class="text-small">
<li> The Financial Times' <a href="https://github.com/ft-interactive/chart-doctor/tree/master/visual-vocabulary" target="_blank">Visual Vocabulary</a></li>
<li><a href="https://datavizcatalogue.com/" target="_blank">Data Visualisation Catalogue</a> </li>
<li>From Data to Viz's <a href="https://www.data-to-viz.com/" target="_blank">Chart Explorer</a> </li>
</ol>
</p>
<div class="img-standard">
<img src="pics/VisualVocabulary.gif" alt="gif" />
</div>
</section>
<!-- SECTION 4 Best Practice -->
<section id="designing_thoughtfully" data-background="#1bb580ff" data-menu-title="Designing Thoughtfully">
<div class="title_container">
<h1 class="white">Designing Thoughtfully</h1>
</div>
</section>
<section id="thoughtful_viz" data-menu-title="Design Considerations">
<div class="header_bar centregreen">
<div class="header_title">04</div>
</div>
<h4>Design Considerations for THOUGHTFUL VISUALISATIONS</h4>
<p class="text-small">The way we communicate about the COVID-19 pandemic has the potential to shape our audience's perception of risk and safety.
</p>
<p class="text-small">The design choices we make influence how our audience interprets our underlying data. This is because through our design we choose to emphasise certain aspects of the data while potentially obscuring others. While there are no hard and fast rules for making design choices, the following are a few considerations to think about when creating COVID-19 data visualisations.
</p>
</section>
<section id="thoughtful_colours" data-menu-title="Choosing Colours">
<div class="header_bar centregreen">
<div class="header_title">04</div>
</div>
<h4>Consider the Connotation of Colours</h4>
<p class="text-small">Red is a colour that grabs a reader’s attention and is often used to alert and highlight. A map full of overlapping red circles may communicate alarm and, as a result, may distract from other messages. Consider the connotation of colours when creating COVID-19 visualisations.
</p>
<div class="img-standard">
<img src="pics/who_map.png" alt="colour map" />
<p class="image-text"> Source: <a href="https://covid19.who.int/" target="_blank">World Health Organization Dashboard</a>
</p>
</div>
</section>
<section>
<section id="thoughtful_log" data-menu-title="Using a Logarithmic Scale">
<div class="header_bar centregreen">
<div class="header_title">04</div>
</div>
<h4>Consider Using a Logarithmic Scale</h4>
<p class="text-small">Plotting exponential growth on a linear scale can obscure important details such as the rate of growth. In the example below, the U.S. and Italy look like they are on similar trajectories on the linear scale whereas it is more apparent on the logarithmic scale that COVID-19 cases are continuing to grow in the U.S. while Italy is seeing a slowdown.
</p>
<div class="img-standard">
<img src="pics/linear_log.png" alt="log" />
<p class="image-text"> Source: <a href="https://www.nytimes.com/2020/03/20/health/coronavirus-data-logarithm-chart.html?auth=login-email&login=email" target="_blank">Kenneth Chang</a>
</br> <b style="color:#333">Press down to learn more.</b>
</p>
</div>
</section>
<section id="thoughtful_log_about" data-menu-title="About the Logarithmic Scale">
<div class="header_bar centregreen">
<div class="header_title">04</div>
</div>
<h4>Linear and Logarithmic Scales</h4>
<p class="text-small">The most common form of a line graph uses a linear scale. Along the Y axis, the numbers progress in a linear form: 1, 2, 3, or 10, 20, 30, etc.
</p>
<p class="text-small">On a logarithmic scale, numbers on the Y axis don’t increase in equal increments. Each interval increases by a set factor – often 10 but could be a factor of 3 or 350 or 3,500, etc.
</p>
<p class="text-small">A logarithmic scale prevents large numbers from skewing a whole graph and is good for measuring rates of change, particularly rates of growth (e.g. number of cases, deaths, etc. over time). In the case of COVID-19, that is growing exponentially, it will often make sense to use a logarithmic scale because the cumulative case trend line can “keep up” with the numbers instead of shooting off the chart. Read more about logarithmic scales at <a href="https://theconversation.com/the-bar-necessities-5-ways-to-understand-coronavirus-graphs-135537" target="_blank">The Conversation.</a>
</p>
</section>
</section>
<section>
<section id="thoughtful_relative_absolute" data-menu-title="Relative & Absolute">
<div class="header_bar centregreen">
<div class="header_title">04</div>
</div>
<h4>Know the Difference between Relative and Absolute Values</h4>
<p class="text-small long-para"> With the message you want to convey in mind, explore different ways to represent the data you are visualising. When comparing across countries or regions, consider how your visualisation will change based on your choice to use absolute numbers (total number of confirmed cases) versus relative numbers (number of confirmed cases per X thousand people).
</p>
<p class="text-small long-para">In their purest sense, an absolute value is a value compared to nothing, and a relative value is created when two absolute values are compared to each other. Relative values are often presented as percentages, proportions, rates, etc., and are good for providing a reference for readers to judge magnitude and to compare magnitude across different categories.
</p>
<p class="text-small long-para">The choice to use one or the other depends on the message you are trying to convey.
</p>
<p class="text-bottom"> Press down for examples.</p>
</section>
<section id="responsible_relative" data-menu-title="Relative Values">
<div class="header_bar centregreen">
<div class="header_title">04</div>
</div>
<h4>Using Relative COVID-19 Numbers</h4>
<p class="text-small">The choropleth map is an example of a visualisation that works best with relative numbers because they provide a common reference to compare magnitude across countries or regions.
</p>
<div class="img-standard">
<img src="pics/relative_map.png" alt="log" />
<p class="image-text"> Source: <a href="https://ourworldindata.org/grapher/total-confirmed-cases-of-covid-19-per-million-people" target="_blank">Our World in Data</a>
</br> <b style="color:#333">Press down to learn more.</b>
</p>
</div>
</section>
<section id="thoughtful_absolute" data-menu-title="Absolute Values">
<div class="header_bar centregreen">
<div class="header_title">04</div>
</div>
<h4>Using Absolute COVID-19 Numbers</h4>
<p class="text-small">COVID-19 logarithmic line graphs often use absolute numbers, why? The emphasis when using a logarithmic scale is the exponential change over time, or trajectory, rather than the magnitude.
</p>
<div class="img-standard">
<img src="pics/absolute_log_ft.png" alt="log" />
<p class="image-text"> Source: <a href="https://www.ft.com/coronavirus-latest" target="_blank">John Burn-Murdoch at the Financial Times</a>
</p>
</div>
</section>
</section>
<section>
<section id="thoughtful_uncertainty" data-menu-title="Communicate Uncertainty">
<div class="header_bar centregreen">
<div class="header_title">04</div>
</div>
<h4>Communicate Uncertainty</h4>
<p class="text-small">There is a great deal of uncertainty around COVID-19, and this is present in the data. Try to find ways to convey that uncertainty in your visualisation. For example, adding the simple phrase ‘we know of X cases’ helps convey the critical message that the data we have is incomplete.
</p>
<div class="img-standard">
<img src="pics/weknowof_map.png" alt="weknowof" />
<p class="image-text"> Source: <a href="https://blog.datawrapper.de/coronaviruscharts/" target="_blank">Lisa Charlotte Rost</a>
</br> <b>Press down to learn more</b>
</p>
</div>
</section>
<section id="thoughtful_uncertainty_date&source" data-menu-title="Communicate Date & Source">
<div class="header_bar centregreen">
<div class="header_title">04</div>
</div>
<h4>Communicate the Date & Source Clearly</h4>
<p class="text-small"> With the velocity of changes in the COVID pandemic, providing readers information on the date that data pertains to and the frequency of updates helps them understand how current a visualisation is.
</p>
<div class="img-standard">
<img src="pics/date_source.png" alt="date_source" />
<p class="image-text"> Source: <a href="https://blog.datawrapper.de/coronaviruscharts/" target="_blank">Lisa Charlotte Rost</a>
</p>
</div>
</section>
</section>
<section id="get_to_point" data-menu-title="Get to the Point">
<div class="header_bar centregreen">
<div class="header_title">04</div>
</div>
<h4>Get to the Point</h4>
<p class="text-small">Sometimes charts get in the way of the message you are trying to convey. Consider if it is best to present a simple visual number(s) that you want to emphasise, to get to the point.
</p>
<div class="img-standard">
<img src="pics/get_to_point.png" alt="1Number" />
<p class="image-text"> Source: <a href="https://www.vox.com/science-and-health/2020/3/18/21184992/coronavirus-covid-19-flu-comparison-chart" target="_blank">Vox.com</a>
</p>
</div>
</section>
<!-- SECTION 5 Do it Yourself -->
<section id="do_it_yourself" data-background="#007ce0" data-menu-title="Create Your Own Visualisation">
<div class="title_container">
<h1 class="white">Create your own Visualisation</h1>
</div>
</section>
<section id="doityourself_about" data-menu-title="Do It Yourself">
<div class="header_bar centreblue">
<div class="header_title">05</div>
</div>
<h4>Do it yourself</h4>
<p class="text-small"> It’s time to create your own visualisation. You have learned why we create visualisations, some considerations to make when visualising COVID-19 data and how to use various charts to highlight and communicate different relationships.
</p>
<p class="text-small">In this final section, we'll walk through how to create a logarithmic line graph. Included in this is a downloadable step-by-step guide.
</p>
<p class="text-small">We use Excel for this demo. If you'd like to learn how to create the same graph using R, check out <a href="https://humanitarian-user-group.github.io/post/quick-tips-for-visualising-data/" target="_blank">this tutorial</a> written by Edourard Legoupil of <a href="https://humanitarian-user-group.github.io/post/index.html" target="_blank"> the Humanitarian R User Group</a>
</p>
</section>
<section>
<section id="create_line" data-menu-title="Line Graph in Excel">
<div class="header_bar centreblue">
<div class="header_title">05</div>
</div>
<h4>Create A Line Graph in Excel</h4>
<p class="image-text"> Download our <em><a href="https://drive.google.com/file/d/1z0V_eRDuDy5i0F0_fOUZ1FOVLoOjnXuL/view" target="_blank">Step-By-Step Guide to Creating a Line Graph.</a></em>
</p>
<p class="text-small">
<ol start="1">
<li class= "text-small">Download the <a href="https://data.humdata.org/dataset/coronavirus-covid-19-cases-and-deaths" target="_blank"> data from HDX;</a></li>
<li class="text-small"> Prepare & structure your data;
</li>
<li class="text-small"> Insert a line graph;
</li>
<li class="text-small left-align-list" > Explore using a logarithmic scale; and</li>
<li class="text-small"> Customise the design.</li>
</ol>
</p>
<p class="text-bottom"> Press down to walk through the steps together.</p>
</section>
<section id="create_line_1">
<div class="header_bar centreblue">
<div class="header_title">05</div>
</div>
<p class="text-small"> <b>Download data:</b> Click on the video below to learn how to find and download data from HDX.
</p>
<video controls autoplay>
<source data-autoplay src="vid/download_data.mp4" type="video/mp4"/>
</video>
<p class="image-text"><b style="color:#333"> Press down for the next step.</b>
</p>
</section>
<section id="create_line_2">
<div class="header_bar centreblue">
<div class="header_title">05</div>
</div>
<p class="text-small"> <b>Prepare & structure your data:</b> Click on the video below to learn how to organise, filter and structure your data in order to create a line graph visualising the growth in COVID-19 cases.
</p>
<video controls autoplay>
<source data-autoplay src="vid/linegraph_sc1.mp4" type="video/mp4" />
</video>
<p class="image-text"> <b style="color:#333"> Press down for the next step.</b>
</p>
</section>
<section id="create_line_3">
<div class="header_bar centreblue">
<div class="header_title">05</div>
</div>
<p class="text-small"> <b>Insert a line graph:</b> Next, watch the video below to learn how to insert a line graph as well as how to format the date axis in your chart.
</p>
<video controls autoplay>
<source data-autoplay src="vid/linegraph_sc2.mp4" type="video/mp4" />
</video>
<p class="image-text"> <b style="color:#333"> Press down for the next step.</b>
</p>
</section>
<section id="create_line_4">
<div class="header_bar centreblue">
<div class="header_title">05</div>
</div>
<p class="text-small"> <b>Explore using a logarithmic scale:</b> Watch the video below to learn how to format your Y axis using a logarithmic scale.
</p>
<video controls autoplay>
<source data-autoplay src="vid/linegraph_sc3.mp4" type="video/mp4" />
</video>
<p class="image-text"> <b style="color:#333"> Press down for the next step.</b>
</p>
</section>
<section id="create_line_5">
<div class="header_bar centreblue">
<div class="header_title">05</div>
</div>
<p class="text-small"> <b>Customise the design:</b> Now it’s time to customise the visualisation! Watch the video below to learn how to add text, change fonts and reduce clutter in your graph.
</p>
<video controls autoplay>
<source data-autoplay src="vid/linegraph_vid4_update_sm.mp4" type="video/mp4" />
</video>
</section>
</section>
<section id="quiz" data-menu-title="Test Your Knowledge">
<div class="header_bar centregreen">
<div class="header_title">06</div>
</div>
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSe6Wrf-HKCcP3UX38E80JvEM1HaRUfppf2ZQYtFWcVQ9h-6Bw/viewform?embedded=true" width="1000" height="600" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>
</section>
<section id="annex">
<div class="header_bar centregreen">
<div class="header_title">Annex</div>
</div>
<h4>Additional Resources</h4>
<p class="text-small sm-mobile">
</br>
<ol start="1">
<li class ="text-small sm-mobile">The OCHA Centre for Humanitarian Data's <a href="https://centre.humdata.org/data-literacy/" target="_blank"> Data Literacy Page</a>.</li>
<li class="text-small sm-mobile"> The resources in this lesson (videos, slides and step-by-step guide) are available for download and offline use in <a href="https://drive.google.com/drive/u/1/folders/1Nz1s_ehItFQCeO3lc4huo_2vGFOg1trg" target="_blank"> this Google Drive folder</a>.
</li>
<li class="text-small sm-mobile">Tableau's <a href="https://www.tableau.com/about/blog/2020/3/ten-considerations-you-create-another-chart-about-covid-19" target="_blank"> 10 considerations before you create another chart about COVID-19</a>.
</li>
<li class="text-small sm-mobile"> Data Wrapper's <a href="https://blog.datawrapper.de/coronaviruscharts/" target="_blank"> 17 (or so) responsible live visualizations about the coronavirus, for you to use</a>.
</li>
<li class="text-small sm-mobile"> Vox.com's video on <a href="https://www.youtube.com/watch?v=O-3Mlj3MQ_Q" target= "_blank"> how coronavirus charts can mislead us</a>.</li>
</ol>
</p>
</section>
<section id="glossary">
<div class="header_bar centregreen">
<div class="header_title">Annex</div>
</div>
<h4>Glossary of Terms</h4>
<p class ="text-ex-small">
<ul>
<li class="text-ex-small"> <b>Incidence:</b> The number of new cases of a health event (such as development of a disease, or reaction to a medicine) that occur during a specific time period, usually a year, in a specified population. Incidence is therefore also a measure of the risk of experiencing the health event during a certain period of time.<a href="https://www.eupati.eu/glossary/incidence/" target="_blank"> European Patients' Academy</a></li>
<li class ="text-ex-small"> <b>Prevalence:</b> Prevalence is the proportion of a population found to have a condition (typically a disease or a risk factor such as smoking). Prevalence can be measured at a particular point in time (point prevalence), or over a specified period such as a year (period prevalence). <a href="https://www.eupati.eu/glossary/prevalence/" target="_blank"> European Patients' Academy</a></li>
<li class ="text-ex-small"><b>Time Series:</b> A series of data points ordered in time. <a href="https://towardsdatascience.com/almost-everything-you-need-to-know-about-time-series-860241bdc578" target="_blank"> Towards Data Science</a></li>
<li class ="text-ex-small"><b>Data Dictionary:</b> A data dictionary is used to catalogue and communicate the structure and content of data, and provides meaningful descriptions for individually named data objects. Data Strategy for the Secretary-General for Action by Everyone, Everywhere & <a href="https://www.usgs.gov/products/data-and-tools/data-management/data-dictionaries" target="_blank"> U.S. Geological Survey</a></li>
<li class ="text-ex-small"><b>Metadata:</b> Metadata is additional information or documentation about your dataset that will make it easier for others to understand and put your data into context.<a href="https://centre.humdata.org/providing-metadata-for-your-datasets-on-hdx/" target="_blank"> OCHA Centre for Humanitarian Data</a></li>
</ul>
</p>
</section>
</div>
</div>
<script src="js/reveal.js"></script>
<script>
// More info about config & dependencies:
// - https://github.com/hakimel/reveal.js#configuration
// - https://github.com/hakimel/reveal.js#dependencies
Reveal.initialize({
hash: true,
center: false,
width: "100%",
dependencies: [
{ src: 'plugin/markdown/marked.js' },
{ src: 'plugin/markdown/markdown.js' },
{ src: 'plugin/highlight/highlight.js' },
{ src: 'plugin/notes/notes.js', async: true },
{ src: 'plugin/menu/menu.js' }
],
menu: {
hideMissingTitles: true
}
});
</script>
<script src="js/mixpanel-tracking.js"></script>
</body>
</html>