Public
Edited
Oct 4, 2019
1 fork
5 stars
{
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);
artists.forEach(({name, i}) => {
const x = 360 * i / artists.length * Math.PI / 180;
context.save();
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(name, 0, 3);
context.restore();
});
context.globalCompositeOperation = "multiply";
context.strokeStyle = "lightsteelblue";
// context.lineWidth = "2";
data.forEach((d) => {
// Starting Point
const i1 = artistIndex[slugify(d.name)].i;
const x1 = 360 * i1 / artists.length * Math.PI / 180;
const y1 = 366;
// End Point
const i2 = artistIndex[slugify(d.parent_name)].i;
const x2 = 360 * i2 / artists.length * Math.PI / 180;
const y2 = 366;
// Middle Point
let xm;
if(Math.abs(x1 - x2) > Math.PI) {
xm = x1 - (x1 - x2)/2;
}
const ym = 275;
context.beginPath();
line([
{x:x1, y:y1},
{x:0, y:0},
{x:x2, y:y1},
]);
context.stroke();
});
return context.canvas;
}
width
radius = width / 2
line = d3.radialLine()
.curve(d3.curveBundle.beta(0.85))
.radius(d => d.y)
.angle(d => d.x)
artists = Object.values(artistIndex)
data = d3.csvParse(csv)
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.
