Fork of Pie chart

100%

Fork of Pie chart

✓ Published1🌍 Public

Last edited Apr 9, 2023

Created on Apr 9, 2023

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.

AI-generated description

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

Similar vizzes

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

90% match

Loading thumbnail…

Pie chart

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.

VVineela Reddy

89% match

Loading thumbnail…

Fork of Pie Chart Artistes

A donut chart displays the distribution of music genres by percentage, with each slice labeled and colored distinctly. The visualization uses D3.js to load CSV data and render an SVG, employing `d3.pie` and `d3.arc` for the donut geometry, `d3.scaleOrdinal` with a custom color range, and d3-scale-chromatic for color handling. Hovering over a slice reveals a tooltip showing the precise percentage, calculated with `d3.sum`, while mouse events and CSS transitions manage tooltip visibility.

AAnissa Belkelfa

85% match

Loading thumbnail…

Fork of Pie chart for report

This interactive donut chart displays the proportional sizes of five oblasts, with a legend showing each region’s percentage value. A menu allows the user to switch between plotting population, total, COVID, or other data categories, which updates the arc sizes and legend percentages accordingly. The visualization is built with React, rendering SVG paths generated by d3.pie and d3.arc, while d3.scaleOrdinal maps region names to colors. An unused helper embeds d3.interpolateRgb for a color gradient, and the menu responds to click events.

BbeauMarko

85% match

Loading thumbnail…

Fork of Pie chart RDW

This pie chart displays the distribution of four age groups—0-20, 20-40, 40-60, and 60+—with equal counts of 6, 6, 9, and 9 respectively. Using D3.js v6, the visualization builds an SVG with `d3.pie()` to compute arc angles and `d3.arc()` to generate the path shapes and label positions. A categorical color scale (`d3.scaleOrdinal` with `d3.schemeCategory10`) fills each slice, and text labels are placed via `label.centroid()`. The chart is centered through an SVG transform and styled with CSS.

Yyingzhe-z

84% match

Loading thumbnail…

Fork of Pie chart RDW

This example displays a donut chart showing four yearly values. It uses D3 v6 with an SVG canvas on a 400-by-400 coordinate system, centering the visualization. The code creates the chart using `d3.pie` to compute the pie segments and `d3.arc` for the outer and inner radii. A categorical color scheme, `d3.schemeCategory10`, colors each slice, while labels positioned via the arc’s centroid display the year. The data is a static inline array for 2013–2015 and 2019, and the chart is an unmodified fork of a FrontendTips tutorial.

MMar-99

84% match

Loading thumbnail…

Fork of May 3

This example shows a donut chart displaying population data for different age groups, with each segment labeled by its corresponding age. The visualization uses D3.js v4 with the `d3.arc`, `d3.pie`, and `d3.requestTsv` APIs to load and process the TSV data. It renders the chart on an HTML5 Canvas element, drawing each arc segment in a distinct color and placing text labels at the centroid of each arc using the Canvas `fillText` method. The chart is centered within a 960×500 canvas.

Mmauricio-acosta-reyes

84% match

Loading thumbnail…

Fork of pieChart

A pie chart displays the absolute frequency of categorical values, initially for student grades, within a React-based visualization. The chart animates its segments using d3.arc and a transition.attrTween, interpolating start and end angles over a 500-millisecond delay per slice. A dropdown menu allows switching between categorical columns (e.g., "note" or "student"), recalculating frequencies via d3.nest().key().rollup() and re-rendering the SVG with d3.select and path elements. Hovering activates tooltips showing each slice's key and value.

Ppreethamkesa

83% match