30:T7b6,# Slide There have been a number of notebooks on Observable that have made presentation software out of notebooks. This is another one of these, but attempts to have some very cool qualities: - **Notebook _and_ Presentation:** The idea here is that the notebook you end up writing should work well as both a notebook and as a presentation, i.e. it can both be consumed by readers as well as viewers. To this extent the different slide helpers show content slightly differently when in fullscreen. We also have `notes` helpers that allow text to be used as both notebook narrative and as presenter notes. Finally any content that isn't either a `slide` or a `note` is ignored when presenting. This gives sufficient tools to create these dual styles. - **Easy _and_ Powerful:** Building a presentation can be a _lot_ of work. As such we want to make it easy to get started drafting the narrative by giving really easy tools like allowing simple markdown to be used to build up the basic structure and narrative of a presentation. But then often comes the polish phase, where we want to be able to really show ideas rather than just words. We provide powerful slide types that allow animated builds, helpers for data driven presenting and more. - **Tooling for presenters:** We support a presenter notes window that can be put on a separate monitor. This window shows the time elapsed, a preview of the next slide and the presenter notes associated with the current slide. This allows you to get the timing right for your presentation, not accidentally skip to the next slide prematurely and remind yourself what it was you wanted to say about this slide, all at a glance. ${await FileAttachment("Screenshot 2023-03-03 at 12.14.26.png").image({width: 500})} The rest of this notebook contains a **Demo** with the various kinds of slides, **Usage notes** which explain how to use this for your own presentations, and an **Appendix** that shows the implementation. 31:T40f,notes.below` The \`build\` helper has the following methods: - \`md\` - \`html\` - \`svg\` These work like the standard template literals, but take a first argument with build options. At the simplest, this can simply be the 0 based index of when the content should appear. Alternatively it can be an object \`{appear: Index, hide: Index, transitionIn: ClassName, transitionOut: ClassName }\` that allows also the content to be removed from the slide and/or assign CSS transitions to be attached. If \`transitionOut\` is attached, the object is only removed from the DOM one build later than it's \`hide\` index and it assumed the CSS in the transition will hide it visually. The \`build\` helper also has: - \`conditional(Index | {appear: Index, hide: Index}, DomNode, DomNode)\`: shows the first DOM node while the build is inside the indices specified, otherwise shows the second DOM node. - \`highlight(Index | {appear: Index, hide: Index}, DomNode)\`: applies a CSS yellow highlight to the text. - \`animateChildren\`: see below `32:Tb34,{ const data = [ { key: "Ewa", data: [ { key: "Math", value: 3 }, { key: "Chemistry", value: 2 } ] }, { key: "Borys", data: [ { key: "Math", value: 5 }, { key: "Chemistry", value: 1 } ] }, { key: "Filip", data: [ { key: "Math", value: 2 }, { key: "Chemistry", value: 4 } ] }, { key: "Greg", data: [ { key: "Math", value: 1 }, { key: "Chemistry", value: 6 } ] }, { key: "Alicja", data: [ { key: "Math", value: 4 }, { key: "Chemistry", value: 4 } ] }, { key: "Celina", data: [ { key: "Math", value: 7 }, { key: "Chemistry", value: 2 } ] }, { key: "Dorian", data: [ { key: "Math", value: 6 }, { key: "Chemistry", value: 4 } ] } ]; const title = "Animated Charts using Plotteus", showLegend = true, legendAnchor = "start", verticalAxis = { title: "Example lifted from https://observablehq.com/@bartok32/hello-plotteus" }, palette = "vivid"; return slide.plotteus([ { key: "0", chartType: "bar", title, showLegend, legendAnchor, verticalAxis, palette, groups: data .map((obj) => ({ ...obj, data: obj.data.filter((v) => v.key == "Math") })) .sort((a, b) => { return d3.ascending(a.key, b.key); }) }, { key: "1", chartType: "bar", title, showLegend, legendAnchor, palette, verticalAxis, groups: data .map((obj) => ({ ...obj, data: obj.data.filter((v) => v.key == "Math") })) .sort((a, b) => { return d3.ascending(a.data[0].value, b.data[0].value); }) }, { key: "2", chartType: "bar", chartSubtype: "stacked", title, showLegend, legendAnchor, palette, verticalAxis, groups: [...data].sort((a, b) => { return d3.ascending(a.data[0].value, b.data[0].value); }) }, { key: "3", chartType: "bar", chartSubtype: "stacked", title, showLegend, legendAnchor, palette, verticalAxis, groups: [...data].sort((a, b) => { return d3.ascending( d3.sum(a.data, (x) => x.value), d3.sum(b.data, (x) => x.value) ); }) }, { key: "4", chartType: "pie", title, palette, legendAnchor, groups: [...data] .sort((a, b) => { return d3.descending( d3.sum(a.data, (x) => x.value), d3.sum(b.data, (x) => x.value) ); }) .slice(0, 3) } ]); }33:Td35,slide.customAnimation( ({ gl, uniforms }, t, build) => { // First argument here is an arbitrary context returned from the `init` function // Second is the animation time (0..1) // Third is the number of the current build step (0..numBuilds> const aBase = build == 1 ? t : 0; gl.uniform1f(uniforms.u_a, -2 + Math.sin(1 - aBase)); gl.uniform1f(uniforms.u_b, -2); gl.uniform1f(uniforms.u_c, -1.2); gl.uniform1f(uniforms.u_d, 2); gl.drawArrays(gl.POINTS, 0, Math.pow(2, 18)); }, { numBuilds: 2, init: (container) => { const h = isFullscreen ? window.innerHeight - 400 : 400; const w = isFullscreen ? width - 400 : width; const canvas = DOM.canvas(w * devicePixelRatio, h * devicePixelRatio); canvas.style.width = `${w}px`; canvas.style.height = `${h}px`; const gl = (canvas.value = canvas.getContext("webgl")); gl.viewport(0, 0, canvas.width, canvas.height); const array = new Float32Array(Math.pow(2, 18) * 2).map( () => Math.random() * 2 - 1 ); const buffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, buffer); gl.bufferData(gl.ARRAY_BUFFER, array, gl.STATIC_DRAW); const fragment = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource( fragment, ` precision highp float; void main() { gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0); } ` ); gl.compileShader(fragment); if (!gl.getShaderParameter(fragment, gl.COMPILE_STATUS)) throw gl.getShaderInfoLog(fragment); const shader = gl.createShader(gl.VERTEX_SHADER); gl.shaderSource( shader, ` precision highp float; const float PI = 3.14159265359; uniform float a; uniform float b; uniform float c; uniform float d; attribute vec2 position; void main() { float x1, x2 = position.x; float y1, y2 = position.y; for (int i = 0; i < 8; i++) { x1 = x2, y1 = y2; x2 = sin(a * y1) - cos(b * x1); y2 = sin(c * x1) - cos(d * y1); } gl_Position = vec4(x2 / 2.0, y2 / 2.0, 0.0, 1.0); gl_PointSize = 1.0; } ` ); gl.compileShader(shader); if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) throw gl.getShaderInfoLog(shader); const program = gl.createProgram(); gl.attachShader(program, shader); gl.attachShader(program, fragment); gl.linkProgram(program); if (!gl.getProgramParameter(program, gl.LINK_STATUS)) throw gl.getProgramInfoLog(program); invalidation.then(() => { gl.deleteShader(shader); gl.deleteShader(fragment); gl.deleteBuffer(buffer); gl.deleteProgram(program); }); const u_a = gl.getUniformLocation(program, "a"); const u_b = gl.getUniformLocation(program, "b"); const u_c = gl.getUniformLocation(program, "c"); const u_d = gl.getUniformLocation(program, "d"); const a_position = gl.getAttribLocation(program, "position"); gl.useProgram(program); gl.bindBuffer(gl.ARRAY_BUFFER, buffer); gl.vertexAttribPointer(a_position, 2, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(a_position); container.appendChild(htl.html`

