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)

dac80c3cee4540aeb5bbf6984570c6f0

Clickable Circles with D3 Rosetta

0 stars1🌍 Public
BBismark Kofi Owusu Sarfo
Last edited Sep 25, 2025
Created on Sep 25, 2025

This example shows a scatterplot of BMW car models positioned by x and y coordinates, with clickable circles that highlight the selected model in white with a black stroke while resetting others to black. Built with D3 v7 and the d3-rosetta library’s unidirectional data flow, it uses `setupSVG` with `one` to manage the SVG, `renderCircles` with `join` for circle rendering, and `setupClickInteraction` to handle click events that update state via `createStateField`. The data comes from a static dataset of car sales records.

AI-generated description