Published
Edited
May 15, 2019
1 fork
28 stars
Insert cell
md`# Lineworld`
Insert cell
map = {
const canvas = DOM.canvas(width, height);
const ctx = canvas.getContext('2d');
// draw a bunch of offset coastlines
for (let distance = 202; distance > 0; distance -= 10){
ctx.drawImage(getWaterline(distance), 0, 0);
}
// colors the lines that are on land
ctx.fillStyle = '#9b935b';
ctx.globalCompositeOperation = 'source-atop';
ctx.beginPath();
path.context(ctx)(land);
ctx.fill();
// clip to globe
ctx.globalCompositeOperation = 'destination-in';
ctx.beginPath();
path({type: 'Sphere'});
ctx.fill();
// background
ctx.fillStyle = 'white';
ctx.globalCompositeOperation = 'destination-over';
ctx.fillRect(0, 0, width, height);
return canvas;
}
Insert cell
function getWaterline(distance) {
const canvas = DOM.canvas(width, height);
const ctx = canvas.getContext('2d');
ctx.strokeStyle = '#69f';
ctx.lineJoin = 'round';
// draw a big fat stroke, twice the width of desired offset distance
ctx.lineWidth = distance * 2;
ctx.beginPath();
path.context(ctx)(land);
ctx.stroke();
// now mask out most of it by drawing a slightly smaller stroke in 'destination-out' mode
ctx.globalCompositeOperation = 'destination-out';
ctx.lineWidth = (distance - 1) * 2;
ctx.beginPath();
path(land);
ctx.stroke();
// if we also want to remove the interior lines, just do a fill here as well
// ctx.fill();
return canvas;
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more