Custom animation

`); container.appendChild(canvas); container.style.flexDirection = "column"; return { container, gl, uniforms: { u_a, u_b, u_c, u_d } }; } } )34:T170a,makeSlideshowControls = () => { let current = 0; var show = { notes: () => {} }; function formatTime(seconds) { return [ parseInt(seconds / 60 / 60), parseInt((seconds / 60) % 60), parseInt(seconds % 60) ] .join(":") .replace(/\b(\d)\b/g, "0$1"); } const showNotesWindow = () => { const controlsWindow = open( "about:blank", "notes", "width=1000,height=800" ); const controls = controlsWindow.document.body; controlsWindow.document.title = "Presenter Notes"; controls.replaceChildren(html`

Elapsed

Next slide

Notes

`); const time = controls.querySelector(".time"); const nextSlide = controls.querySelector(".next-slide"); const notes = controls.querySelector(".notes"); const start = new Date(); setInterval(() => { time.replaceChildren( html`${formatTime((new Date() - start) / 1000)}` ); }, 1000); show.notes = (slide) => { notes.innerHTML = ""; const cell = slide.parentNode; const siblings = Array.from(document.querySelectorAll(".observablehq")); const currentCellIndex = siblings.indexOf(cell); if ( currentCellIndex > 0 && siblings[currentCellIndex - 1].querySelector(".notes.above") ) { notes.replaceChildren(siblings[currentCellIndex - 1].cloneNode(true)); } if ( currentCellIndex > 0 && siblings[currentCellIndex + 1].querySelector(".notes.below") ) { notes.replaceChildren(siblings[currentCellIndex + 1].cloneNode(true)); } for (const sibling of siblings.slice(siblings.indexOf(cell) + 1)) { if (sibling.querySelector(".slide")) { nextSlide.replaceChildren(sibling.cloneNode(true)); break; } } }; show.notes([...document.querySelectorAll(".observablehq .slide")][0]); }; const present = () => { if ( (document.fullScreenElement && document.fullScreenElement !== null) || (!document.mozFullScreen && !document.webkitIsFullScreen) ) { if (document.documentElement.requestFullScreen) { document.documentElement.requestFullScreen(); } else if (document.documentElement.mozRequestFullScreen) { document.documentElement.mozRequestFullScreen(); } else if (document.documentElement.webkitRequestFullScreen) { document.documentElement.webkitRequestFullScreen( Element.ALLOW_KEYBOARD_INPUT ); } } }; var changeHandler = function () { const slides = [...document.querySelectorAll(".observablehq .slide")]; var fs = (document.fullScreenElement && document.fullScreenElement !== null) || (!document.mozFullScreen && !document.webkitIsFullScreen); if (fs) { slides.forEach((e) => { e.style.height = ""; }); mutable isFullscreen = false; document.querySelector(".fullscreen-style").innerHTML = ""; } else { mutable isFullscreen = true; document.querySelector(".fullscreen-style").appendChild( html`` ); slides.forEach((e) => { e.style.height = window.screen.height + "px"; }); var elmnt = slides[0]; current = 0; elmnt.scrollIntoView(); } }; document.addEventListener("fullscreenchange", changeHandler, false); document.addEventListener("webkitfullscreenchange", changeHandler, false); document.addEventListener("mozfullscreenchange", changeHandler, false); // keymap const onkeyup = function (e) { const slides = [...document.querySelectorAll(".observablehq .slide")]; const changeSlide = (index) => { console.log(index, slides.length); if (index === slides.length) { document.querySelector(".end-slide").scrollIntoView(); current = index; } else if (index > slides.length) { document.exitFullscreen(); } else { index = Math.max(index, 0); current = index; var elmnt = slides[current]; elmnt.resetBuild?.(); elmnt.scrollIntoView(); show.notes(elmnt); } }; const forward = () => { var elmnt = slides[current]; if (elmnt?.canGoForward?.()) { elmnt.forward(); } else { changeSlide(current + 1); } }; if (e.which === 83) { changeSlide(0); } if ((e.which === 32) | (e.which === 39) | (e.which === 40)) { forward(); } if ((e.which === 38) | (e.which === 37)) { changeSlide(current - 1); } }; document.addEventListener("keyup", onkeyup); invalidation.then(() => document.removeEventListener("keyup", onkeyup)); return htl.html`

