Wise Fool.
Visioneer.
Public
Edited
May 13, 2024
Importers
2 stars
${note.info()}
${note.tip()}
${note.wip()}
${note.attention()}
${note.caution()}
${note.warning()}
${note.danger()}
${note.prohibited()}
${note.stop()}
${note.info("Observable is a powerful visualization platform.")}
${note.tip("You can also invest in Baby Bonds, a government policy in which every child receives at birth a publicly funded trust account, potentially with more generous funding for lower-income families.")}
${note.wip("**Potentially incompatible API changes** in progress.")}
${note.attention("**x and y are swapped** here because in the tree layout, x is the breadth, but when displayed, the tree extends left and right rather than down.")}
${note.caution("***Slippery*** when wet.")}
${note.warning("Alpha version only.")}
${note.danger("May lead to inconsistent data and corrupt your database. Use with care.")}
${note.prohibited("No swimming. No diving. <br/> Rip current.")}
${note.stop("Do not backup! Severe tyre damage.")}
note.info("Observable is a powerful visualization platform.")
{
const {warning} = note;
return warning("Alpha version only.")
}
noteTypes = ({
info: {
glyph: "ℹ️",
type: "info",
purpose: "general helpful information",
background: "azure",
},
tip: {
glyph: "💡",
type: "tip",
purpose: "a useful piece of advice",
background: "honeydew",
},
wip: {
glyph: "🚧",
type: "construction",
purpose: "work in progress",
background: "ivory",
},
attention: {
glyph: "👉",
type: "caution",
purpose: "exceptional situation",
background: "antiquewhite",
},
caution: {
glyph: "☡",
type: "caution",
purpose: "potentially hazardous situation which can result minor or moderate injury or damage",
background: "antiquewhite",
},
warning: {
glyph: "⚠️",
type: "warning",
purpose: "potentially hazardous situation which can result in death or serious and irreversable injury or damage",
background: "lavenderblush",
},
danger: {
glyph: "☠️",
type: "tip",
purpose: "imminently hazardous situation which can result in **death** or **serious irreversable injury or damage**",
background: "mistyrose",
},
prohibited: {
glyph: "🚫",
type: "prohibited",
purpose: "officially forbid something and prevent something by making it impossible",
color: "crimson",
background: "snow",
border: "red",
},
stop: {
glyph: "🛑",
type: "stop",
purpose: "do not go beyond this point",
background: "darkred",
},
})
note = map(noter)(noteTypes)
// takes fn and object
// returns new isomorph object with fn applied to all values
map = (fn) => (object) => Object.keys(object).reduce((accu, key) => ({...accu, [key]: fn(key)}), {})
// takes note type
// returns function that takes text and returns corresponding html note
noter = (type = "info", stops = 1) => (text) => {
const {glyph, background, color, border, purpose} = noteTypes[type];
const fontColor = color || contrast(background);
const style = ({
"font-family": "sans-serif",
"color": color || contrast(background),
"list-style-type": `'${glyph} '`,
"background-color": background,
"border-left": `0.2rem ${border || darken(saturate(background, 2), stops)} solid`,
"padding": "8px 45px",
});
const t = type.toUpperCase();
text = md`${text || purpose}`;
return htl.html`<ul ${{style}}><li><strong>${t}</strong></li><span>${text}</span>`;
}
function darken(color, k = 1) {
const {l, c, h} = d3.lch(color);
return d3.lch(l - 18 * k, c, h);
}
lighten = (color, k = 1) => darken(color, -k)
function saturate(color, k = 1) {
const {l, c, h} = d3.lch(color);
return d3.lch(l, c + 18 * k, h);
}
contrast = (color) => lrgb_luminance(rgb_lrgb(d3.rgb(color))) >= 1/2 ? "black" : "white"
import {lrgb_luminance, rgb_lrgb} from "@mbostock/wcag-contrast-ratio"
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.
