Drag and snap circles to a grid within a zoomable canvas. The zoomable canvas adds complexity in converting coordinate positions between the circles and mouse pointer. It also introduces new behavior to address with the zoom. Should the grid scale and position also transform with zoom?
In this implementation, the snap behavior repositions the circles to screen xy coordinates at dynamic grid unit sizes. The grid size is based on D3 ticks. This is visualized by the grid unit size continuously increasing or decreasing and then suddenly resetting with the canvas zoom behavior.
Drag and drop selected circles with the mouse.
Pan and zoom the canvas with the mouse.
Press spacebar to toggle the brush.