Slideshow controls:

`; }35:T1d1a,slide = { function slide() { const container = document.createElement("div"); container.className = "slide"; container.appendChild(md.apply(this, arguments)); return container; } function iframe(strings) { const container = document.createElement("div"); container.innerHTML = ""; container.className = "slide"; return container; } slide.iframe = iframe; slide.html = (strings) => { const container = document.createElement("div"); container.innerHTML = strings; container.className = "slide slide--html"; return container; }; function htmldark(strings) { const container = document.createElement("div"); container.innerHTML = strings; container.className = "slide slide--html dark"; return container; } slide.htmldark = htmldark; function code(strings) { const container = document.createElement("div"); const pre = container.appendChild(document.createElement("pre")); const code = pre.appendChild(document.createElement("code")); let string = strings[0] + "", i = 0, n = arguments.length; while (++i < n) string += arguments[i] + "" + strings[i]; code.textContent = string.trim(); container.className = "slide slide--code"; return container; } slide.code = code; slide.img = async function (hrefOrImg, opts = { scale: "contain" }) { let img; if (typeof hrefOrImg == "string") { img = new Image(); img.src = hrefOrImg.trim(); } else if (hrefOrImg instanceof FileAttachment) { img = await hrefOrImg.image(); } img.className = `slide slide--img slide--img--${opts.scale}`; return img; }; slide.customAnimation = ( fn, { numBuilds = 1, animationDuration = 1000, className = "", init = () => ({}) } = {} ) => { const container = document.createElement("div"); container.className = "slide " + className; let currentIdx = -1; let t = 0; let maxIds = numBuilds - 1; let prevTimestamp = null; const state = init(container); const animate = (timestamp) => { if (prevTimestamp == null) { t = 0; } else { const delta = timestamp - prevTimestamp; t += delta / animationDuration; } t = Math.min(t, 1); prevTimestamp = timestamp; fn(state, t, currentIdx); if (t < 1) requestAnimationFrame(animate); }; const forward = () => { currentIdx++; t = 0; prevTimestamp = null; requestAnimationFrame(animate); }; container.canGoForward = () => currentIdx < maxIds; container.forward = forward; container.resetBuild = () => { currentIdx = -1; forward(); }; forward(); return animationPlayer(container); }; slide.withBuild = (fn) => { const container = document.createElement("div"); container.className = "slide"; let currentIdx = 0; let maxIds = 0; const conditional = (indexOpts, trueContent, falseContent) => { let appearIndex = typeof indexOpts == "number" ? indexOpts : indexOpts.appear; let hideIndex = indexOpts.hide; maxIds = Math.max(appearIndex, hideIndex || 0, maxIds); if (appearIndex <= currentIdx && (!hideIndex || currentIdx < hideIndex)) { return trueContent; } else { return falseContent; } }; const animator = (contentRenderer) => (indexOpts, ...args) => { if (indexOpts.raw) { return contentRenderer(indexOpts, ...args); } let appearIndex = typeof indexOpts == "number" ? indexOpts : indexOpts.appear; let hideIndex = indexOpts.hide; let { transitionIn, transitionOut } = indexOpts; maxIds = Math.max(appearIndex, hideIndex || 0, maxIds); return (...args) => { if ( currentIdx >= appearIndex && (!hideIndex || (transitionOut ? currentIdx <= hideIndex : currentIdx < hideIndex)) ) { let result = contentRenderer(...args); if (currentIdx == appearIndex) result.classList.add(transitionIn); else result.classList.remove(transitionIn); if (currentIdx == hideIndex) result.classList.add(transitionOut); else result.classList.remove(transitionOut); return result; } else { return html``; } }; }; const highlight = (options, content) => conditional( typeof options == "number" ? { appear: options, hide: options + 1 } : options, htl.html`${content}`, content ); const build = { md: animator(md), html: animator(html), svg: animator(svg), conditional, highlight, animateChildren: (child) => { autoAnimate(child); return child; } }; let contents = fn(build); container.appendChild(contents); const forward = () => { currentIdx++; let newContents = fn(build); let p = diff.diff(contents, newContents); //container.replaceChild(newContents, contents); //contents = newContents; diff.apply(contents, p); }; container.canGoForward = () => currentIdx < maxIds; container.forward = forward; container.resetBuild = () => { currentIdx = 0; let newContents = fn(build); container.replaceChild(newContents, contents); contents = newContents; }; return animationPlayer(container); }; slide.plotteus = (steps) => { return slide.customAnimation( (chart, t, currentIdx) => { chart.render(steps[currentIdx].key, d3.easeCubicInOut(t)); }, { numBuilds: steps.length, className: "slide--plotteus", init: (container) => { container.style.height = "400px"; return plotteus.makeStory(container, steps); } } ); }; slide.mdWithBuildLists = (strings) => { return slide.withBuild((build) => { const result = md(strings); let idx = 1; for (let el of Array.from(result.getElementsByTagName("LI"))) { el.id = DOM.uid(); el.parentElement.replaceChild( build.html(idx++)`${el.cloneNode(true)}`, el ); } for (let el of Array.from(result.getElementsByTagName("UL"))) { autoAnimate(el); } for (let el of Array.from(result.getElementsByTagName("OL"))) { autoAnimate(el); } return clean(result); }); }; slide.plot = function (plotOpts) { const pl = Plot.plot({ style: isFullscreen ? { background: "rgb(247, 247, 249)", fontSize: 20 } : {}, width, ...(isFullscreen ? { height: window.outerHeight * 0.6 } : {}), ...plotOpts }); const container = document.createElement("div"); const wrapper = document.createElement("div"); wrapper.appendChild(pl); container.appendChild(wrapper); container.className = "slide slide--plot"; return container; }; return slide; }36:Ta6f,fullscreenStyle = ( vw, vh ) => `cite{font-size:2vw;position: absolute; bottom:2%;right:2%; text-align: right;align:right; } div,iframe{width:100%;height:100%} .slide { width: calc(100% + 28px); margin: 0 -14px; padding: 10%; box-sizing: border-box; color: rgb(27, 30, 35); background: rgb(247, 247, 249); min-height: ${vw(65)}; font-size: ${vw(5)}; line-height: 1.15; display: flex; align-items: center; } .end-slide { width: 100%; height: ${vh(100)}; background: black; } .slide a { color: #DE5E60; } .slide h1, .slide h2, .slide h3 { margin-top: 0; } .slide p, .slide pre, .slide h1, .slide h2, .slide h3, .slide h4, .slide img { max-width: 100%; } .slide--img { max-width: none; padding: 0; width: 100%; } .slide--img--contain { object-fit: contain; } .slide--img--cover { object-fit: cover; } .slide blockquote, .slide ol, .slide ul { max-width: none; } .slide table { font-size: ${vw(3)}; } .slide table th, .slide table td { padding: ${vw(1)} ${vw(2)} ${vw(1)} 0; } .slide > * { width: 100%; } .slide code { font-size: ${vw(1.8)}; } .slide--code pre, .slide--code code { font-size: ${vw(2.3)}; } .slide--code { color: rgb(27, 30, 35); background: rgb(247, 247, 249); border-bottom: solid 1px white; } .slide--html { color: rgb(27, 30, 35); background: rgb(247, 247, 249); border-bottom: solid 1px white; } .slide--plotteus { height: ${vh(100)}; } .slide--plotteus .title { font-size: 4vw !important; transform: translate(16px, 0); } .slide--plotteus > div { display: none; } .slide--plot { color: rgb(27, 30, 35); background: rgb(247, 247, 249); border-bottom: solid 1px white; max-height: ${vh(100)}; } .slide--plot > div { display: flex; flex-direction: column; justify-content: center; max-height: ${window.outerHeight}px; height: ${vh(100)}; } .slide--plot figure { display: flex; flex-direction: column-reverse; } .slide--plot figure > div { flex-basis: 16px; } .slide--plot figcaption { font-size: 4vw; max-width: ${vh(80)}; margin-bottom: ${vw(2)}; } .dark { color: rgb(247, 247, 249); background: #333; border-bottom: solid 1px white; } .transition-appear { animation: 1s appear; } .highlight { background: yellow; } .transition-slideout { animation: 4s slideout; animation-fill-mode: forwards; position: absolute; } @keyframes appear { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes slideout { 0% { transform: translate(0px); } 100% { transform: translate(-${vw(100)}); } } .dark h1,.dark h2,.dark h3,.dark h4,.dark h5{color: rgb(247, 247, 249)}`37:[{"id":"5f6765a07144d980ac820a4b16a833fe8b2be2068f85ab36521bedb36d360995ac0a449882d3f7aeaaff9e58b6b3e223118aea76561164c236f8bbdfaab7de77","href":"https://static.observableusercontent.com/files/5f6765a07144d980ac820a4b16a833fe8b2be2068f85ab36521bedb36d360995ac0a449882d3f7aeaaff9e58b6b3e223118aea76561164c236f8bbdfaab7de77","name":"Screenshot 2023-03-03 at 12.14.26.png","type":"image/png","lastModified":1677845685511.438,"size":636113}] 2e:{"title":"Slide","cells":[{"id":23,"value":"$30","pinned":false,"hidden":false,"mode":"md"},{"id":186,"value":"slide`# Demo`","pinned":true,"hidden":false,"mode":"ojs"},{"id":402,"value":"Click **Fullscreen** bellow, to see this notebook as a presentation. If you have a dual-monitor setup, you can open the **Presenter notes** on a second monitor to read these notes. (This launches a pop-up window, which may get automatically blocked, so you may need to manually authorize it).","pinned":false,"hidden":false,"mode":"md"},{"id":11,"value":"slideshowControls = makeSlideshowControls()","pinned":false,"hidden":false,"mode":"ojs"},{"id":190,"value":"slide`\n# Markdown stuff\n\nThe default slide supports markdown. The style changes in fullscreen.\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":193,"value":"slide.code`\nhere {\n is: some-code;\n}\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":196,"value":"notes.below`\nYou can also add notes like this, which also support markdown. \\`notes.below\\` means the notes are below the slide it refers to, \\`notes.above\\` are placed above the associated slide in the document order.\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":200,"value":"slide`Other basic slide types are: \n- \\`slide.img\\`\n- \\`slide.html\\`\n- \\`slide.htmldark\\`\n- \\`slide.iframe\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":208,"value":"slide`# Advanced slide types`","pinned":false,"hidden":false,"mode":"ojs"},{"id":210,"value":"slide.plot({\n caption: \"Athletes\",\n marks: [Plot.dot(athletes.data, { x: \"weight\", y: \"height\", stroke: \"sex\" })]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":229,"value":"notes.below`\nThere is a special \\`slide.plot\\` call, which behaves like \\`Plot.plot\\`, however it adjusts font sizes and widths of plots automatically to make them appear better in full screen. Notice also how the caption appears more prominently in fullscreen.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":233,"value":"slide.withBuild(\n (build) =>\n build.md(0)`\n# A slide with a ${build.highlight(1, \"build\")}\n\n${build.md(2)`Where stuff can appear...`}\n${build.md({\n appear: 2,\n hide: 3,\n transitionIn: \"transition-appear\",\n transitionOut: \"transition-slideout\"\n})`...and disappaer`}\n\n`\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":334,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"slide.withBuild(\n (build) =>\n build.html`

You can opt into animations

\n ${build.animateChildren(html`

\n ${build.html(\n 3\n )`

Foo2

`}\n ${build.html(\n 1\n )`

Foo

`}\n ${build.html(\n 2\n )`

Foo2

`}\n

`)}\n

End

\n`\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":343,"value":"notes.below`\nThe \\`animateChildren\\` helper will automatically attempt to animate the immediate children of the node passed in. This is admittedly somewhat magical in that you may get very neat animation results with almost no effort if it works, but there few nobs to tweak if it doesn't. You can always use manual CSS transitions as documented above.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":272,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":348,"value":"notes.below`We have built-in support for the [Plotteus](https://github.com/bprusinowski/plotteus) library for animated data storytelling.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"slide.mdWithBuildLists`\n# There is a special helper\n\n- For markdown with lists\n- That should appear\n- By bullet point\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":431,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":476,"value":"notes.below`Taken from https://observablehq.com/@mbostock/making-webgl-dance by Mike Bostock`","pinned":false,"hidden":false,"mode":"ojs"},{"id":252,"value":"# Usage notes","pinned":false,"hidden":false,"mode":"md"},{"id":481,"value":"The most straightforward way of using this is by the following import:\n\n```javascript\nimport {slide, notes, slideshowControls} from \"@gampleman/slide\"\n```\n\nYou would want to then create a cell with:\n\n```javascript\nslideshowControls\n```\n\nin it to be able to toggle the fullscreen presentation and speaker notes. Then simply start creating slide and/or notes cells as you see in the examples above.","pinned":false,"hidden":false,"mode":"md"},{"id":485,"value":"### Customizing style\n\nThe default style is left relatively barebones, so that it fits nicely within the Observable look. You can of course override these styles as you see fit.\n\nIf you only want to override the fullscreen style (i.e. only the bits that change when presenting fullscreen), have a look bellow at the `fullscreenStyle` cell bellow. You can override this cell on import to provide your own fullscreen styling. Note that it takes a little helper functions to create `vw` and `vh` css helpers. This is so that the \"Next slide\" preview works in the presenter UI, where using the whole screen is not what you really want!","pinned":false,"hidden":false,"mode":"md"},{"id":487,"value":"### Other useful stuff to import\n\nYou may also want to import the `isFullscreen` reactive variable, that allows you to adapt content based on if it is being presented in a fullscreen manner, or if it being read in a notebook.","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"mutable isFullscreen = false","pinned":true,"hidden":false,"mode":"ojs"},{"id":407,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"notes = ({\n below: (...args) => htl.html`

${md(...args)}

`,\n above: (...args) => htl.html`

${md(...args)}

`\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":3,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":325,"value":"animationPlayer = (container) => {\n if (isFullscreen) {\n return container;\n }\n let canGoForward = container.canGoForward();\n const button = htl.html``;\n\n return htl.html`

${button}${container}

`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"$36","pinned":true,"hidden":false,"mode":"ojs"},{"id":89,"value":"autoAnimate = (\n await import(\"https://unpkg.com/@formkit/auto-animate@0.8.1/index.mjs?module\")\n).default","pinned":true,"hidden":false,"mode":"ojs"},{"id":35,"value":"diff = new (await import(\"https://cdn.skypack.dev/diff-dom\")).DiffDOM()","pinned":true,"hidden":false,"mode":"ojs"},{"id":182,"value":"clean = function clean(node) {\n for (var n = 0; n < node.childNodes.length; n++) {\n var child = node.childNodes[n];\n if (\n child.nodeType === 8 ||\n (child.nodeType === 3 && !/\\S/.test(child.nodeValue))\n ) {\n node.removeChild(child);\n n--;\n } else if (child.nodeType === 1) {\n clean(child);\n }\n }\n return node;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":213,"value":"import { athletes } from \"@observablehq/plot-test-data\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":270,"value":"plotteus = import(\"https://unpkg.com/plotteus@1.1.2/dist/index.js?module\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}