Skip to main content
100%

Clickable Circles

✓ Published36🌍 Public
CCurran Kelleher
Last edited Jul 24, 2025
Created on Jul 27, 2024
Forked from Circles with D3

This example demonstrates interactive selection of circles rendered with D3.js. Each circle displays its own position and radius, and clicking one highlights it with a black stroke and raises it above the others. The visualization uses a unidirectional data flow pattern where state changes trigger re-rendering through the `viz` function. D3’s `selectAll` and `join` methods manage circle creation and updates, while click event listeners call `setSelectedDatum` to update the selected circle’s styling.

AI-generated description

Click on a circle to see it highlight!

For examples of this in various frameworks, see d3-rosetta

MIT Licensed

Similar vizzes