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")
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.