]> code.communitydata.science - ml_measurement_error_public.git/blob - presentations/ica_hackathon_2022/resources/template.html
Add exploratory data analysis to come up with a real-data example.
[ml_measurement_error_public.git] / presentations / ica_hackathon_2022 / resources / template.html
1 <!DOCTYPE html>
2 <html$if(lang)$ lang="$lang$"$endif$$if(dir)$ dir="$dir$"$endif$>
3 <head>
4   <meta charset="utf-8">
5   <meta name="generator" content="pandoc">
6 $for(author-meta)$
7   <meta name="author" content="$author-meta$" />
8 $endfor$
9 $if(date-meta)$
10   <meta name="dcterms.date" content="$date-meta$" />
11 $endif$
12 $if(keywords)$
13   <meta name="keywords" content="$for(keywords)$$keywords$$sep$, $endfor$">
14 $endif$
15   <title>$if(title-prefix)$$title-prefix$ – $endif$$pagetitle$</title>
16   <meta name="apple-mobile-web-app-capable" content="yes">
17   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
18   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
19   <link rel="stylesheet" href="$revealjs-url$/css/reveal.css"/>
20
21 $if(highlightjs)$
22 <link rel="stylesheet"
23       href="$highlightjs$/$if(highlightjs-theme)$$highlightjs-theme$$else$default$endif$.css"
24       $if(html5)$$else$type="text/css" $endif$/>
25 <script src="$highlightjs$/highlight.js"></script>
26 $endif$
27
28 $if(highlighting-css)$
29 <style type="text/css">
30 $highlighting-css$
31 </style>
32 $endif$
33
34 $if(theme)$
35 <link rel="stylesheet" href="$revealjs-url$/css/theme/$theme$.css" id="theme">
36 $endif$
37
38 $if(theme-dark)$
39 <style type="text/css">
40 .reveal section img {
41   background: rgba(255, 255, 255, 0.85);
42 }
43 </style>
44 $endif$
45
46
47
48   <!-- some tweaks to reveal css -->
49   <style type="text/css">
50     .reveal h1 { font-size: 2.0em; }
51     .reveal h2 { font-size: 1.5em;  }
52     .reveal h3 { font-size: 1.25em;     }
53     .reveal h4 { font-size: 1em;        }
54
55     .reveal .slides>section,
56     .reveal .slides>section>section {
57       padding: 0px 0px;
58     }
59
60 $if(center)$
61
62 $else$
63      .reveal .title {
64         margin-top: 125px;
65         margin-bottom: 50px;
66      }
67 $endif$
68
69     .reveal table {
70       border-width: 1px;
71       border-spacing: 2px;
72       border-style: dotted;
73       border-color: gray;
74       border-collapse: collapse;
75       font-size: 0.7em;
76     }
77
78     .reveal table th {
79       border-width: 1px;
80       padding-left: 10px;
81       padding-right: 25px;
82       font-weight: bold;
83       border-style: dotted;
84       border-color: gray;
85     }
86
87     .reveal table td {
88       border-width: 1px;
89       padding-left: 10px;
90       padding-right: 25px;
91       border-style: dotted;
92       border-color: gray;
93     }
94
95 $if(plugin-menu)$
96 $if(plugin-chalkboard)$
97     .reveal .slide-menu-button {
98       left: 105px !important;
99     }
100 $endif$
101 $endif$
102
103   </style>
104
105     <style type="text/css">code{white-space: pre;}</style>
106
107 $if(css)$
108 $for(css)$
109     <link rel="stylesheet" href="$css$"/>
110 $endfor$
111 $endif$
112
113 <!-- Printing and PDF exports -->
114 <script id="paper-css" type="application/dynamic-css">
115
116 /* Default Print Stylesheet Template
117    by Rob Glazebrook of CSSnewbie.com
118    Last Updated: June 4, 2008
119
120    Feel free (nay, compelled) to edit, append, and
121    manipulate this file as you see fit. */
122
123
124 @media print {
125
126         /* SECTION 1: Set default width, margin, float, and
127            background. This prevents elements from extending
128            beyond the edge of the printed page, and prevents
129            unnecessary background images from printing */
130         html {
131                 background: #fff;
132                 width: auto;
133                 height: auto;
134                 overflow: visible;
135         }
136         body {
137                 background: #fff;
138                 font-size: 20pt;
139                 width: auto;
140                 height: auto;
141                 border: 0;
142                 margin: 0 5%;
143                 padding: 0;
144                 overflow: visible;
145                 float: none !important;
146         }
147
148         /* SECTION 2: Remove any elements not needed in print.
149            This would include navigation, ads, sidebars, etc. */
150         .nestedarrow,
151         .controls,
152         .fork-reveal,
153         .share-reveal,
154         .state-background,
155         .reveal .progress,
156         .reveal .backgrounds {
157                 display: none !important;
158         }
159
160         /* SECTION 3: Set body font face, size, and color.
161            Consider using a serif font for readability. */
162         body, p, td, li, div {
163                 font-size: 20pt!important;
164                 font-family: Georgia, "Times New Roman", Times, serif !important;
165                 color: #000;
166         }
167
168         /* SECTION 4: Set heading font face, sizes, and color.
169            Differentiate your headings from your body text.
170            Perhaps use a large sans-serif for distinction. */
171         h1,h2,h3,h4,h5,h6 {
172                 color: #000!important;
173                 height: auto;
174                 line-height: normal;
175                 font-family: Georgia, "Times New Roman", Times, serif !important;
176                 text-shadow: 0 0 0 #000 !important;
177                 text-align: left;
178                 letter-spacing: normal;
179         }
180         /* Need to reduce the size of the fonts for printing */
181         h1 { font-size: 28pt !important;  }
182         h2 { font-size: 24pt !important; }
183         h3 { font-size: 22pt !important; }
184         h4 { font-size: 22pt !important; font-variant: small-caps; }
185         h5 { font-size: 21pt !important; }
186         h6 { font-size: 20pt !important; font-style: italic; }
187
188         /* SECTION 5: Make hyperlinks more usable.
189            Ensure links are underlined, and consider appending
190            the URL to the end of the link for usability. */
191         a:link,
192         a:visited {
193                 color: #000 !important;
194                 font-weight: bold;
195                 text-decoration: underline;
196         }
197         /*
198         .reveal a:link:after,
199         .reveal a:visited:after {
200                 content: " (" attr(href) ") ";
201                 color: #222 !important;
202                 font-size: 90%;
203         }
204         */
205
206
207         /* SECTION 6: more reveal.js specific additions by @skypanther */
208         ul, ol, div, p {
209                 visibility: visible;
210                 position: static;
211                 width: auto;
212                 height: auto;
213                 display: block;
214                 overflow: visible;
215                 margin: 0;
216                 text-align: left !important;
217         }
218         .reveal pre,
219         .reveal table {
220                 margin-left: 0;
221                 margin-right: 0;
222         }
223         .reveal pre code {
224                 padding: 20px;
225                 border: 1px solid #ddd;
226         }
227         .reveal blockquote {
228                 margin: 20px 0;
229         }
230         .reveal .slides {
231                 position: static !important;
232                 width: auto !important;
233                 height: auto !important;
234
235                 left: 0 !important;
236                 top: 0 !important;
237                 margin-left: 0 !important;
238                 margin-top: 0 !important;
239                 padding: 0 !important;
240                 zoom: 1 !important;
241
242                 overflow: visible !important;
243                 display: block !important;
244
245                 text-align: left !important;
246                 -webkit-perspective: none;
247                    -moz-perspective: none;
248                     -ms-perspective: none;
249                         perspective: none;
250
251                 -webkit-perspective-origin: 50% 50%;
252                    -moz-perspective-origin: 50% 50%;
253                     -ms-perspective-origin: 50% 50%;
254                         perspective-origin: 50% 50%;
255         }
256         .reveal .slides section {
257                 visibility: visible !important;
258                 position: static !important;
259                 width: auto !important;
260                 height: auto !important;
261                 display: block !important;
262                 overflow: visible !important;
263
264                 left: 0 !important;
265                 top: 0 !important;
266                 margin-left: 0 !important;
267                 margin-top: 0 !important;
268                 padding: 60px 20px !important;
269                 z-index: auto !important;
270
271                 opacity: 1 !important;
272
273                 page-break-after: always !important;
274
275                 -webkit-transform-style: flat !important;
276                    -moz-transform-style: flat !important;
277                     -ms-transform-style: flat !important;
278                         transform-style: flat !important;
279
280                 -webkit-transform: none !important;
281                    -moz-transform: none !important;
282                     -ms-transform: none !important;
283                         transform: none !important;
284
285                 -webkit-transition: none !important;
286                    -moz-transition: none !important;
287                     -ms-transition: none !important;
288                         transition: none !important;
289         }
290         .reveal .slides section.stack {
291                 padding: 0 !important;
292         }
293         .reveal section:last-of-type {
294                 page-break-after: avoid !important;
295         }
296         .reveal section .fragment {
297                 opacity: 1 !important;
298                 visibility: visible !important;
299
300                 -webkit-transform: none !important;
301                    -moz-transform: none !important;
302                     -ms-transform: none !important;
303                         transform: none !important;
304         }
305         .reveal section img {
306                 display: block;
307                 margin: 15px 0px;
308                 background: rgba(255,255,255,1);
309                 border: 1px solid #666;
310                 box-shadow: none;
311         }
312
313         .reveal section small {
314                 font-size: 0.8em;
315         }
316
317 }  
318 </script>
319
320
321 <script id="pdf-css" type="application/dynamic-css">
322     
323 /**
324  * This stylesheet is used to print reveal.js
325  * presentations to PDF.
326  *
327  * https://github.com/hakimel/reveal.js#pdf-export
328  */
329
330 * {
331         -webkit-print-color-adjust: exact;
332 }
333
334 body {
335         margin: 0 auto !important;
336         border: 0;
337         padding: 0;
338         float: none !important;
339         overflow: visible;
340 }
341
342 html {
343         width: 100%;
344         height: 100%;
345         overflow: visible;
346 }
347
348 /* Remove any elements not needed in print. */
349 .nestedarrow,
350 .reveal .controls,
351 .reveal .progress,
352 .reveal .playback,
353 .reveal.overview,
354 .fork-reveal,
355 .share-reveal,
356 .state-background {
357         display: none !important;
358 }
359
360 h1, h2, h3, h4, h5, h6 {
361         text-shadow: 0 0 0 #000 !important;
362 }
363
364 .reveal pre code {
365         overflow: hidden !important;
366         font-family: Courier, 'Courier New', monospace !important;
367 }
368
369 ul, ol, div, p {
370         visibility: visible;
371         position: static;
372         width: auto;
373         height: auto;
374         display: block;
375         overflow: visible;
376         margin: auto;
377 }
378 .reveal {
379         width: auto !important;
380         height: auto !important;
381         overflow: hidden !important;
382 }
383 .reveal .slides {
384         position: static;
385         width: 100%;
386         height: auto;
387
388         left: auto;
389         top: auto;
390         margin: 0 !important;
391         padding: 0 !important;
392
393         overflow: visible;
394         display: block;
395
396         -webkit-perspective: none;
397            -moz-perspective: none;
398             -ms-perspective: none;
399                 perspective: none;
400
401         -webkit-perspective-origin: 50% 50%; /* there isn't a none/auto value but 50-50 is the default */
402            -moz-perspective-origin: 50% 50%;
403             -ms-perspective-origin: 50% 50%;
404                 perspective-origin: 50% 50%;
405 }
406
407 .reveal .slides section {
408         page-break-after: always !important;
409
410         visibility: visible !important;
411         position: relative !important;
412         display: block !important;
413         position: relative !important;
414
415         margin: 0 !important;
416         padding: 0 !important;
417         box-sizing: border-box !important;
418         min-height: 1px;
419
420         opacity: 1 !important;
421
422         -webkit-transform-style: flat !important;
423            -moz-transform-style: flat !important;
424             -ms-transform-style: flat !important;
425                 transform-style: flat !important;
426
427         -webkit-transform: none !important;
428            -moz-transform: none !important;
429             -ms-transform: none !important;
430                 transform: none !important;
431 }
432
433 .reveal section.stack {
434         margin: 0 !important;
435         padding: 0 !important;
436         page-break-after: avoid !important;
437         height: auto !important;
438         min-height: auto !important;
439 }
440
441 .reveal img {
442         box-shadow: none;
443 }
444
445 .reveal .roll {
446         overflow: visible;
447         line-height: 1em;
448 }
449
450 /* Slide backgrounds are placed inside of their slide when exporting to PDF */
451 .reveal section .slide-background {
452         display: block !important;
453         position: absolute;
454         top: 0;
455         left: 0;
456         width: 100%;
457         z-index: -1;
458 }
459
460 /* All elements should be above the slide-background */
461 .reveal section>* {
462         position: relative;
463         z-index: 1;
464 }
465
466 /* Display slide speaker notes when 'showNotes' is enabled */
467 .reveal .speaker-notes-pdf {
468         display: block;
469         width: 100%;
470         max-height: none;
471         left: auto;
472         top: auto;
473         z-index: 100;
474 }
475
476 /* Display slide numbers when 'slideNumber' is enabled */
477 .reveal .slide-number-pdf {
478         display: block;
479         position: absolute;
480         font-size: 14px;
481 }
482
483 </script>
484
485
486 <script>
487 var style = document.createElement( 'style' );
488 style.type = 'text/css';
489 var style_script_id = window.location.search.match( /print-pdf/gi ) ? 'pdf-css' : 'paper-css';
490 var style_script = document.getElementById(style_script_id).text;
491 style.innerHTML = style_script;
492 document.getElementsByTagName('head')[0].appendChild(style);
493 </script>
494
495 $for(header-includes)$
496     $header-includes$
497 $endfor$
498 </head>
499 <body>
500 $for(include-before)$
501 $include-before$
502 $endfor$
503   <div class="reveal">
504     <div class="slides">
505
506
507
508 <!--
509 $if(title)$
510 <section>
511     <h1 class="title">$title$</h1>
512 $if(subtitle)$
513   <h1 class="subtitle">$subtitle$</h1>
514 $endif$
515 $for(author)$
516     <h2 class="author">$author$</h2>
517 $endfor$
518 $if(date)$
519     <h3 class="date">$date$</h3>
520 $endif$
521 </section>
522 $endif$
523 $if(toc)$
524 <section id="$idprefix$TOC">
525 $toc$
526 </section>
527 $endif$
528 -->
529
530 $body$
531     </div>
532   </div>
533
534   <script src="$revealjs-url$/lib/js/head.min.js"></script>
535   <script src="$revealjs-url$/js/reveal.js"></script>
536
537   <script>
538
539       // Full list of configuration options available at:
540       // https://github.com/hakimel/reveal.js#configuration
541       Reveal.initialize({
542 $if(controls)$
543         // Display controls in the bottom right corner
544         controls: $controls$,
545 $endif$
546 $if(progress)$
547         // Display a presentation progress bar
548         progress: $progress$,
549 $endif$
550 $if(slideNumber)$
551         // Display the page number of the current slide
552         slideNumber: $slideNumber$,
553 $endif$
554 $if(history)$
555         // Push each slide change to the browser history
556         history: $history$,
557 $endif$
558 $if(keyboard)$
559         // Enable keyboard shortcuts for navigation
560         keyboard: $keyboard$,
561 $endif$
562 $if(overview)$
563         // Enable the slide overview mode
564         overview: $overview$,
565 $endif$
566 $if(center)$
567         // Vertical centering of slides
568         center: $center$,
569 $endif$
570 $if(touch)$
571         // Enables touch navigation on devices with touch input
572         touch: $touch$,
573 $endif$
574 $if(loop)$
575         // Loop the presentation
576         loop: $loop$,
577 $endif$
578 $if(rtl)$
579         // Change the presentation direction to be RTL
580         rtl: $rtl$,
581 $endif$
582 $if(fragments)$
583         // Turns fragments on and off globally
584         fragments: $fragments$,
585 $endif$
586 $if(embedded)$
587         // Flags if the presentation is running in an embedded mode,
588         // i.e. contained within a limited portion of the screen
589         embedded: $embedded$,
590 $endif$
591 $if(help)$
592         // Flags if we should show a help overlay when the questionmark
593         // key is pressed
594         help: $help$,
595 $endif$
596 $if(autoSlide)$
597         // Number of milliseconds between automatically proceeding to the
598         // next slide, disabled when set to 0, this value can be overwritten
599         // by using a data-autoslide attribute on your slides
600         autoSlide: $autoSlide$,
601 $endif$
602 $if(autoSlideStoppable)$
603         // Stop auto-sliding after user input
604         autoSlideStoppable: $autoSlideStoppable$,
605 $endif$
606 $if(mouseWheel)$
607         // Enable slide navigation via mouse wheel
608         mouseWheel: $mouseWheel$,
609 $endif$
610 $if(hideAddressBar)$
611         // Hides the address bar on mobile devices
612         hideAddressBar: $hideAddressBar$,
613 $endif$
614 $if(previewLinks)$
615         // Opens links in an iframe preview overlay
616         previewLinks: $previewLinks$,
617 $endif$
618 $if(transition)$
619         // Transition style
620         transition: '$transition$', // none/fade/slide/convex/concave/zoom
621 $endif$
622 $if(transitionSpeed)$
623         // Transition speed
624         transitionSpeed: '$transitionSpeed$', // default/fast/slow
625 $endif$
626 $if(backgroundTransition)$
627         // Transition style for full page slide backgrounds
628         backgroundTransition: '$backgroundTransition$', // none/fade/slide/convex/concave/zoom
629 $endif$
630 $if(viewDistance)$
631         // Number of slides away from the current that are visible
632         viewDistance: $viewDistance$,
633 $endif$
634 $if(parallaxBackgroundImage)$
635         // Parallax background image
636         parallaxBackgroundImage: '$parallaxBackgroundImage$', // e.g. "'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg'"
637 $endif$
638 $if(parallaxBackgroundSize)$
639         // Parallax background size
640         parallaxBackgroundSize: '$parallaxBackgroundSize$', // CSS syntax, e.g. "2100px 900px"
641 $endif$
642 $if(parallaxBackgroundHorizontal)$
643         // Amount to move parallax background (horizontal and vertical) on slide change
644         // Number, e.g. 100
645         parallaxBackgroundHorizontal: '$parallaxBackgroundHorizontal$',
646 $endif$
647 $if(parallaxBackgroundVertical)$
648         parallaxBackgroundVertical: '$parallaxBackgroundVertical$',
649 $endif$
650 $if(width)$
651         // The "normal" size of the presentation, aspect ratio will be preserved
652         // when the presentation is scaled to fit different resolutions. Can be
653         // specified using percentage units.
654         width: $width$,
655 $endif$
656 $if(height)$
657         height: $height$,
658 $endif$
659 $if(margin)$
660         // Factor of the display size that should remain empty around the content
661         margin: $margin$,
662 $endif$
663 $if(minScale)$
664         // Bounds for smallest/largest possible scale to apply to content
665         minScale: $minScale$,
666 $endif$
667 $if(maxScale)$
668         maxScale: $maxScale$,
669 $endif$
670
671 $if(plugin-menu)$
672         menu: {
673 $if(menu-side)$
674           side: $menu-side$,
675 $endif$   
676 $if(menu-numbers)$
677           numbers: $menu-numbers$,
678 $endif$    
679 $if(menu-titleSelector)$
680           titleSelector: $menu-titleSelector$,
681 $endif$    
682 $if(menu-hideMissingTitles)$
683           hideMissingTitles: $menu-hideMissingTitles$,
684 $endif$    
685 $if(menu-markers)$
686           markers: $menu-markers$,
687 $endif$    
688 $if(menu-openButton)$
689           openButton: $menu-openButton$,
690 $endif$    
691 $if(menu-openSlideNumber)$
692           openSlideNumber: $menu-openSlideNumber$,
693 $endif$    
694 $if(menu-keyboard)$
695           keyboard: $menu-keyboard$,
696 $endif$ 
697           custom: false,
698           themes: false,
699           transitions: false
700         },
701
702 $endif$
703
704 $if(plugin-chalkboard)$
705
706         chalkboard: {
707 $if(chalkboard-src)$
708           src: $chalkboard-src$,
709 $endif$
710 $if(chalkboard-readOnly)$
711           readOnly: $chalkboard-readOnly$,
712 $endif$
713 $if(chalkboard-toggleNotesButton)$
714           toggleNotesButton: $chalkboard-toggleNotesButton$,
715 $endif$
716 $if(chalkboard-toggleChalkboardButton)$
717           toggleChalkboardButton: $chalkboard-toggleChalkboardButton$,
718 $endif$
719 $if(chalkboard-transition)$
720           transition: $chalkboard-transition$,
721 $endif$
722 $if(chalkboard-theme)$
723           theme: $chalkboard-theme$,
724 $endif$
725 $if(chalkboard-color)$
726           color: $chalkboard-color$,
727 $endif$
728 $if(chalkboard-background)$
729           background: $chalkboard-background$,
730 $endif$
731 $if(chalkboard-pen)$
732           pen: $chalkboard-pen$,
733 $endif$
734         },
735
736         keyboard: {
737           67: function() { RevealChalkboard.toggleNotesCanvas() },    // toggle notes canvas when 'c' is pressed
738           66: function() { RevealChalkboard.toggleChalkboard() }, // toggle chalkboard when 'b' is pressed
739           46: function() { RevealChalkboard.clear() },    // clear chalkboard when 'DEL' is pressed
740            8: function() { RevealChalkboard.reset() },    // reset chalkboard data on current slide when 'BACKSPACE' is pressed
741           68: function() { RevealChalkboard.download() }, // downlad recorded chalkboard drawing when 'd' is pressed
742         },
743 $endif$
744
745         // Optional reveal.js plugins
746         dependencies: [
747 $if(plugin-notes)$
748           { src: '$revealjs-url$/plugin/notes/notes.js', async: true },
749 $endif$
750 $if(plugin-search)$
751           { src: '$revealjs-url$/plugin/search/search.js', async: true },
752 $endif$
753 $if(plugin-zoom)$
754           { src: '$revealjs-url$/plugin/zoom-js/zoom.js', async: true },
755 $endif$
756 $if(plugin-chalkboard)$
757           { src: '$revealjs-url$/plugin/chalkboard/chalkboard.js', async: true },
758 $endif$
759 $if(plugin-menu)$
760           { src: '$revealjs-url$/plugin/menu/menu.js', async: true },
761 $endif$
762         ]
763       });
764     </script>
765 $if(mathjax-url)$
766   <!-- dynamically load mathjax for compatibility with self-contained -->
767   <script>
768     (function () {
769       var script = document.createElement("script");
770       script.type = "text/javascript";
771       script.src  = "$mathjax-url$";
772       document.getElementsByTagName("head")[0].appendChild(script);
773     })();
774   </script>
775 $endif$
776
777 <script>
778   (function() {
779     if (window.jQuery) {
780       Reveal.addEventListener( 'slidechanged', function(event) {  
781         window.jQuery(event.previousSlide).trigger('hidden');
782         window.jQuery(event.currentSlide).trigger('shown');
783       });
784     }
785   })();
786 </script>
787
788 $for(include-after)$
789 $include-after$
790 $endfor$
791
792   </body>
793 </html>

Community Data Science Collective || Want to submit a patch?