{
const SVG = html`
<svg width=${width} height=${width} style="border: solid 1px black">
<line x1="${width / 2}" y1="0" x2="${width /
2}" y2="${width}" style="stroke:red;stroke-width:1" />
<line x1="0" y1="${width / 2}" x2="${width}" y2="${width /
2}" style="stroke:red;stroke-width:1" />
<path d="M ${width / 2} ${width / 2}
L ${width / 2 - r} ${width / 2}
A ${r} ${r} 0 ${d > 180 ? 1 : 0} 1 ${width / 2 + endX} ${width / 2 +
endY}
L ${width / 2} ${width / 2}
" stroke="black" fill="green" stroke-width="2" fill-opacity="0.4"/>
</svg>
`;
return SVG;
}
radian = d * (Math.PI / 180)
endX = {
return Math.cos(Math.PI - radian) * r;
}
endY = {
return -Math.sin(radian) * r;
}
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.
