{
const height = 400;
const context =
(this && this.getContext("2d")) || DOM.context2d(width, height);
context.clearRect(0, 0, width, height);
context.strokeStyle = 'black';
context.fillStyle = 'black';
context.lineWidth = 1;
context.font = '20px arial';
context.fillText(`Radius: ${r.toLocaleString()}`, 10, height / 2 - 5);
context.fillText('0°', width - 20, height / 2 + 20);
context.beginPath();
context.moveTo(0, height / 2);
context.lineTo(width, height / 2);
context.stroke();
PIs.forEach((d, i) => {
context.strokeStyle = context.fillStyle = d3.schemeCategory10[i];
let x = width / 2 - r + i * 100 - PIs.length * 35;
// radius
let theta = d.value * 2;
context.beginPath();
context.moveTo(x, height / 2);
context.lineTo(r * Math.cos(theta) + x, r * Math.sin(theta) + height / 2);
context.stroke();
// angle text
context.fillText(
d.text == "Math.PI" || d.text.includes("/")
? `${d.text} ≈ ${d.value}`
: d.text,
x + r + 5,
height / 2 + i * 40 - 180
);
// circle
context.beginPath();
if (d.value < Math.PI) {
context.arc(x, height / 2, r, 0, d.value * 2, false);
} else {
context.arc(x, height / 2, r, d.value * 2, 0, false);
}
context.stroke();
});
return context.canvas;
}
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.
