The avatar for @jerryjappinen
Jerry Jäppinen
Design, tech, engineering and science. Head of Design and User Research.
Public
Edited
Nov 30, 2024
3 stars
2
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
import { slideshows, styles, currentSlides, timer, goToLast } with { decks, theme } from "@jerryjappinen/slides"
Insert cell
decks = ({
basic, // Defined below
generated,
topCars,
graphs,
reactive,
media,
embeds,
latex,
auto,
images,
slideStyling,
templates,
customThemed,
imageDeck,
urlDeck,
programmaticNavigation
})
Insert cell
styles
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
slideshows.basic
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
generated = _.range(10).map((n) => `# ${n + 1}/10`)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
topCars = [
"# Heaviest cars – Top 10",
_.slice(_.orderBy(cars, "weight (lb)", "desc"), 0, 10).map((car, i) => {
return `
## _\#${i + 1}_ – ${Math.round(
car["weight (lb)"] / 0.45359237
).toLocaleString()} kg
# ${car.name}
${car["power (hp)"]} horsepower
`;
})
]
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
graphs = [
Plot.plot({
color: { legend: true, scheme: "Viridis" },
height: 280,
marks: [
Plot.dot(cars, {
x: "weight (lb)",
y: "year",
stroke: "weight (lb)",
tip: true
})
]
}),

`## Graphs 📊 work

See another plot in next slide 👉`,

md`Plot about cars
${Plot.plot({
color: { legend: true },
height: 280,
marks: [
Plot.barY(cars, {
x: "cylinders",
y: "economy (mpg)",
tip: true
})
]
})}`,

"Last slide 👌"
]
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
reactive = `## Drag \`n\`!
\`n = ${n}\``
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
media = [image, await FileAttachment("Ruble.png").image(), image]
Insert cell
image = FileAttachment("dos.png").image()
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
import { embed, gist, youtube } from "@jerryjappinen/embed"
Insert cell
embeds = [
youtube("PZRI1IfStY0"),
gist("jerryjappinen", "babbdaf6041b64b66beca5c4ad92745a"),
md`Slideshow in your slideshow? Why not:
${embed(
`<iframe class="speakerdeck-iframe" frameborder="0" src="https://speakerdeck.com/player/ff246b8c64834ac385cedf6f64a7a467" title="New Programmer’s Handbook" allowfullscreen="true" style="border: 0px; margin: 0px; padding: 0px; width: auto; height: 14em; aspect-ratio: 560 / 315;" data-ratio="1.7777777777777777"></iframe>`
)}`
]
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
latex = md`
## Hello

${tex`
f(\textcolor{red}{x}) = \int_{-\infty}^\infty
\hat f(\xi)\,e^{2 \pi i \xi \textcolor{green}{x}}
\,d\xi
`}
`
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
images = [
`
## Hello

![](https://picsum.photos/120)![](https://picsum.photos/140)![](https://picsum.photos/160)
`,
`![](https://picsum.photos/300)`,
`![](https://picsum.photos/510/240)`
]
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
slideStyling = [
`# Hello

Here is a picture

<img
src="https://picsum.photos/800"
style="position: absolute; top: 0; right: 0; width: 50%; height: 100%; object-fit: cover;"
>`
]
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
templates = {
function coverImage(n) {
return `<img
src="https://picsum.photos/seed/demo${n}/800/1200"
style="
position: absolute;
right: 2em;
top: 2em;
width: calc(50% - 2em);
height: calc(100% - 4em);
border-radius: 2em;
object-fit: cover;
"
>`;
}

function chapterCover(chapterNumber, chapterTitle) {
return `
<div style="width: 60%;">
${coverImage(chapterNumber)}
<h3 style="color: var(--syntax-keyword);"><strong>Chapter ${chapterNumber}</strong></h3>
<h1>${chapterTitle}</h1>
</div>
`;
}

return [
chapterCover(1, "Intro"),
"Hello world",
chapterCover(2, "Deep dive"),
"Hello again",
chapterCover(3, "Wrap-up")
];
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
customThemed = [
`# Slides
With custom CSS themes, you can complement custom templates.`,
`Hello`,
`world`,
{
theme: ["mytheme", "light"]
}
]
Insert cell
<style>
.mytheme-slide {
font-family: sans-serif;
color: #000;
background-color: yellow;
}
</style>
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
imageDeck = {
function imageSlide(src) {
return `<img src="${src}" style="position: absolute; top: 0; right: 0; width: 100%; height: 100%; object-fit: cover;">`;
}

return [
imageSlide("https://picsum.photos/1921"),
imageSlide("https://picsum.photos/1922"),
imageSlide("https://picsum.photos/1923"),
imageSlide("https://picsum.photos/1924"),
imageSlide("https://picsum.photos/1925"),
imageSlide("https://picsum.photos/1926"),
imageSlide("https://picsum.photos/1927"),

// Force dark theme for this slideshow
{ theme: "dark" }
];
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
urlDeck = ["A", "B", "C", "D", "E", "F", {
start: (urlNumbers.slide || 1) - 1
}]
Insert cell
- [Link to slide 2](?slide=2#urlDeck)
- [Link to current slide](${makeUrl({ slide: currentSlides.urlDeck + 1 }, "#urlDeck")})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
auto = [..._.range(10).map((n) => `# ${n + 1}/10`), { loop: true }]
Insert cell
timer("auto", 20) // Advance the deck "auto" every 20 seconds
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
programmaticNavigation = ["A", "B", "C", "D", "E", "F"]
Insert cell
Inputs.button("Go to last slide", {
reduce() {
return goToLast("programmaticNavigation");
}
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more