Skip to main content
SimilarExport ZIP
100%

Fork of My CSS Color Scatter Plot

✓ Published0🌍 Public
Ssdarsi2404@gmail.com
Last edited Mar 26, 2025
Created on Mar 26, 2025

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.

AI-generated description
MIT Licensed

Similar vizzes

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
100% match
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
84% match
Loading thumbnail…

Fork of Bar Graph Visualization

This bar chart displays the distribution of CSS color specifications across different levels, counting how many colors exist for each level. The visualization uses D3.js v7 to load a CSV file via `d3.csv`, aggregate the data with `d3.rollup`, and render an SVG bar chart using `d3.scaleBand` and `d3.scaleLinear`. Bars are drawn as SVG rectangles that turn orange on hover, with axes generated by `d3.axisBottom` and `d3.axisLeft`. The x-axis labels are rotated for readability, and the y-axis shows the number of colors per level.

Ssdarsi2404@gmail.com
82% match
Loading thumbnail…

Fork of Bar Graph Visualization

This bar chart displays the distribution of CSS color specifications across different levels, counting how many colors exist for each level. The visualization uses D3.js v7 to load a CSV file via `d3.csv`, aggregate the data with `d3.rollup`, and render an SVG bar chart using `d3.scaleBand` and `d3.scaleLinear`. Bars are drawn as SVG rectangles that turn orange on hover, with axes generated by `d3.axisBottom` and `d3.axisLeft`. The x-axis labels are rotated for readability, and the y-axis shows the number of colors per level.

Ssdarsi2404@gmail.com
82% match
Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Fork of Loading and Parsing CSV Data

This example visualizes the CSS Named Colors dataset, which maps college sports teams to their official colors and the order in which each color appears. The visualization renders as a scatter plot using the Chart.js library on an HTML canvas, with each point representing a color entry positioned by its index in the dataset. Points are colored using the actual hex values from the data, while the SVG file provides a simple film-strip graphic. The code demonstrates loading and parsing CSV data to drive the chart, with a React-based approach for structuring the application.

Cchamarthisreenivasvarma@gmail.com
79% match
Loading thumbnail…

Fork of Fork of HTML Starter 2

This visualization displays the CSS named colors as a pie chart, with each slice colored by its corresponding hex value and sized equally. The chart uses React to manage the async loading of CSV data from a GitHub gist, while d3’s `arc` and `pie` generators compute the SVG paths. The rendering leverages React DOM to mount the SVG elements, and the dataset contains 148 rows of color names and hex codes.

LLeonardo Baron
79% match
Loading thumbnail…

Fork of Fork of visualizing data with react and d3

This example visualizes CSS color names by rendering each color as a horizontal strip, stacked vertically to form a full-width gradient spectrum. The data is loaded from a CSV file using `d3.csv`, and React manages the state and rendering of the strips via inline styles. The visualization uses React 16.9 and D3 v7, with the SVG output commented out in favor of HTML divs. Each strip’s background color corresponds to the `RGB hex value` field from the dataset.

Mmeghshah612
79% match
Loading thumbnail…

Fork of Fork of Refactored Bar Chart

This example visualizes CSS named colors as a scatterplot, showing the number of move-ins per day of the week from a CSV dataset. The chart uses React state to manage data loading and rendering, with D3 v6 functions like `scaleLinear` and `extent` to compute scales and domains. SVG circles render the aggregated data points, while custom React components handle axes and marks. The code includes formatting utilities like `format` and relies on `useEffect` and `useState` hooks for data fetching.

PPatrick Feldman
78% match