Developer @Observable
Public
Edited
May 13, 2024
Paused
Importers
invalidationListener = (target, eventType, theirInvalidation, listener) => {
target.addEventListener(eventType, listener);
theirInvalidation.then(() => target.removeEventListener(eventType, listener));
}
culoriToCss = (c) => culori.formatRgb(culori.rgb(c)).replace(/ /g, "")
culori = require("culori")
step = (group) => {
mutable allStepGroups = new Set([group, ...mutable allStepGroups]);
return htl.html`<h3 class="step-num-${group}"></h3>`;
}
mutable allStepGroups = new Set()
htl.html`
<h3>Styles are in this cell</h3>
${Array.from(allStepGroups).map(
(group) => htl.html`
<style>
:root {
counter-reset: step-counter-${group};
}
.step-num-${group} {
counter-increment: step-counter-${group};
}
.step-num-${group}::before {
content: "Step " counter(step-counter-${group})
}
</style>
`
)}
`
random = {
class Random {
number(a = null, b = null) {
if (a === null && b === null) [a, b] = [0, 1];
if (a !== null && b === null) [a, b] = [0, a];
return Math.random() * (b - a) + a;
}
int(a, b) {
return Math.floor(this.number(a, b));
}
choice(list) {
return list[this.int(list.length)];
}
}
return new Random();
}
monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
monthAbbr3 = monthNames.map((d) => d.slice(0, 3))
formatMonthAndYear = (d) => {
return `${monthAbbr3[d.getUTCMonth()]} ${d.getUTCFullYear()}`;
}
twoDigit = d3.format("0>2")
formatDollars = d3.format("$.2f")
// Pass data through an arbitrary list of (async) functions.
// Copied this from @mootari
function pipe(...args) {
if (args.length < 2) return args[0];
const isPromise = (d) => d instanceof Promise || d?.then;
return args.reduce((d, fn) => {
if (d === null) return d;
if (isPromise(d)) return d.then(fn);
return fn(d);
});
}
function compose(...funcs) {
return (...args) => {
let nextArgs = args;
for (let i = funcs.length - 1; i >= 0; i--) {
nextArgs = [funcs[i](...nextArgs)];
}
return nextArgs[0];
};
}
function geomMean(data, fn = (d) => d) {
const acc = Array.from(data, fn).reduce((acc, v) => acc * v, 1);
return Math.pow(acc, 1 / data.length);
}
importExample = (cells, { importWiths = [] } = {}) => {
let code = `import {${cells.join(", ")}} `;
if (importWiths.length) {
code += `with {${importWiths.join(", ")}} `;
}
code += `from "${pinnedSlug}"`;
return htl.html`<div>
<div style="display: inline-block; width: 100px;">
${Copier("Copy import", {
value: code
})}
</div>
<code>${code}</code>
</div>`;
}
radToTurn = (rad) => rad / TAU
turnToRad = turn => turn * TAU
degToTurn = deg => deg / 360
turnToDeg = (turn) => turn * 360
rainbowifyHeaders()
pinnedSlug = getPinnedSlug()
import { getPinnedSlug } from "@mootari/toolbox"
import { spacer } from "@observablehq/fabians-toolbox"
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.
