Public
Edited
Dec 13, 2022
const brush = d3.brush()
// set the space that the brush can take up
.extent([[0, 0], [width, height]])
// handle events
.on('brush', onBrush)
.on('end', onEnd);
g.append('g')
.call(brush);
function onBrush(event) {
// event.selection gives us the coordinates of the
// top left and bottom right of the brush box
const [[x1, y1], [x2, y2]] = event.selection;
// return true if the dot is in the brush box, false otherwise
function isBrushed(d) {
const cx = xScale((d.x0 + d.x1) / 2);
return cx >= x1 && cx <= x2
}
// style the dots
bars.attr('fill', d => isBrushed(d) ? recipeDistColor(d.quartiles[2]) : 'gray');
// update the data that appears in the comboArr variable
svg.property('value', comboArrAvgRecipeDist.filter(isBrushed)).dispatch('input');
}
const initialValue = comboArrAvgRecipeDist;
function onEnd(event) {
// if the brush is cleared
if (event.selection === null) {
// reset the color of all of the dots
bars.attr('fill', d => recipeDistColor(d.quartiles[2]));
svg.property('value', initialValue).dispatch('input');
}
}
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.
