Visualising the Data I - Charts

100%

Visualising the Data I - Charts

✓ Published1🌍 Public

Last edited Nov 15, 2021

Created on Nov 15, 2021

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.

AI-generated description

A program that loads in some data using D3 utilities, arc and pie and uses React to render the data as a radial burst. Data source: MDN Named Colors

MIT Licensed

Similar vizzes

Loading thumbnail…

Visualizing Data with D3

This example visualizes CSS named colors as a radial burst, with each color represented as a slice of a pie chart. It uses React to load the data from a CSV file and render the chart, while D3’s `pie` and `arc` functions compute the slice geometry and generate SVG paths. The chart displays the full spectrum of named colors, filling each slice with its corresponding hexadecimal value.

JJun Suzuki

92% match

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

91% match

Loading thumbnail…

Visualising Data With React

A colorful pie chart displays the full set of MDN CSS color names as equal-width slices, each filled with its corresponding RGB hex value. Built with React and D3 v7, the app fetches CSV data via `d3.csv` and computes the pie layout with `d3.pie` and `d3.arc`, rendering SVG `<path>` elements inside a React component using hooks for state and effects.

JJames Rhodes

91% match

Loading thumbnail…

Named Colors

A radial burst of CSS named colors visualizes the entire color palette as a full-circle pie chart. Each slice represents one named color, filled with its corresponding hex value. The visualization uses React state to manage asynchronous data loading via `d3.csv`, while `d3.pie()` and `d3.arc()` compute the slice geometry. Rendered as SVG paths, the chart spans from the center to the edge of the 960×500 pixel canvas, with data sourced from a GitHub-hosted CSV file.

AAnthony Ynami

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

90% match

Loading thumbnail…

Visualization_D3

This example visualizes the CSS named colors dataset as a radial burst, with each color represented by a wedge-shaped slice arranged around a central point. The visualization loads color data from a CSV file using D3’s `csv` utility, then renders the chart as an SVG using React components. D3’s `pie` and `arc` functions compute the angular layout and path geometry, while each path’s fill is set directly from the color’s hex value. The chart displays all named colors in a circular, pie-like arrangement without any interactivity.

JJustin Joseph

89% match

Loading thumbnail…

Rendering Data with React & D3

This example visualizes CSS named colors as a radial burst of pie slices, each filled with its corresponding RGB hex value. It loads the dataset from a CSV via D3’s `csv` utility, then uses React to render an SVG containing a path for every color, positioned with `d3.pie` and `d3.arc` to compute slice geometry. The visualization highlights the distribution of named colors around a central point.

RRajat Dangat

89% match

Loading thumbnail…

Rendering Data with React & D3

This example visualizes CSS named colors as a radial burst, with each color occupying an equal slice of a circle. It loads color data from a CSV file using d3.csv, then computes pie angles with d3.pie and generates SVG paths with d3.arc. React manages the component state and renders the SVG, while D3 handles data loading and geometry. The resulting chart displays all named colors around a central point, using their hex values as fills.

Jjuanmy400

89% match