Public
Edited
Sep 1, 2018
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
function isPointInsidePolygon(point, vs) {
// taken from https://github.com/substack/point-in-polygon and adapted to use ES6 syntax
// and to use the data structures I'm using.
// There's also a big modification, that this algorithm will consider a point in the edge
// as **inside** the polygon. To compute that I'm using the distance from a point to a line
// https://en.wikipedia.org/wiki/Distance_from_a_point_to_a_line#Line_defined_by_two_points
// ray-casting algorithm based on
// http://www.ecse.rpi.edu/Homepages/wrf/Research/Short_Notes/pnpoly.html

const ε = 1e-20;
const [x, y] = point;

let inside = false;
for (let i = 0, j = vs.length - 1; i < vs.length; j = i++) {
const xi = vs[i][0], yi = vs[i][1];
const xj = vs[j][0], yj = vs[j][1];
const isPointWithinLineLimits = ((xi<=x && x<=xj) && (yi<=y && y<=yj))
|| ((xi>=x && x>=xj) && (yi>=y && y>=yj));
const dist = (x) * (yj - yi) - (y) * (xj - xi) + xj * yi - yj * xi;
const isPointInLine = Math.abs(dist) < ε;
if (isPointInLine && isPointWithinLineLimits) {
// console.log(`point in line [${x}, ${y}]`);
return true;
}
const isPointInTheRightHeigth = ((yi > y) != (yj > y));
const isPointToTheLeftOfLine = (x < (xj - xi) * (y - yi) / (yj - yi) + xi);
const intersect = isPointInTheRightHeigth && isPointToTheLeftOfLine;
if (intersect) inside = !inside;
}

return inside;
}
Insert cell
Insert cell
function drawPoly (poly, context, {
width = 1,
style = 'STROKE',
color = 'blue',
fillColor = 'rgba(0,0,0,0)'
} = {}) {
context.beginPath();
context.moveTo(...poly[0]);
for (let point of poly.slice(1)) {
context.lineTo(...point);
}
context.strokeStyle = color;
context.fillStyle = fillColor;
context.lineWidth = width;
context.closePath();
context.stroke();
context.fill();
context.strokeStyle = undefined;
context.fillStyle = undefined;
context.lineWidth = undefined;
}
Insert cell
function drawLine ([[x1, y1], [x2, y2]], context, {width = 1, color = 'blue'} = {}) {
context.beginPath();
context.moveTo(x1, y1);
context.lineTo(x2, y2);
context.strokeStyle = color;
context.lineWidth = width;
context.stroke();
context.strokeStyle = undefined;
context.lineWidth = undefined;
}
Insert cell
Insert cell
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