Skip to main content
100%

fresh block

✓ Published0🌍 Public
Aadgramigna
Last edited Feb 9, 2017
Created on Feb 9, 2017

This example shows a donut chart that visualizes categorical data as percentage-labeled arcs, with each slice colored from a seven-color ordinal scale. The visualization is built with D3 v4, using `d3.pie` to compute arc angles, `d3.arc` for both the filled slices and their labels, and `d3.scaleOrdinal` for coloring. Data is loaded from a CSV file via `d3.csv`, with values parsed to numbers and percentages calculated relative to the total. The SVG rendering positions labels using `labelArc.centroid`, and the chart is centered on a 960×500 canvas.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/adgramigna/'>adgramigna</a>'s block: <a href='http://bl.ocks.org/adgramigna/79f3719a902e393f1ed68b404747a21e'>fresh block</a>

mit Licensed

Similar vizzes

Loading thumbnail…

fresh block

A donut chart displays the age distribution of a population from a CSV file, with seven categorical age groups shown as colored arcs and white labels. The visualization uses D3 v4’s `d3.pie` and `d3.arc` to generate the SVG paths, while `d3.scaleOrdinal` assigns a categorical color palette. Labels are positioned using `d3.arc` centroids, and the chart is centered within a 960×500 SVG canvas. Data is loaded asynchronously via `d3.csv`, and each arc’s fill color corresponds to its age category.

Aarcox80
91% match
Loading thumbnail…

fresh block

A pie chart displays the percentage distribution of values from a CSV file, with each slice labeled by its share of the total. The visualization uses D3 v4’s `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to compute angles, draw SVG paths, and assign a categorical color palette. Labels are positioned via `labelArc.centroid` and formatted with `d3.format`. Data is loaded asynchronously with `d3.csv`, and the chart is rendered as SVG centered on a 960×500 canvas.

Aadgramigna
90% match
Loading thumbnail…

fresh block

This example presents a donut chart displaying the age distribution of a population, with each slice colored and labeled by age group. The chart is created using D3 v4, employing the `d3.pie` function to compute arc segments and the `d3.arc` API for rendering both the chart's path and label positioning. Data is loaded from a CSV file with columns for age and population, and the ordinal color scale assigns distinct colors to each category. The visualization renders as an SVG element, with white text labels placed at the centroid of each arc for clarity.

JJennKempCodes
88% match
Loading thumbnail…

fresh block

This example shows the age distribution of a population as a donut chart, with each slice labeled by its age bracket and colored using an ordinal scale. The visualization is rendered as SVG using D3 v4, applying `d3.pie` to compute the arc angles and `d3.arc` to generate the paths and label positions. Data is loaded from a local CSV file with population counts per age group, and the chart centers itself in an 960×500 viewport. The code uses D3’s data join to append arc groups, paths, and text elements.

Aadamverdin
88% match
Loading thumbnail…

fresh block

This example shows a simple pie chart visualizing three data values (10, 20, 100) as proportional slices. The chart uses an SVG rendering with D3 v4, creating arcs with a white stroke separation. Colors are assigned via a categorical ordinal scale with a muted three-color palette. The pie layout uses `d3.pie` with null sorting, while `d3.arc` defines the slice geometry, keeping the label text commented out. The visualization is static, with the data hardcoded in the script.

KKacieW
86% match
Loading thumbnail…

donut chart

This donut chart displays three proportional values as colored arc segments, with percentage labels positioned outside the chart. The visualization uses D3 v4’s `d3.pie()` and `d3.arc()` functions to compute segment angles and paths, rendering the SVG chart dynamically. An interactive element positions HTML labels via absolute styling, calculating their coordinates from the arc centroids and canvas dimensions. The static data is embedded in the code, with colors and suffixes defined per segment. Bare bones and functional, it demonstrates a simple, clean alternative to a standard pie chart.

PPatrick Wojda
85% match
Loading thumbnail…

Untitled

This example shows a donut chart that distributes categorical data into seven colored arcs, with each slice labeled by its corresponding category name. It renders directly to a Canvas element using the `d3.arc` and `d3.pie` APIs from D3 v4, with data loaded from an external TSV file via `d3.requestTsv`. The chart translates the Canvas context to center it, fills each arc with a distinct color from a predefined palette, applies white stroke separators, and places labels along the inner ring using `labelArc.centroid`.

Mmauricio-acosta-reyes
83% match
Loading thumbnail…

fresh block

A donut chart displays the value and percentage for eight iPad models, with each wedge colored by a categorical scale and connected to a labeled callout line. The visualization uses D3 v3’s `d3.layout.pie` and `d3.svg.arc` to generate the arcs, while a custom `relax` function iteratively adjusts overlapping text labels, shifting their `y` positions and updating the corresponding line endpoints to reduce clutter. The code mixes D3 v3 and v4 scripts, rendering to SVG.

KKacieW
83% match