2017-09-23 14:34:02 -04:00
<!doctype html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< title > Embracing Uncertainty< / title >
< meta name = "description" content = "Mimir" >
< meta name = "author" content = "Oliver Kennedy" >
< meta name = "apple-mobile-web-app-capable" content = "yes" / >
< meta name = "apple-mobile-web-app-status-bar-style" content = "black-translucent" / >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui" >
< link rel = "stylesheet" href = "../reveal.js-3.5.0/css/reveal.css" >
< link rel = "stylesheet" href = "ubodin.css" id = "theme" >
<!-- Code syntax highlighting -->
< link rel = "stylesheet" href = "../reveal.js-3.5.0/lib/css/zenburn.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 ) ? '../reveal.js-3.5.0/css/print/pdf.css' : '../reveal.js-3.5.0/css/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
< / script >
<!-- [if lt IE 9]>
< script src = "../reveal.js-3.5.0/lib/js/html5shiv.js" > < / script >
<![endif]-->
< / head >
< body >
< div class = "reveal" >
<!-- Any section element inside of this container is displayed as a slide -->
< div class = "header" >
<!-- Any Talk - Specific Header Content Goes Here -->
Don't Wrangle, Guess
< / div >
< div class = "footer" >
<!-- Any Talk - Specific Footer Content Goes Here -->
< div style = "float: left; margin-top: 15px; " >
Exploring < u > < b > O< / b > < / u > nline < u > < b > D< / b > < / u > ata < u > < b > In< / b > < / u > teractions
< / div >
< img src = "graphics/FullText-white.png" height = "40" style = "float: right;" / >
< / div >
< div class = "slides" >
< section >
< h2 > Don't Wrangle, Guess Instead< / h2 >
< h4 > with< / h4 >
< img src = "graphics/mimir_logo_final.png" >
< / section >
< section >
< table >
< tr >
< th colspan = "6" style = "font-size: 12pt" > Students< / th >
< / tr >
< tr height = "80px" >
< td width = "100px" >
< img src = "people/poonam.png" width = "50px" height = "80px" style = "margin-bottom: 0px" / >
< p style = "margin-top: 0px; font-size: 10pt;" > Poonam< br / > (PhD-3Y)< / p >
< / td >
< td width = "100px" >
< img src = "people/will.png" width = "61px" height = "80px" style = "margin-bottom: 0px" / >
< p style = "margin-top: 0px; font-size: 10pt;" > Will< br / > (PhD-2Y)< / p >
< / td >
< td width = "100px" >
< img src = "people/aaron.jpg" width = "64px" height = "80px" style = "margin-bottom: 0px" / >
< p style = "margin-top: 0px; font-size: 10pt;" > Aaron< br / > (PhD-3Y)< / p >
< / td >
< td width = "100px" >
< img src = "people/shivang.jpg" width = "55px" height = "80px" style = "margin-bottom: 0px" / >
< p style = "margin-top: 0px; font-size: 10pt;" > Shivang< br / > (MS-2Y)< / p >
< / td >
< td width = "100px" >
< img src = "people/lisa.jpg" width = "71px" height = "80px" style = "margin-bottom: 0px" / >
< p style = "margin-top: 0px; font-size: 10pt;" > Lisa< br / > (BS-Sr)< / p >
< / td >
< td width = "100px" >
< img src = "people/olivia.png" width = "50px" height = "80px" style = "margin-bottom: 0px" / >
< p style = "margin-top: 0px; font-size: 10pt;" > Olivia< br / > (BS-Sr)< / p >
< / td >
< / tr >
< / table >
< table style = "display: inline-block;" >
< tr >
< th colspan = "3" style = "font-size: 12pt" > Alumni< / th >
< / tr >
< tr height = "80px" >
< td width = "100px" >
< img src = "people/ying.jpg" width = "60px" height = "80px" style = "margin-bottom: 0px" / >
< p style = "margin-top: 0px; font-size: 10pt;" > Ying< br / > (PhD 2017)< / p >
< / td >
< td width = "100px" >
< img src = "people/niccolo.png" width = "50px" height = "80px" style = "margin-bottom: 0px" / >
< p style = "margin-top: 0px; font-size: 10pt;" > Niccolò< br / > (PhD 2016)< / p >
< / td >
< td width = "100px" >
< img src = "people/arindam.jpg" width = "80px" height = "80px" style = "margin-bottom: 0px" / >
< p style = "margin-top: 0px; font-size: 10pt;" > Arindam< br / > (MS 2016)< / p >
< / td >
< / tr >
< / table >
< table style = "display: inline-block; margin-left: 100px" >
< tr >
< th colspan = "1" style = "font-size: 12pt" > Dev< / th >
< / tr >
< tr >
< td width = "100px" >
< img src = "people/mike.jpg" width = "80px" height = "80px" style = "margin-bottom: 0px" / >
< p style = "margin-top: 0px; font-size: 10pt;" > Mike< br / > (Sr. Rsrch. Dev.)< / p >
< / td >
< / tr >
< / table >
< table >
< tr >
< th colspan = "4" style = "font-size: 12pt" > External Collaborators< / th >
< / tr >
< tr >
< td width = "130px" style = "font-size: 10pt;" >
Dieter Gawlick< br / > (Oracle)
< / td >
< td width = "130px" style = "font-size: 10pt;" >
Zhen Hua Liu< br / > (Oracle)
< / td >
< td width = "130px" style = "font-size: 10pt;" >
Ronny Fehling< br / > (Airbus)
< / td >
< td width = "130px" style = "font-size: 10pt;" >
Beda Hammerschmidt< br / > (Oracle)
< / td >
< / tr >
< / table >
< table style = "margin-top: 5px" >
< tr >
< td width = "140px" style = "font-size: 10pt;" >
Boris Glavic< br / > (IIT)
< / td >
< td width = "140px" style = "font-size: 10pt;" >
Juliana Freire< br / > (NYU)
< / td >
< td width = "140px" style = "font-size: 10pt;" >
Wolfgang Gatterbauer< br / > (NEU)
< / td >
< td width = "140px" style = "font-size: 10pt;" >
Heiko Mueller< br / > (NYU)
< / td >
< td width = "140px" style = "font-size: 10pt;" >
Remi Rampin< br / > (NYU)
< / td >
< / tr >
< / table >
< / section >
< section >
< section >
< h3 > A Big Data Fairy Tale< / h3 >
< / section >
< section >
< img src = "graphics/dagobert83-female-user-icon-800px.png" height = "300" / >
< h4 > Meet Alice< / h4 >
< attribution > (OpenClipArt.org)< / attribution >
< / section >
< section >
< img src = "graphics/dagobert83-female-user-icon-800px.png" height = "300" / >
< img src = "graphics/littlestorefront-800px.png" height = "300" / >
< h4 > Alice has a Store< / h4 >
< attribution > (OpenClipArt.org)< / attribution >
< / section >
< section >
< img src = "graphics/littlestorefront-800px.png" height = "300" style = " vertical-align: middle;" / >
< span style = "font-size: 3em; vertical-align: middle;" > →< / span >
< img src = "graphics/matt-icons_text-x-log-300px.png" height = "300" style = " vertical-align: middle;" / >
< h4 > Alice's store collects sales data< / h4 >
< attribution > (OpenClipArt.org)< / attribution >
< / section >
< section >
< img src = "graphics/dagobert83-female-user-icon-800px.png" height = "300" style = " vertical-align: middle;" / >
< span style = "font-size: 3em; vertical-align: middle;" > +< / span >
< img src = "graphics/matt-icons_text-x-log-300px.png" height = "300" style = " vertical-align: middle;" / >
< span style = "font-size: 3em; vertical-align: middle;" > =< / span >
< img src = "graphics/saco-800px.png" height = "300" style = " vertical-align: middle;" / >
< h4 > Alice wants to use her sales data to run a promotion< / h4 >
< attribution > (OpenClipArt.org)< / attribution >
< / section >
< section >
< img src = "graphics/matt-icons_text-x-log-300px.png" height = "300" style = " vertical-align: middle;" / >
< span style = "font-size: 3em; vertical-align: middle;" > →< / span >
< img src = "graphics/database-server-800px.png" height = "300" style = " vertical-align: middle;" / >
< h4 > So Alice loads up her sales data in her trusty database/hadoop/spark/etc... server.< / h4 >
< attribution > (OpenClipArt.org)< / attribution >
< / section >
< section >
< img src = "graphics/database-server-800px.png" height = "300" style = " vertical-align: middle;" / >
< span style = "font-size: 3em; vertical-align: middle;" > + ?< / span >
< h4 > ... asks her question ...< / h4 >
< attribution > (OpenClipArt.org)< / attribution >
< / section >
< section >
< img src = "graphics/database-server-800px.png" height = "300" style = " vertical-align: middle;" / >
< span style = "font-size: 3em; vertical-align: middle;" > + ? →< / span >
< img src = "graphics/crystalball-800px.png" height = "300" style = " vertical-align: middle;" / >
< h4 > ... and basks in the limitless possibilities of big data.< / h4 >
< attribution > (OpenClipArt.org)< / attribution >
< / section >
< / section >
< section >
< section >
< h2 > Why is this a fairy tale?< / h2 >
< / section >
< section >
< img src = "graphics/matt-icons_text-x-log-300px.png" height = "300" style = " vertical-align: middle;" / >
< span style = "font-size: 3em; vertical-align: middle;" > →< / span >
< img src = "graphics/database-server-800px.png" height = "300" style = " vertical-align: middle;" / >
< h4 > It's never this easy...< / h4 >
< / section >
< / section >
< section >
< section >
< h2 > CSV Import< / h2 >
< h4 > Run a < code > SELECT< / code > on a raw CSV File< / h4 >
2017-09-25 13:20:04 -04:00
< ul >
2017-09-23 14:34:02 -04:00
< li > File may not have column headers< / li >
< li > CSV does not provide "types"< / li >
< li > Lines may be missing fields< / li >
< li > Fields may be mistyped (typo, missing comma)< / li >
< li > Comment text can be inlined into the file< / li >
< / ul >
2017-09-25 13:20:04 -04:00
< p >
< b > State of the art< / b > : External Table Defn < span > + "Manually" edit CSV< / span >
2017-09-23 14:34:02 -04:00
< / p >
< / section >
< section >
< h2 > Merge Two Datasets< / h2 >
< h4 > < code > UNION< / code > two data sources< / h4 >
2017-09-25 13:20:04 -04:00
< ul >
2017-09-23 14:34:02 -04:00
< li > Schema matching< / li >
< li > Deduplication< / li >
< li > Format alignment (GIS coordinates, $ vs €)
< li > Precision alignment (State vs County)< / li >
< / ul >
2017-09-25 13:20:04 -04:00
< p >
2017-09-23 14:34:02 -04:00
< b > State of the art< / b > : Manually map schema
< / p >
< / section >
< section >
< h2 > JSON Shredding< / h2 >
< h4 > Run a < code > SELECT< / code > on JSON or a Doc Store< / h4 >
2017-09-25 13:20:04 -04:00
< ul >
2017-09-23 14:34:02 -04:00
< li > Separating fields and record sets:< br / > (e.g., < code > { A: "Bob", B: "Alice" }< / code > )< / li >
< li > Missing fields (Records with no 'address')< / li >
< li > Type alignment (Records with 'address' as an array)< / li >
< li > Schema matching$^2$< / li >
< / ul >
2017-09-25 13:20:04 -04:00
< p >
2017-09-23 14:34:02 -04:00
< b > State of the art< / b > : DataGuide, Wrangler, etc...
< / p >
< / section >
< section >
< h2 > Data Cleaning is Hard!< / h2 >
< / section >
< section >
< h3 > State of the Art< / h3 >
< img src = "graphics/BI-Analyst.jpg" height = "400" / >
< attribution > (skilledup.com)< / attribution >
< p > Alice spends weeks cleaning her data before using it.< / p >
< / section >
2017-09-25 13:20:04 -04:00
< / section >
2017-09-23 14:34:02 -04:00
2017-09-25 13:20:04 -04:00
< section >
2017-09-23 14:34:02 -04:00
< section >
2017-09-25 13:20:04 -04:00
< h2 > The database is in the way< / h2 >
2017-09-23 14:34:02 -04:00
< / section >
2017-09-23 15:30:37 -04:00
< section >
< h3 >
In the name of Codd,< br / > < span class = "fragment grow highlight-current-blue" > thou shalt not give the user a wrong answer.< / span >
< / h3 >
< h4 class = "fragment" >
... but what if we did?
< / h4 >
< h4 class = "fragment" >
What would it take for that to be ok?
< / h4 >
< / section >
2017-09-25 13:20:04 -04:00
2017-09-23 15:30:37 -04:00
< section >
< h2 > Industry says...< / h2 >
< / section >
< section >
< svg height = "500px" width = "700" >
< image xlink:href = "graphics/maybe-screen.png" x = "0" y = "0" height = "500px" width = "282" / >
< image xlink:href = "graphics/maybe-detail.png"
x="418" y="0" height="500px" width="282" height="500px"
class="fragment"
data-fragment-index="2"
/>
< g style = "
fill: rgba(0,0,0,0);
stroke-width: 4;
stroke: rgba(200, 50, 50, 1);
">
< rect
x="20px" y="200px"
width="135px" height="35px"
class="fragment"
data-fragment-index="1"
/>
< circle
cx="255" cy="205" r="15"
class="fragment"
data-fragment-index="2"
/>
< polyline
points="270,205 400,205 380,195 400,205 380,215"
class="fragment"
data-fragment-index="2"
/>
< rect
x="420px" y="150px"
width="200px" height="120px"
class="fragment"
data-fragment-index="3"
/>
< rect
x="670px" y="150px"
width="25px" height="120px"
class="fragment"
data-fragment-index="4"
/>
< / g >
< / svg >
< p class = "fragment" data-fragment-index = "5" > My phone is guessing, but is letting me know that it did< / p >
< attribution > Apple iOS 10; Phone App< / attribution >
< / section >
< section >
< img src = "graphics/BingTranslate.png" / >
< p class = "fragment" > Good Explanations, Alternatives, and Feedback Vectors< / p >
< attribution > Bing Translate (c.a. 2016)< / attribution >
< / section >
< section >
< h2 > Communication< / h2 >
< ul >
< li > What data is uncertain?< / li >
< li > Why is my data uncertain?< / li >
< li > How bad is it?< / li >
< li > What can I do about it?< / li >
< / ul >
< / section >
< section >
2017-09-25 13:20:04 -04:00
< h3 > What if a database did the same?< / h3 >
2017-09-23 15:30:37 -04:00
< h4 class = "fragment" > (they can)< / h4 >
< / section >
< / section >
< section >
< h3 > On representing incomplete information in a relational data base< / h3 >
2017-09-25 13:20:04 -04:00
< h4 > T. Imielinski & W. Lipski Jr.< span style = "margin-left: 40px" > (< i > VLDB < span class = "fragment highlight-current-red" data-fragment-index = "1" > 1981< / span > < / i > )< / span > < / h4 >
< p class = "fragment" data-fragment-index = "1" style = "margin-top: 60px" >
Incomplete and Probabilistic Databases< br / > have existed since the 1980s
2017-09-23 15:30:37 -04:00
< / p >
< / section >
2017-09-25 13:20:04 -04:00
< section >
< svg width = "800" height = "500" >
< g transform = "translate(150,0)" >
< image
xlink:href="graphics/db.svg"
width="93" height="103"
x="0" y="10"
/>
2017-09-25 17:52:18 -04:00
< g class = "fragment" data-fragment-index = "1" >
< image
xlink:href="graphics/db.svg"
width="93" height="103"
x="0" y="130"
/>
< image
xlink:href="graphics/db.svg"
width="93" height="103"
x="0" y="250"
/>
< image
xlink:href="graphics/db.svg"
width="93" height="103"
x="0" y="370"
/>
< / g >
2017-09-25 13:20:04 -04:00
< / g >
< g
transform="translate(250, 0)"
2017-09-25 17:52:18 -04:00
class="fragment" data-fragment-index="2"
2017-09-25 13:20:04 -04:00
style="
fill: rgba(200, 50, 50, 0);
stroke-width: 4;
2017-09-25 17:52:18 -04:00
stroke: rgba(150, 150, 150, 1);
2017-09-25 13:20:04 -04:00
">
< polyline
points="0,60 220,60 200,50 220,60 200,70 220,60 0,60"
transform="translate(0,0)"
/>
< text x = "60" y = "50" > Q(D)< / text >
< image
xlink:href="graphics/jean-victor-balin-icon-table.svg"
width="96" height="96"
x="230" y="15"
/>
2017-09-25 17:52:18 -04:00
< g class = "fragment" data-fragment-index = "3" >
< polyline
points="0,60 220,60 200,50 220,60 200,70 220,60 0,60"
transform="translate(0,120)"
/>
< polyline
points="0,60 220,60 200,50 220,60 200,70 220,60 0,60"
transform="translate(0,240)"
/>
< polyline
points="0,60 220,60 200,50 220,60 200,70 220,60 0,60"
transform="translate(0,360)"
/>
< text x = "60" y = "170" > Q(D)< / text >
< text x = "60" y = "290" > Q(D)< / text >
< text x = "60" y = "410" > Q(D)< / text >
< image
xlink:href="graphics/jean-victor-balin-icon-table.svg"
width="96" height="96"
x="230" y="135"
/>
< image
xlink:href="graphics/jean-victor-balin-icon-table.svg"
width="96" height="96"
x="230" y="255"
/>
< image
xlink:href="graphics/jean-victor-balin-icon-table.svg"
width="96" height="96"
x="230" y="375"
/>
< / g >
2017-09-25 13:20:04 -04:00
< / g >
< g
transform="translate(0, 0)"
2017-09-25 17:52:18 -04:00
class="fragment" data-fragment-index="5"
2017-09-25 13:20:04 -04:00
style="
fill: rgba(200, 50, 50, 0);
stroke-width: 4;
2017-09-25 17:52:18 -04:00
stroke: rgba(150, 150, 150, 1);
2017-09-25 13:20:04 -04:00
">
< polyline
points="20,60 140,60 120,50 140,60 120,70 140,60"
transform="translate(0,200) rotate(-60)"
/>
< polyline
points="70,60 140,60 120,50 140,60 120,70 140,60"
transform="translate(-15,200) rotate(-20)"
/>
< polyline
points="70,60 140,60 120,50 140,60 120,70 140,60"
transform="translate(25,170) rotate(20)"
/>
< polyline
points="20,60 140,60 120,50 140,60 120,70 140,60"
transform="translate(102,220) rotate(60)"
/>
< text x = "40" y = "250" > ?< / text >
< / g >
< g
transform="translate(540, 0)"
2017-09-25 17:52:18 -04:00
class="fragment" data-fragment-index="6"
2017-09-25 13:20:04 -04:00
style="
fill: rgba(200, 50, 50, 0);
stroke-width: 4;
2017-09-25 17:52:18 -04:00
stroke: rgba(150, 150, 150, 1);
2017-09-25 13:20:04 -04:00
">
< polyline
points="20,60 140,60 120,50 140,60 120,70 140,60"
transform="translate(102,30) rotate(60)"
/>
< polyline
points="70,60 140,60 120,50 140,60 120,70 140,60"
transform="translate(0,120) rotate(20)"
/>
< polyline
points="70,60 140,60 120,50 140,60 120,70 140,60"
transform="translate(-40,240) rotate(-20)"
/>
< polyline
points="20,60 140,60 120,50 140,60 120,70 140,60"
transform="translate(0,390) rotate(-60)"
/>
< image
xlink:href="graphics/dagobert83-female-user-icon-800px.png"
width="100" height="100"
x="110" y="180"
/>
< text x = "180" y = "190" > ?< / text >
< / g >
2017-09-25 17:52:18 -04:00
< / svg >
< p class = "fragment" data-fragment-index = "4" style = "font-size: smaller" >
We've gotten good at query processing on uncertain data.< br / >
< span class = "fragment" data-fragment-index = "5" > But not at "sourcing" uncertain data
< span class = "fragment" data-fragment-index = "6" > ... or communicating results.< / span > < / span >
< / p >
< / section >
< / section >
< section >
< section >
< h3 > It's not the data that's uncertain,< br / > it's the interpretation< / h3 >
< / section >
< section >
< table >
< tr >
< th > Time< / th > < th > Sensor Reading< / th > < th class = "fragment" data-fragment-index = "2" > Temp Around Sensor< / th >
< / tr >
< tr > < td > 1< / td > < td > 31.6< / td > < td class = "fragment" data-fragment-index = "2" > Roughly 31.6˚C< / td > < / tr >
< tr > < td > 2< / td > < td > -999< / td > < td class = "fragment" data-fragment-index = "2" > Around 30˚C?< / td > < / tr >
< tr > < td > 4< / td > < td > 28.1< / td > < td class = "fragment" data-fragment-index = "2" > Roughly 28.1˚C?< / td > < / tr >
< tr > < td > 3< / td > < td > 32.2< / td > < td class = "fragment" data-fragment-index = "2" > Roughly 32.2˚C< / td > < / tr >
< / table >
< p class = "fragment" data-fragment-index = "1" > The < i > reading< / i > is deterministic< / p >
< p class = "fragment" data-fragment-index = "2" > ... but what we care about is what the reading measures< / p >
< / section >
2017-09-25 13:20:04 -04:00
2017-09-25 17:52:18 -04:00
< section >
< svg width = "650" height = "500" >
< image
xlink:href="graphics/db.svg"
width="93" height="103"
x="0" y="190"
/>
< g
transform="translate(30, 0)"
style="
fill: rgba(200, 50, 50, 0);
stroke-width: 4;
stroke: rgba(150, 150, 150, 1);
">
< polyline
points="20,60 140,60 120,50 140,60 120,70 140,60"
transform="translate(0,170) rotate(-60)"
/>
< polyline
points="70,60 140,60 120,50 140,60 120,70 140,60"
transform="translate(-15,170) rotate(-20)"
/>
< polyline
points="70,60 140,60 120,50 140,60 120,70 140,60"
transform="translate(25,185) rotate(20)"
/>
< polyline
points="20,60 140,60 120,50 140,60 120,70 140,60"
transform="translate(102,240) rotate(60)"
/>
< text x = "150" y = "70" > Q< tspan style = "font-size: smaller" > 1< / tspan > (D)< / text >
< text x = "150" y = "190" > Q< tspan style = "font-size: smaller" > 2< / tspan > (D)< / text >
< text x = "150" y = "310" > Q< tspan style = "font-size: smaller" > 3< / tspan > (D)< / text >
< text x = "150" y = "430" > Q< tspan style = "font-size: smaller" > 4< / tspan > (D)< / text >
< / g >
< g transform = "translate(500,0)"
style="
fill: rgba(200, 50, 50, 0);
stroke-width: 4;
stroke: rgba(150, 150, 150, 1);
">
< image
xlink:href="graphics/jean-victor-balin-icon-table.svg"
width="96" height="96"
x="0" y="15"
/>
< image
xlink:href="graphics/jean-victor-balin-icon-table.svg"
width="96" height="96"
x="0" y="135"
/>
< image
xlink:href="graphics/jean-victor-balin-icon-table.svg"
width="96" height="96"
x="0" y="255"
/>
< image
xlink:href="graphics/jean-victor-balin-icon-table.svg"
width="96" height="96"
x="0" y="375"
/>
< / g >
< g transform = "translate(260,0)"
style="
fill: rgba(200, 50, 50, 0);
stroke-width: 4;
stroke: rgba(150, 150, 150, 1);
">
< polyline
points="30,60 220,60 200,50 220,60 200,70 220,60"
transform="translate(0,0)"
/>
< polyline
points="30,60 220,60 200,50 220,60 200,70 220,60"
transform="translate(0,120)"
/>
< polyline
points="30,60 220,60 200,50 220,60 200,70 220,60"
transform="translate(0,240)"
/>
< polyline
points="30,60 220,60 200,50 220,60 200,70 220,60"
transform="translate(0,360)"
/>
< / g >
2017-09-25 13:20:04 -04:00
< / svg >
2017-09-25 17:52:18 -04:00
< p class = "fragment" style = "font-size: smaller;" > < b > Insight 1:< / b > Treat data as 100% deterministic. < br / > Instead, queries propose alternative interpretations.< / p >
< / section >
< section >
2017-09-25 13:20:04 -04:00
< / section >
2017-09-23 14:34:02 -04:00
< / div > < / div >
< script src = "../reveal.js-3.5.0/lib/js/head.min.js" > < / script >
< script src = "../reveal.js-3.5.0/js/reveal.js" > < / script >
< script >
// Full list of configuration options available at:
// https://github.com/hakimel/../reveal.js#configuration
Reveal.initialize({
controls: false,
progress: true,
history: true,
center: true,
slideNumber: true,
transition: 'fade', // none/fade/slide/convex/concave/zoom
// Optional ../reveal.js plugins
dependencies: [
{ src: '../reveal.js-3.5.0/lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: '../reveal.js-3.5.0/plugin/math/math.js',
condition: function() { return true; },
mathjax: '../reveal.js-3.5.0/js/MathJax.js'
},
{ src: '../reveal.js-3.5.0/plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: '../reveal.js-3.5.0/plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: '../reveal.js-3.5.0/plugin/highlight/highlight.js', async: true, condition: function() { return !!document.querySelector( 'pre code' ); }, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: '../reveal.js-3.5.0/plugin/zoom-js/zoom.js', async: true },
{ src: '../reveal.js-3.5.0/plugin/notes/notes.js', async: true }
]
});
< / script >
< / body >
< / html >