selected_points = state.selected
selected_polygons = state.polygon
viewof state = {
const context = DOM.context2d(width, height),
path = d3.geoPath().context(context);
function draw(polygon) {
context.clearRect(0, 0, width, height);
context.beginPath();
path({
type: "LineString",
coordinates: polygon
});
context.fillStyle = "rgba(0,0,0,.1)";
context.fill("evenodd");
context.lineWidth = 1.5;
context.stroke();
const selected = polygon.length > 2 ? [] : data;
for (const d of data) {
const contains =
polygon.length > 2 &&
d3.polygonContains(polygon, d) &&
selected.push(d);
}
context.beginPath();
path.pointRadius(1.5)({ type: "MultiPoint", coordinates: data });
context.fillStyle = "#000";
context.fill();
if (polygon.length > 2) {
context.beginPath();
path.pointRadius(2.5)({ type: "MultiPoint", coordinates: selected });
context.fillStyle = "red";
context.fill();
}
context.canvas.value = { polygon, selected };
context.canvas.dispatchEvent(new CustomEvent('input'));
}
draw(defaultLasso);
return d3
.select(context.canvas)
.call(lasso().on("start lasso end", draw))
.node();
}
data = {
const rngx = d3.randomNormal(width / 2, Math.min(width, height) / 5),
rngy = d3.randomNormal(height / 2, Math.min(width, height) / 5);
return Array.from({ length: 5000 }, () => [rngx(), rngy()]);
}
height = Math.min(700, width * 0.9)
import { lasso } from "@fil/lasso-selection"
d3 = require("d3@5", "d3-selection@2.0.0-rc.2")
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.
