Colors from MDN

100%

Colors from MDN

✓ Published0🌍 Public

Last edited Nov 25, 2022

Created on Nov 25, 2022

This visualization displays all 148 named CSS colors from the MDN dataset as a circular pie chart, with each slice filled by its corresponding hex value. Built with React and D3 v5, the code uses the `pie` and `arc` functions from the d3 library to calculate slice angles and render SVG paths, automatically assigning equal angles to each color. The `csv` function fetches the color data from a GitHub Gist, and React's `useState` and `useEffect` hooks manage the asynchronous loading.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

Loading thumbnail…

Visualising the Data I - Charts

This example visualizes the 148 named CSS colors from MDN as a radial burst, with each color represented by a pie-slice path arranged around a central point. The visualization uses D3’s `csv` loader to fetch the dataset, `pie` to compute the angular segments, and `arc` to generate the SVG paths. React manages the component state and renders the SVG output. The data source is the MDN Named Colors list, and the rendering is done entirely through SVG elements.

CChris Briggs

91% match

Loading thumbnail…

MDN: CSS Color Wheel

This example renders a radial burst of all named CSS colors as a pie chart, with each slice filled by its corresponding hex value. The visualization uses React to manage state and render the SVG, while D3 v7’s `csv` loader fetches the color data from a GitHub gist and `pie` and `arc` compute the slice geometry. The chart fills the entire viewport, with slices radiating from the center to the window’s edge.

JJohn Lewis

91% match

Loading thumbnail…

css named colors

A pie chart displays all 148 CSS named colors, with each slice filled using that color’s hexadecimal value from a CSV dataset. Built with React and D3 v6, the visualization uses `d3.pie` and `d3.arc` to compute and render the SVG paths. The data is loaded asynchronously via `d3.csv` from a GitHub gist, with the chart centered in a 960×500 viewport.

CCarlos Caballero

90% match

Loading thumbnail…

Using d3 arcs

This visualization displays all named CSS colors as a single pie chart, with each slice representing one color from a CSV dataset loaded via `d3.csv`. Using React hooks like `useState` and `useEffect`, the code fetches the color data and renders it as SVG paths. The chart relies on D3’s `pie()` generator to compute arc angles for each color, while the `arc()` generator with `innerRadius(0)` and `outerRadius(600)` draws the filled slices. The data comes from the MDN CSS color reference, showing the full spectrum of color names in one circular layout.

MmohitPassan

90% match

Loading thumbnail…

Pie Chart

This pie chart displays the proportional distribution of the 148 named CSS colors by mapping each color to an equal-angle slice of a circle. The visualization is built with React, using the D3.js `pie` and `arc` functions to generate the path geometry, and renders as an SVG. Each slice is filled with the corresponding hex value from a CSV dataset of named CSS colors, loaded via D3's `csv` method. The chart effectively shows all colors at once, with the full wheel centered on the canvas.

Nnicklaus-roy

90% match

Loading thumbnail…

CSS color visualization

This visualization displays all CSS color names as a pie chart, with each slice colored by its corresponding hex value. The chart is generated in React using d3.v6's pie layout and arc generators to compute the slice geometries. Data is fetched from a Google Sheets CSV, and the resulting SVG renders each path with a fill color taken directly from the spreadsheet’s "Hex value" column. The code relies on React state and effects to load the remote dataset asynchronously.

KKelly Egan

90% match

Loading thumbnail…

data about css named colors

This visualization displays all CSS named colors as a circular pie chart, with each color represented as a slice arranged around the center. The data is loaded from a CSV file using `d3.csv` and rendered as SVG paths. React state via `useState` and `useEffect` manages the asynchronous data loading and triggers re-rendering. Each slice is generated using D3's `arc` generator, with the fill color set directly from the hex value in the dataset.

Nnncis

90% match

Loading thumbnail…

Fork of Rendering CSS Named Colors - Arc (Using pie)

This example visualizes all 148 CSS named colors as a pie chart, with each slice filled using its corresponding RGB hex value from a CSV dataset provided by MDN. The React application loads the data via d3.csv, then uses d3.pie to compute the arc segments and d3.arc to generate the SVG path geometries for each slice. The resulting chart is rendered as an SVG within a 960×500 canvas, centered on the display.

Ppranav-vis

90% match