The avatar for @jerryjappinen
Jerry Jäppinen
Design, tech, engineering and science. Head of Design and User Research.
Public
Libraries
Edited
Mar 25
Importers
1 star
1
Libraries
QR codesIconsTests on ObservableSlides on Observable
UI
LoopGoogle Docs on ObservableDark modeURL paramsAppwritePersistent shuffleSpider chartGraphQL on ObservableHygraph on ObservablePhysicsPermutationsContentful on ObservableEmbedEquationsGoogle Sheets on ObservableWolfram Alpha on ObservableMath
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
function formatDateTime(d, options) {
return new Intl.DateTimeFormat(locale, {
dateStyle: "medium",
timeStyle: "medium",
...(options || {})
}).format(normalizeDate(d));
}
Insert cell
Insert cell
Insert cell
Insert cell
l.region
Insert cell
weekInfo = l.weekInfo
Insert cell
firstDayIsSunday = l.weekInfo && l.weekInfo.firstDay === 7
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

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.
Learn more