Mathematician focused on teaching advanced mathematics in a "reconstuctive" way.
hex = "AAAA" // Color hex code
function color(code) {
const padding = new Array(6 - code.length).fill("0");
return `#${code}${padding.join("")}`;
} // Format string
function colorName(c) {
return fetch(`https://api.color.pizza/v1/${color(c).substring(1)}`)
.then(res => res.json())
.catch(() => {colors: [{name: "???"}]})
} // Fetch color name -- very cute! I like these vivid names like "honey and thyme" and "snake in the grass"!
colorName(hex)
{
const cn = await colorName(hex);
return cn.colors;
}
function colorBox(c, content) {
return html`
<div class="color-box">${content}</div>
<style>
.color-box {
border: 1px solid ${color(c)};
border-radius: 5px;
font-family: sans-serif;
font-size: smaller;
padding: .2rem .75rem;
box-sizing: border-box;
max-width: 640px;
display: inline-block;
}
.color-box p {
margin: 0;
}
</style>
`
}
colorBox(hex,html`
<div style="font-family:sans-serif;">today's color is...</div>
<div style="color: ${color(hex)};font-family:sans-serif;font-size:larger;"><em>${(await colorName(hex)).colors[0].name}</em></div>
`)
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.
