sr = s/2 // small hole radius
lr = l/2 // large hole diameter
rd = lr - sr // radius diff
h = th+l+th // height of o/x/etc
sa = slant * (Math.PI/180)
// slant: adjacent len to hypothenuse len
function s_a2h(w, m = 1) {
return w / Math.cos(m * slant * (Math.PI/180));
}
// slant: adjacent len to opposite len
function s_a2o(h, m = 1) {
return h * Math.tan(m * slant * (Math.PI/180));
}
// slanted stroke's top width (if vertical) or side height (if horizontal)
sth = s_a2h(th)
colors = ({
blue: "#00B3E3",
pink: "#DA3AB3",
red: "#FF4338",
orange: "#FF6B00",
green: "#05CE7C",
yellow: "#FFC843",
background: "#f6f3f2",
})
function inputsGroup(views) {
const form = html`<div style="display: flex; flex-wrap: wrap; margin: 0 -8px;">
${Object.entries(views).map(([name, view]) => {
return html`<div style="padding: 8px;">${view}</div>`;
})}
</div>`;
form.oninput = () => {
form.value = Object.entries(views).reduce((value, [name, view]) => {
value[name] = view.value;
return value;
}, {});
};
form.oninput();
return form;
}
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.
