Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Basic brush practice

Public visualization

Viewing a saved revision (read-only)

815512e8d94a4bfdb17989d46869a75c

Basic brush practice

0 stars1🌍 Public
JJunyanL
Last edited Mar 4, 2020
Created on Jan 12, 2020

This example demonstrates interactive brushing on a 400×400 SVG canvas, where a single circle changes color based on whether it falls within the user’s brush selection. The brush updates the circle’s fill to blue when selected and red otherwise, using animated transitions. Built with React and D3 v5, the code leverages `d3.brush`, `d3.select`, and `d3.event.selection` to detect the brushed region and compare its coordinates against the circle’s position. The brush extent is fixed to the full canvas, and the color change triggers on both brush start and end events.

AI-generated description