UN Population Data

100%

UN Population Data

✓ Published0🌍 Public

Last edited Mar 19, 2021

Created on Mar 19, 2021

This visualization displays all named CSS colours from the MDN Colour List as a single large pie chart. Each slice is drawn using D3’s `pie` and `arc` generators, with the slice fill set directly from the colour’s hex value in the data. The chart is rendered as SVG within a React component, using React hooks to load the CSV data asynchronously via D3’s `csv` function. The entire pie occupies the full width of the viewport, emphasizing the full spectrum of colour names.

AI-generated description

Loads Named Colours in CSS data using D3 and visualises with React. Data from MDN Colour List

MIT Licensed

Similar vizzes

Loading thumbnail…

Colors from MDN

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.

OOpe Kareem

88% 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

86% match

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

85% match

Loading thumbnail…

Data vizualization(css colors)

This example displays every named CSS color as a single slice of a pie chart, with each slice filled using its corresponding hex value. The visualization is generated with React and D3 v5, using the `d3.pie` layout and `d3.arc` generator to compute slice paths from a CSV of color data. An SVG element renders the result, with all slices sharing an equal arc length to create a uniform, rainbow-like disc that highlights the full spectrum of CSS color names.

Ggayatrisridhar

85% match

Loading thumbnail…

Data Viz Pie chart

This visualization displays the CSS named colors as a pie chart, with each slice colored according to its corresponding hex value. The chart renders all color categories as equal-sized arcs using React to manage the data loading state and D3’s `csv` utility to fetch the dataset from a GitHub gist. Slices are drawn with `d3.arc` and `d3.pie` methods, producing an SVG output inside a React component. The example demonstrates a straightforward integration of React for UI state with D3 for data parsing and geometric layout.

KKtuzinowski

85% 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

85% 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

85% match

Loading thumbnail…

D3 Color pie

This example visualizes the 148 named CSS colors as a single pie chart, where each slice represents one color and is filled with that color's RGB hex value. The chart is rendered using React and D3 v5, with data loaded from a CSV file hosted on GitHub. The pie layout is computed with `d3.pie()` using a constant value of 1 per row, and each slice is drawn as an SVG path via `d3.arc()`, centered within a predefined 960×480 viewport.

Ttim10133222

85% match