Public
Edited
Dec 12, 2022
{
let svg = html`<svg viewBox="${world.bbox[0]} ${world.bbox[1]} ${world.bbox[2] - world.bbox[0]} ${world.bbox[3] - world.bbox[1]}">
<path d="M 178.12438124381248,-17.505557252327606 L 178.37278372783732,-17.339686509201073 L 178.71838718387187,-17.629114030370843 L 178.5527855278553,-18.150422080197103 L 177.93357933579335,-18.28751932706699 L 177.38277382773828,-18.16396254902375 L 177.28557285572856,-17.723897312157433 L 177.67077670776712,-17.38030791568103 L 178.12438124381248,-17.505557252327606" fill="green" stroke="none" />
${world.arcs.slice(0, 1).map(arc => html`<path d="${arcToPath(world, arc)}" fill="green" stroke="none" />`)}
</svg>`
return svg
}
function arcToPath(top, arc) {
var x = 0, y = 0
return "M " + arc.map((pos) => {
pos = pos.slice()
pos[0] = (x += pos[0]) * top.transform.scale[0] +
top.transform.translate[0]
pos[1] = (y += pos[1]) * top.transform.scale[1] +
top.transform.translate[1]
return pos[0] + "," + pos[1]
}).join(" L ")
}
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.
