Public
Edited
Oct 30, 2023
Insert cell
Insert cell
polygon = points
Insert cell
point = {
while (true){
const circle = d3.select("circle");
if (circle._groups[0][0]){
yield circle.attr("transform").split("(")[1].split(")")[0].split(",").map(d => +d);
}
else {
yield [0, 0];
}
}
}
Insert cell
inside = geometric.pointInPolygon(point, polygon)
Insert cell
chart = {
const svg = d3.select(DOM.svg(width, height));

svg.append("polygon")
.attr("points", polygon);
const point = svg.append("circle")
.attr("r", radius)
.attr("transform", `translate(${[width / 2, height / 2]})`)
.call(drag);
function drag(sel){
const selPoint = sel.attr("data-point");
const dragGenerator = d3.drag()
.on("start", start)
.on("drag", dragging)
.on("end", end);
function start(){
sel.classed("active", 1);
}
function dragging(event){
let x = Math.round(event.x);
x = x < radius ? radius : x > width - radius ? width - radius : x;
let y = Math.round(event.y);
y = y < radius ? radius : y > height - radius ? height - radius : y;

point
.attr("transform", `translate(${[x, y]})`);
}
function end(){
sel.classed("active", 0);
}
sel.call(dragGenerator);
}
return svg.node();
}
Insert cell
height = 300
Insert cell
radius = 8
Insert cell
import {points} from "b71761c3fef9f5ed"
Insert cell
html`<style>
circle {
fill: #000;
stroke: #fff;
stroke-width: 1px;
}
circle.active {
fill: steelblue;
}
polygon {
fill: white;
stroke: #000;
}
polygon.inside {
fill: #c5fceb;
stroke: green;
}
</style>`
Insert cell
{
d3.select("polygon").classed("inside", inside);
}
Insert cell
geometric = require("geometric@2");
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