body {
  margin: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

/*
* https://deck.gl/docs/api-reference/extensions/brushing-extension
*/

const data = (function(pointCount) {
  const n = Math.floor(Math.sqrt(pointCount));
  const points = [];
  for (let x = 0; x <= n; x++) {
    for (let y = 0; y <= n; y++) {
      points.push({
        position: [x - n / 2, y - n / 2],
        color: [x / n * 255, y / n * 255, 128]
      });
    }
  }
  return points;
})(1e5);

const {Deck, OrthographicView, BrushingExtension, ScatterplotLayer} = deck;

new Deck({
  views: new OrthographicView(),
  initialViewState: {
    target: [0, 0, 0],
    zoom: 2,
    minZoom: 1
  },
  controller: true,
  
  layers: [
    new ScatterplotLayer({
      id: 'brushed',
      data,
      
      getPosition: d => d.position,
      getRadius: 0.5,
      getFillColor: d => d.color,
      
      // props added by BrushingExtension
      brushingRadius: 20,
      // brushingTarget: 'source',
      // brushingEnabled: true,
      
      extensions: [new BrushingExtension()]
    }),
    new ScatterplotLayer({
      id: 'all',
      data,
      getPosition: d => d.position,
      getRadius: 0.25,
      getFillColor: [0, 0, 0],
      radiusMaxPixels: 1
    })
  ]
});