Public
Edited
Feb 27, 2023
Paused
3 forks
18 stars
Plot.plot({
projection: "equal-earth",
width,
marks: [
Plot.sphere({ fill: "#111" }),
Plot.geo(land, {fill: "#262626"}),
link(routeData, {
x1: d => d[0][0],
y1: d => d[0][1],
x2: d => d[1][0],
y2: d => d[1][1],
mixBlendMode: "screen",
opacity: 0.15,
strokeWidth: 1.25,
stroke: "#8014b7"
})
]
})
link = {
return function link(data, options) {
const link = Plot.link(data, options);
link.project = () => {}; // disable projection, we need raw coordinates for geoPath
link.render = function (
index,
scales,
{ x1: X1, y1: Y1, x2: X2, y2: Y2 },
{ width, height, marginLeft, marginRight, marginTop, marginBottom },
{ projection }
) {
width -= marginLeft + marginRight;
height -= marginTop + marginBottom;
const context = DOM.context2d(width, height);
context.translate(-marginLeft, -marginTop);
const path = d3.geoPath().projection(projection).context(context);
context.strokeStyle = this.stroke;
context.lineWidth = this.strokeWidth;
context.globalCompositeOperation = this.mixBlendMode;
context.globalAlpha = this.opacity;
for (const i of index) {
context.beginPath();
path({
type: "LineString",
coordinates: [
[X1[i], Y1[i]],
[X2[i], Y2[i]]
]
});
context.stroke();
}
return d3
.create("svg:image")
.attr("width", width)
.attr("height", height)
.attr("x", marginLeft)
.attr("y", marginTop)
.attr("xlink:href", context.canvas.toDataURL())
.node();
};
return link;
};
}
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.
