Skip to main content
SimilarExport ZIP
100%

Pie Chart

✓ Published0🌍 Public
Mmbostock
Last edited Oct 7, 2018
Created on Oct 14, 2012

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.

AI-generated description

This pie chart is constructed from a CSV file storing the populations of various age groups. The chart employs a number of D3 features:

gpl-3.0 Licensed

Similar vizzes

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
86% 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
85% match
Loading thumbnail…

Donut Chart

This donut chart displays the population distribution across seven age groups, from under 5 to 65 and older, using a ring of color-coded arcs. The chart is built with D3 v3, loading data from a CSV file via `d3.csv` and rendering SVG paths. It uses `d3.scale.ordinal` for color encoding, `d3.layout.pie` to compute arc angles from the population values, and `d3.svg.arc` to define the ring geometry with an inner and outer radius. Each segment includes a label positioned at the arc’s centroid.

Mmbostock
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
83% match
Loading thumbnail…

Canvas Pie

This example shows a minimal pie chart of U.S. population by age group, with each slice labeled directly on the canvas. The data comes from a TSV file, loaded via `d3.requestTsv`. It renders using the Canvas 2D API, with `d3.arc` and `d3.pie` from d3-shape to compute the arcs and angles. Slices are filled with distinct colors, outlined in white, and age labels are placed using the arc centroid method.

Mmbostock
83% 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 Rotation on Click

This interactive pie chart displays population data by age group, with each wedge rotating to the bottom when clicked. Built with D3 v4, the visualization uses `d3.pie` and `d3.arc` to generate SVG paths, while a `transition` on the containing `<g>` element rotates the entire chart so the selected wedge aligns with the bottom. Label text rotates in the opposite direction to stay upright, and clicks are handled via the `.on("click")` method. The data is hardcoded in the script, and the chart is styled with ordinal color scales for the seven age categories.

FFrissAnalytics
83% match
Loading thumbnail…

PIECHART

This pie chart visualizes the distribution of house owners across six age groups, from under 20 to 60 and older, using data from a CSV file on housing. It categorizes each record's age into predefined ranges and counts occurrences per group. The chart renders as an SVG using `d3.pie` and `d3.arc`, with colors from `d3.scaleOrdinal` and `d3.schemeCategory10`. A separate HTML legend displays each age range alongside its count, built with D3 selections.

Rranjithkmr598@gmail.com
83% match