flatten-js Tutorials. Getting Startedflatten-js Tutorials. Messing Aroundflatten-js Tutorials. Polygons
flatten-js Tutorials. Planar Set
stage = d3.select(DOM.svg(width, height))
planarSet = new Flatten.PlanarSet()
shapes = {
let {point} = Flatten;
let data = d3.range(2500).map( () => point(Math.random() * width, Math.random() * height) );
data.forEach((pt, index) =>
planarSet.add({box:pt.box,value:index}));
// append points to svg container
let shapes = stage.selectAll()
.data(data)
.enter().append("circle")
.attr("cx", d => d.x )
.attr("cy", d => d.y )
.attr("r", 3)
.style("fill","darkblue")
.attr("id", (d,i) => "id"+i.toString())
return shapes;
}
{
let selection = []; // current selection
// Define brush object and attach callback to "brush" event
let brush = d3.brush()
.on("brush", brushed);
// Add brush to stage
stage.append("g")
.call(brush)
.call(brush.move, [[width/4, height/4], [width/2, height/2]]); // initial brush size
// "Brush" event handler
function brushed() {
let extent = d3.event.selection; // brush rectangle
// clear old selection
for (let item of selection) {
d3.select(`#id${item.value}`)
.style("fill","darkblue")
}
let t1 = performance.now();
// Planar set query will return array of id's
let resp = planarSetQuery(extent[0][0], extent[0][1], extent[1][0], extent[1][1]);
let t2 = performance.now();
mutable elapsed_time = t2 - t1;
// set color of selected shapes to red
selection = []; // keep current selection
for (let item of resp) {
d3.select(`#id${item.value}`)
.style("fill","red")
selection.push(item);
}
}
}
function planarSetQuery(xmin, ymin, xmax, ymax) {
let box = new Flatten.Box(xmin, ymin, xmax, ymax);
let resp = planarSet.search(box);
return resp;
}
Flatten = require("@flatten-js/core")
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.
