Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Brushing Circles with D3

Public visualization

Viewing a saved revision (read-only)

22ec400f75144356ae1a28071523c8ab

Brushing Circles with D3

0 stars0🌍 Public
DDonald Bagwell
Last edited Sep 2, 2024
Created on Sep 1, 2024

This example demonstrates interactive brushing on a set of five colored circles. Users can drag a rectangular selection region, and any circle whose center falls within that area is highlighted with a thick black stroke. The visualization updates its state through D3's `brush` API, using the `on('brush')` and `on('end')` events to track the selection. The circles are rendered as SVG elements with hardcoded coordinates and colors, and the highlighted set is managed via a `Set` stored in the component’s state.

AI-generated description

Creating circles with D3.

Challenge

  • Fork this example
  • Modify it
  • Maybe make it Halloween themed
  • Maybe make it Christmas themed
  • Be creative