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)

dfb1d76ac21447edaf82bef21c8513e3

Clickable Circles with D3 Rosetta

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

This interactive scatterplot displays BMW sales data from 2010 to 2024, plotting vehicle Price_USD against Sales_Volume. Clicking any circle highlights that datum with a white fill and thick black stroke while resetting all others to black. The visualization uses d3-rosetta’s `unidirectionalDataFlow`, `createStateField`, and `createMemoize` to manage state and cache data loading. D3 v7 scales (`scaleLinear`) and selections render circles, while `setupClickInteraction` binds click events that update the selected ID, triggering automatic re-rendering.

AI-generated description