100%

Fork of Fork of Rendering Data with React & D3

✓ Published0🌍 Public

Last edited Jul 27, 2025

Created on Jul 27, 2025

Forked from Fork of Rendering Data with React & D3

This interactive color wheel visualizes all CSS named colors as segments in a customizable pie chart, loaded from a CSV data source. Users can sort colors by hue, lightness, saturation, or alphabetically, and adjust inner and outer radii to create donut variations. Hovering reveals details like hex, RGB, HSL, and luminance values alongside aggregate statistics. The visualization uses React 18 for UI state management, d3.csv for data loading, and d3.pie and d3.arc for SVG path generation.

AI-generated description

Interactive CSS Color Wheel

An interactive visualization of CSS named colors using React and D3.js. This application displays all CSS named colors in a customizable pie chart format, allowing users to explore color relationships and properties.

Features

Interactive Color Wheel: Hover over color segments to see detailed information
Multiple Sorting Options: Sort colors by hue, lightness, saturation, or alphabetically
Customizable Appearance: Adjust inner and outer radius to create different wheel styles
Detailed Color Information: View hex, RGB, HSL values and luminance for each color
Color Statistics: See aggregate statistics about the color palette
Responsive Design: Works on desktop and mobile devices

Color Sorting Options

Original Order: Colors as they appear in the CSS specification
Hue: Colors sorted by their hue value (0-360°)
Lightness: Colors sorted from dark to light
Saturation: Colors sorted from gray to vibrant
Alphabetical: Colors sorted by name

Controls

Sort by: Choose how colors are arranged around the wheel
Inner Radius: Adjust to create a donut chart effect (0 = full pie)
Outer Radius: Change the overall size of the color wheel

Color Information

Hover over any color segment to see:

Color name
Hex value
RGB values
HSL values
Calculated luminance

Statistics

The app displays aggregate statistics including:

Total number of colors
Average hue, saturation, and lightness values

Technology Stack

React 18: For component-based UI
D3.js 7: For data processing and SVG generation
CSS3: For modern styling and responsive design
ES6+: Modern JavaScript features

Data Source

Color data is loaded from a CSV file containing all CSS named colors with their corresponding hex values.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Rendering Data with React & D3

This visualization displays 148 CSS named colors as a radial burst, with each color represented as a wedge in a pie chart. The example uses React to manage the asynchronous loading of color data from a CSV file hosted on GitHub, while D3’s `pie`, `arc`, and `csv` utilities calculate the arc paths and parse the data. The active chart renders an SVG with each path filled by its corresponding hex value, demonstrating a seamless integration of React’s state management with D3’s geometric computations.

SSam(Hessamoddin) Kaveh

93% match

Loading thumbnail…

Fork of Rendering Data with React & D3

A circular color wheel displays CSS named colors from a CSV dataset, with each color occupying an equal slice. Built with React and D3 v5, the visualization uses `d3.csv` to load data and `d3.pie` with `d3.arc` to compute and render SVG paths. React manages state and rendering, while D3 handles the pie geometry and arc generation.

VVlad Tukhtarov

93% match

Loading thumbnail…

Fork of Rendering Data with React & D3

This visualization displays all 148 CSS named colors as a radial burst of pie slices, each colored by its hex value. The code loads the CSV data from a GitHub gist using `d3.csv`, then uses `d3.pie` to compute the angles and `d3.arc` to generate paths. React handles rendering with SVG, mapping each slice to a `<path>` element whose fill comes from the `RGB hex value` column. The example demonstrates a minimal integration of React state management with D3’s data-processing utilities.

DDineshNikam

92% match

Loading thumbnail…

Fork of Rendering Data with React & D3

This visualization displays all CSS named colors as a full-circle pie chart, with each color occupying a wedge based on its position in the dataset. The example integrates React and D3, using React’s `useState` and `useEffect` hooks to load CSV data asynchronously, then rendering SVG paths via the `d3.pie` and `d3.arc` utilities. Each wedge is filled with its corresponding hex value from the CSS named colors dataset, which is fetched from a gist URL.

Yyastika

92% match

Loading thumbnail…

Fork of Rendering Data with React & D3

This visualization displays all CSS named colors as a radial burst, with each color represented by a wedge in a pie chart. React manages the component state and rendering, while D3 utilities handle data loading and geometry: `d3.csv` fetches the color dataset, and `d3.pie` and `d3.arc` compute the arc positions. The data source is a CSV file of CSS color names and their RGB hex values, loaded asynchronously and rendered as SVG paths.

Aaliciaadj

92% match

Loading thumbnail…

Fork of Rendering Data with React & D3

This visualization displays all CSS named colors as a radial pie chart, with each slice colored according to its corresponding hex value. The code uses React hooks (useState, useEffect) to fetch and store the data from a CSV file listing CSS color names, then applies D3’s pie and arc generators to compute the layout. The resulting SVG paths are rendered by React, with each color’s name shown as a tooltip via a title element. The chart uses an outer radius spanning the full width of the viewport.

JJoachim Klug

92% match

Loading thumbnail…

Fork of Rendering Data with React & D3

This visualization displays all CSS named colors as a radial burst of pie slices, with each slice filled by its corresponding hex value. It uses React to manage state and render the SVG, while D3 utilities load the CSV data from a GitHub gist and compute the pie chart geometry. The code employs `d3.csv`, `d3.arc`, and `d3.pie` to fetch and transform the data, and React’s `useEffect` and `useState` handle the asynchronous loading and rendering. The colorful result provides a comprehensive, at-a-glance overview of the color palette.

Ffjvoris

92% match

Loading thumbnail…

Fork of Rendering Data with React

A circular color wheel displays 148 named CSS colors as pie slices, each filled with its corresponding RGB hex value. The visualization loads data from a CSV file using `d3.csv`, then renders each slice as an SVG `<path>` element via `d3.arc`. React manages the data fetching with `useState` and `useEffect`, while `pieArc` calculates the angular segments. The example demonstrates the integration of React 16.9 and D3 v7 for data-driven SVG rendering, with a loading message shown until the dataset arrives.

Aalexanderjpark

92% match