{
const width = "800";
const height = 600;
const marginBottom = 70;
const data = [], numPoints = 500;
for (let i=0; i<numPoints; i++) {
data.push({
id: i,
x: Math.random() * width,
y: Math.random() * height
});
}
const monSvg = d3.create("svg")
.attr("width", width)
.attr("height", height);
const myBrush = d3.brush()
.on('brush', handleBrush);
monSvg
.selectAll('circle')
.data(data)
.join('circle')
.attr('cy', 0)
.attr('cx', d => d.x)
.transition()
.duration(2000)
.delay((d,i) => i*2)
.attr('cy', d => d.y )
.attr('r', 4)
.attr('fill', '#EDB40D')
monSvg
.call(myBrush);
function handleBrush(event) {
const {selection} = event;
monSvg.selectAll("circle")
.attr('fill', d => isInBrushExtent(d, selection) ? 'red' : '#EDB40D')
}
function isInBrushExtent(d, brushExtent) {
return
d.x >= brushExtent[0][0] &&
d.x <= brushExtent[1][0] &&
d.y >= brushExtent[0][1] &&
d.y <= brushExtent[1][1];
}
yield monSvg.node()
}