The avatar for @jerryjappinen
Jerry Jäppinen
Design, tech, engineering and science. Head of Design and User Research.
Public
Libraries
Edited
Apr 26
Importers
1 star
1
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
baseStyles = html`<style>${baseStylesCss}</style>`
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
l.firstDayOfWeek
Insert cell
l.calendars
Insert cell
hours12 = l.hourCycles[0] === "h12"
Insert cell
hours24 = !hours12
Insert cell
l.textInfo.direction
Insert cell
rightToLeft = l.textInfo.direction === "rtl"
Insert cell
l.weekInfo
Insert cell
firstDayIsSunday = l.weekInfo && l.weekInfo.firstDay === 7
Insert cell
firstDayIsMonday = !firstDayIsSunday
Insert cell
Insert cell
timezone = Intl.DateTimeFormat().resolvedOptions().timeZone
Insert cell
Insert cell
Insert cell
currency = "EUR"
Insert cell
Insert cell
Insert cell
Insert cell
fahrenheit = probablyPrefersFahrenheit
Insert cell
imperial = probablyPrefersImperial
Insert cell
probablyPrefersFahrenheit = locale.indexOf("-US") > 0 || locale.indexOf("-LR") > 0 || locale.indexOf("-KY") > 0
Insert cell
probablyPrefersImperial = locale.indexOf("-US") > 0 || locale.indexOf("-LR") > 0 || locale.indexOf("-KY") > 0
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
colors.veryLightGrey
Insert cell
<div style="background: ${colors.washedRed};">Hello</div>
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
async function videoPlayer(video, width) {
return html`<video controls width="${width || 640}">
<source src="${await video.url()}" type="${video.mimeType}" />
<a href="${await video.url()}">Download video</a>.
</video>`;
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
fullscreenButton()
Insert cell
<div style="background: lightblue; padding: 1em;">Hello world (<code>isFullscreen == ${isFullscreen}</code>)</div>
Insert cell
Insert cell
<style>

::backdrop {
background-color: white;
}

:fullscreen {
background-color: purple;
}

:fullscreen div {
box-sizing: border-box;
text-align: center;
height: 200px; /* This could be 100vh */
}

</style>
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
clipboardCopyButton("Hello world!")
Insert cell
clipboardCopyLink("Hello world")
Insert cell
Insert cell
Insert cell
Insert cell
space()
Insert cell
space(2)
Insert cell
Insert cell
Insert cell
html`${loader(0)}`
Insert cell
html`${loader(1)}`
Insert cell
Hello ${loader(true)}
Insert cell
Hello ${loader(false)}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
toc({ closed: true })
Insert cell
toc({ select: "h1" })
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