Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Clickable Circles with D3 Rosetta

Public visualization

Viewing a saved revision (read-only)

09d4cba8d6ed455db52d88a5834909e5

Clickable Circles with D3 Rosetta

0 stars5🌍 Public
CCurran Kelleher
Last edited Jul 9, 2025
Created on Jun 20, 2025
Forked from Clickable Circles

This example demonstrates interactive selection and highlighting of circles in a scatter plot. The visualization renders six circles from a static dataset using D3 selections, and clicking any circle updates the application state, which re-runs the rendering function to apply a white fill and thick stroke to the selected point. It uses the `d3-rosetta` library's `unidirectionalDataFlow`, `createStateField`, and `one` utilities within a React-free, vanilla JavaScript setup, leveraging D3 v7 for DOM manipulation and event handling.

AI-generated description