{"version":"1.0","type":"rich","title":"Using CSS Variables in JS","description":"This interactive scatter plot demonstrates dynamic theme switching through CSS variables. A menu lets users toggle between three color palettes—ggplot, Tableau 10, and BBC Primary—with selections persisted via localStorage. D3’s `select`, `join`, and event handlers render six circles positioned from static data, while `getComputedStyle` reads the active theme’s CSS custom properties to update fill colors on each theme change.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/a2a018f5a241439bbb583afd0211eea4?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}