Offset = require('https://bundle.run/polygon-offset@0.3.1')
{
const context = DOM.context2d(width, 600);
context.clearRect(0, 0, width, 600);
context.scale(4.5, 4.5);
context.translate(16, 16);
const path = d3.geoPath().context(context);
context.beginPath();
path({
type: "Polygon",
coordinates: [...res.margined, ...res.padding]
});
context.fill();
context.beginPath();
path({
type: "Polygon",
coordinates: res.unknown
});
context.fillStyle = "#ddd";
context.fill();
context.beginPath();
path({
type: "Polygon",
coordinates: res.polyline
});
context.strokeStyle = "green";
context.stroke();
context.beginPath();
path({
type: "MultiPoint",
coordinates: res.points
});
context.fillStyle = "red";
context.fill();
return context.canvas;
}
res = {
var points = [[0, 0], [0, 100], [150, 100], [100, 0], [0, 0]];
var offset = new Offset().arcSegments(12);
var margined = offset.data(points).margin(1);
var padding = offset
.data(points)
.padding(10)
.map(p => p.reverse());
// decides from the sign of x: negative for padding
var unknown = offset.data(points).offset(-1);
// if you want to work with the polyline - margin only
var polyline = offset.data(points).offsetLine(12);
return { points, margined, padding, unknown, polyline };
}
d3 = require("d3-geo@1")
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.
