Published
Edited
Mar 22, 2020
2 stars
{
const project = (t, r = 8.5) => [
r * -Math.cos(t * Math.PI),
r * -Math.sin(t * Math.PI)
];
const step = 1 / 6;
function arc(t0, t1, r, w) {
return `<path
stroke="#32af4b"
stroke-width="${w}"
stroke-linecap="butt"
fill="none"
d="M ${project(t0, r).join(", ")} A ${r} ${r} 0 0 1 ${project(
t1,
r
).join(", ")}"
/>`;
}
return html`<svg
width="${size}"
height="${size}"
viewBox="-12 -15 24 24"
stroke="none"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect x="-11.75" y="-14.75" width="23.5" height="23.5" stroke-width=".1" stroke="#ddd" fill="none" />
${[0, 1, 2, 3, 4, 5, 6, 7]
.map(i => {
if (Math.round(fuelLevel * (7 / 100)) === i) {
return arc((i - 1) * step + 0.01, i * step - 0.01, 6.5, 9);
} else if (fuelLevel * (7 / 100) >= i) {
return arc((i - 1) * step + 0.01, i * step - 0.02, 8, 6);
} else {
return [arc(i * step - 3 * 0.02, i * step - 0.02, 8, 6)].join("");
}
})
.join("")}
</svg>`;
}
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.
