{
const context = DOM.context2d(width, width - 40);
context.canvas.style.display = "block";
context.canvas.style.maxWidth = "100%";
context.canvas.style.margin = "auto";
context.translate(width / 2, width / 2);
line.context(context);
data.forEach(d => {
// Draw artist name
context.save();
const x = 360 * d.i / data.length * Math.PI / 180;
context.rotate(x - Math.PI/2);
context.translate(366, 0);
if (x >= Math.PI) {
context.textAlign = "right";
context.rotate(Math.PI);
context.translate(-3, 0);
} else {
context.textAlign = "left";
context.translate(3, 0);
}
context.fillText(d.name, 0, 3);
context.restore();
// Draw link lines
context.save();
context.globalCompositeOperation = "multiply";
context.strokeStyle = "lightsteelblue";
// Starting Point
const x1 = 360 * d.i / data.length * Math.PI / 180;
const y1 = 366;
d.links.forEach(l => {
// End Point
const x2 = 360 * l.i / data.length * Math.PI / 180;
const y2 = 366;
context.beginPath();
line([
{x:x1, y:y1},
{x:0, y:0},
{x:x2, y:y1},
]);
context.stroke();
});
context.restore();
});
return context.canvas;
}
line = d3.radialLine()
.curve(d3.curveBundle.beta(0.85))
.radius(d => d.y)
.angle(d => d.x)
d3 = require("d3@5")
slugify = require("slugify@1.3.5")
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.
