Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Brushing Circles with D3-Brush

Public visualization

Viewing a saved revision (read-only)

a2915e9d3abe4dd1b562c5f59ac55b48

Brushing Circles with D3-Brush

0 stars1🌍 Public
CCurran Kelleher
Last edited Feb 29, 2024
Created on Feb 28, 2024
Forked from Circles with D3

This example demonstrates interactive brushing on a scatterplot of six circles, where dragging a rectangular selection highlights overlapping data points. It shows how a brush can filter or emphasize specific marks in a visualization. The implementation uses D3’s `brush` module, with a `brush` event listener that checks each circle’s coordinates against the selection bounds to update a `highlightedSet` in the state. Circle styling (stroke, opacity) responds to the highlighted set, and the `end` event clears highlights when the brush is dismissed. The rendering uses SVG elements via D3’s `select` and `join` pattern.

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

Svelte

Here's a video on how to get started with Svelte as well!