Pie chart

100%

✓ Published2🌍 Public

Last edited Apr 9, 2023

Created on Mar 30, 2023

Forked from Fork of ICE7 PIE chart for vini

This visualization presents the distribution of survey respondents across different age groups using a pie chart. The chart is rendered as an SVG using React and D3 v5, with each section colored distinctly and labeled with a data value. Data is loaded asynchronously from a CSV file using `d3.csv`. The code constructs the pie using `d3.pie`, generates arcs with `d3.arc`, and applies colors via `d3.scaleOrdinal`. A legend, created with SVG `<rect>` and `<text>` elements, maps each color to its age group and member count.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Fork of Pie chart

A donut chart displays the distribution of survey respondents across different age groups, with each segment colored distinctly and labeled with its corresponding value. Legends on the right identify each age group and its member count. The visualization uses D3 v5’s `pie` and `arc` generators to compute segment paths, `scaleOrdinal` for color mapping, and `format` for number formatting. Data is fetched as CSV from a GitHub gist, and the SVG is rendered within a React component.

VVineela Reddy

89% match

Loading thumbnail…

Fork of Fork of Pie chart

This example displays an interactive pie chart showing the distribution of survey participants across different age groups, with each slice labeled with its value and accompanied by a legend listing age groups and member counts. The visualization fetches CSV data from a remote GitHub gist using `d3.csv`, then renders SVG paths with `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` for color mapping. Text labels are positioned using `arc.centroid`, and the legend is built manually with SVG rectangles and text elements. The chart is styled with custom CSS, including hover-free static rendering and a centered title.

Aajaysonu

88% match

Loading thumbnail…

Pie Chart

This pie chart displays survey data on time spent on self-study by students during COVID-19, with each slice representing a different age group and its corresponding study hours. The visualization uses d3.pie and d3.arc to generate the chart, d3.scaleOrdinal with schemeCategory10 for slice coloring, and appends SVG paths to the rendered DOM. A legend with color swatches and labels is constructed using D3 selections, while the data is loaded via d3.csv from a GitHub gist and sorted by study time before rendering.

VVAbhiram99

85% match

Loading thumbnail…

Pie Chart

This pie chart displays the population distribution across seven age groups, from under five to 65 and over, with each slice labeled and colored distinctly. The visualization is built using D3 v4, leveraging d3-dsv to parse the CSV data, d3-scale for the ordinal color encoding, and d3-shape’s `d3.pie` and `d3.arc` to compute and render the arcs as SVG paths. Labels are positioned using the arc centroid method.

Mmbostock

85% match

Loading thumbnail…

ICE-7: Pie Chart with labels

This example shows the population distribution across age groups as a pie chart. The visualization displays a colored slice for each age group, with labels placed inside the slices and a legend on the right detailing each group's name and population. The chart is rendered as an SVG using D3.js v3, loading data from a CSV file via `d3.csv`. The code defines arc geometry with `d3.svg.arc` and `d3.layout.pie`, applies a categorical color scale via `d3.scale.category20`, and positions labels using the centroid calculation `arc.centroid(d)`.

CChaitanya Galla

84% match

Loading thumbnail…

Pie chart

This interactive pie chart visualizes age-group distributions for six U.S. states, toggling between "apples" and "oranges" datasets via radio buttons. Built with D3.js v5, it uses `d3.pie` to compute arc angles, `d3.arc` for rendering donut segments, and `transition.attrTween` with an arc interpolation function to animate updates smoothly. A legend of colored dots and labels appears alongside the chart, with each state’s age categories mapped to a categorical color scale. The data loads from a local JSON file, and the SVG renders with styled strokes and transitions.

FfaRriaN

83% match

Loading thumbnail…

Pie chart

A pie chart displays the distribution of CSS named colors, with each slice colored according to its corresponding hex value. The visualization loads a CSV dataset using `d3.csv` and computes the pie layout with `d3.pie`, assigning each record an equal value. React renders the resulting arcs as SVG paths using `d3.arc`, positioned at the center of a 960×500 viewport. The chart uses D3 v5 and React 16.9, with all slices sharing a common radius and no inner gap.

NNikithakatta30

83% match

Loading thumbnail…

Pie Chart React & d3

A pie chart renders a color wheel from a CSV file of named colors, using React state to manage the asynchronous data loading. The static chart displays each color as an equally sized slice, with its fill set to the corresponding RGB hex value from the data. Built with React and D3 v7, the code uses `d3.csv` to fetch the data and `d3.pie` with `d3.arc` to generate the SVG paths. The visualization is rendered as an SVG element, centered on a 960x500 canvas.

Kkbrookshire420

83% match