P-001 / Notebook Series Template
loadMonospaceStylesheet = () => html`<style>@import url("https://fonts.googleapis.com/css?family=Roboto+Mono:400,700&display=swap")</style>`
defaultMonospaceStyle = (fontSize = 20) => `font-size: ${fontSize}px; font-family: roboto mono, monospace; fill: #000;`
defaultSvgTextStyle = `text-anchor: start; dominant-baseline: hanging;`
betterFontSmoothingStyle = "font-size: 100%; -webkit-text-size-adjust: 100%; font-variant-ligatures: none; -webkit-font-variant-ligatures: none; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;"
titlespan = text => `<span style="font-weight: 200; font-family: sans-serif;">${text}</span>`
datespan = text => `<span style="color: #bbb;">—${text}</span>`
colorspan = (text, color = "#ddd") => `<span style="background: ${color}; padding: 0 2px; border-radius: 5px;">${text}</span>`
desc = text => md`*${text}*`
note = text => html`
<hr style="width: ${width / 4}px; border-bottom: 2px solid var(--hr); margin: 0; padding: 0; margin-bottom: -10px; background: none;" />
${md`${text}`}
<div style="height: 25px;"></div>
`
divider = () => html`<hr style="width: ${width}px; background: no-repeat 50%/100% 2px linear-gradient(90deg,var(--hr),var(--hr));" />`
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.
