PIECHART

100%

✓ Published1🌍 Public

Last edited Mar 28, 2024

Created on Mar 28, 2024

Forked from Fork of Reusable D3 Scatter Plot

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.

AI-generated description

A reusable scatter plot inspired by Towards Reusable Charts.

Shows the Iris Dataset.

MIT Licensed

Similar vizzes

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

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

81% match

Loading thumbnail…

Pie Chart Housing Data

This pie chart visualizes the distribution of median housing prices across eight income brackets, ranging from under $82,000 to $442,000 or more. Each slice represents a price range, with its size proportional to the number of homes in that category. The visualization uses d3.pie() and d3.arc() to generate the chart, while d3.scaleOrdinal with a custom color range distinguishes the segments. A legend with colored squares and labels is added using SVG rect and text elements, and the data is embedded directly as a JavaScript object rather than loaded from an external file.

BBrian Gilmore

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

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

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

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

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

75% match