Skip to main content
SimilarExport ZIP
100%

Using CSS Variables in JS

✓ Published0🌍 Public
CCurran Kelleher
Last edited Jul 2, 2025
Created on Jul 2, 2025

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

CSS Colours

This example visualizes the named colors of the CSS color specification as a scatterplot-like display. It uses D3 v3 to fetch a CSV file of color names and their corresponding RGB values, then renders each color as a distinct visual element based on its hue and lightness. The code employs D3’s asynchronous data loading and text parsing to process the external dataset. The result is a compact survey of the standard CSS color palette, organized to reveal relationships and distribution across the color space.

Kknmalinski
76% match
Loading thumbnail…

SPAC Interactive Color Legend

This interactive scatterplot displays CSS named colors as a radial burst, with a color legend that highlights matching data points on hover. The visualization uses D3 utilities for data loading and scales (scaleLinear, scaleOrdinal, extent, max), while React components render the SVG marks, axes, and interactive legend. Users can select different attributes from dropdown menus to change the x and y axes, and hovering over a legend item fades non-matching points to 30% opacity. The data comes from a CSV file loaded asynchronously via D3’s csv function.

Ppnlinyz
74% match
Loading thumbnail…

Interactive Color Legend with Menus

An interactive scatter plot of the College Dataset explores relationships among academic metrics. Dropdown menus switch the X and Y attributes, while hovering over the ordinal color legend highlights points from either public or private institutions by fading non-matching circles. The React and D3 v5 implementation uses `scaleLinear` for axes, `scaleOrdinal` for colors, and React state to manage selections and hover interactions, rendering the SVG marks with reusable axis and legend components.

AAlaouiadnane
73% match
Loading thumbnail…

Fork of My CSS Color Scatter Plot

This scatter plot visualizes CSS color specifications, mapping each named color’s CSS level (1 through 4) on the x-axis against its computed luminance (brightness) on the y-axis. Each circle is filled with its corresponding hex value, revealing how brightness varies across specification releases. The code uses d3.csv to load color data from a GitHub gist, then applies d3.scaleLinear for both axes, d3.axisBottom and d3.axisLeft for ticks, and SVG circles with custom hex-to-luminance conversion. The chart also rotates x-axis labels and includes axis titles for readability.

Ssdarsi2404@gmail.com
73% match
Loading thumbnail…

Fork of My CSS Color Scatter Plot

This scatter plot visualizes CSS color specifications, mapping each named color’s CSS level (1 through 4) on the x-axis against its computed luminance (brightness) on the y-axis. Each circle is filled with its corresponding hex value, revealing how brightness varies across specification releases. The code uses d3.csv to load color data from a GitHub gist, then applies d3.scaleLinear for both axes, d3.axisBottom and d3.axisLeft for ticks, and SVG circles with custom hex-to-luminance conversion. The chart also rotates x-axis labels and includes axis titles for readability.

Ssdarsi2404@gmail.com
73% match
Loading thumbnail…

CSS Colors with React & D3

A pie chart displays the distribution of CSS named colors, with each slice filled using the color’s own RGB hex value. The chart is built with React for component rendering and D3 v5 utilities, including `csv` to load the data, `pie` to compute slice angles, and `arc` to generate SVG path geometry. Rendered as SVG, the visualization loads from a CSV of named colors and updates once the data arrives.

Ddvinubius
72% match
Loading thumbnail…

Reusable Scatterplot with 3 variable menus

This interactive scatterplot displays the Iris dataset, allowing users to dynamically select which variable controls the x-axis, y-axis, and point radius through three dropdown menus. Built with D3 version 7, it uses `d3.csv` to load data and `d3.scaleLinear` and `d3.scaleSqrt` for scaling. SVG circles transition smoothly between positions and sizes via `d3.transition`, while axes update through `d3.axisLeft` and `d3.axisBottom`. The code implements reusable chart and menu functions, demonstrating D3's `dispatch` event system for handling user interactions.

BBryan Baird
72% match
Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates an interactive scatter plot where users can dynamically select which data columns to display on the x- and y-axes using dropdown menus. It visualizes relationships between numeric attributes like horsepower, weight, and acceleration. The visualization uses D3 v5 with SVG rendering, employing `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` for scales and axes. Circles transition smoothly to new positions over one second using chained `transition` and `delay` methods when axes change, with data loaded from a CSV file containing automotive specifications.

OOsekovS
72% match