Skip to main content
SimilarExport ZIP
100%

Gist 7251163

✓ Published0🌍 Public
JJaapSuter
Last edited Oct 31, 2013
Created on Oct 31, 2013

This donut chart visualizes the distribution of CPU usage ranges, such as “< 50%” and “70-80%,” with each segment’s arc length proportional to the count in the accompanying CSV data. Built with d3.v3, the SVG graphic uses `d3.layout.pie` to compute the pie slices, `d3.svg.arc` to define the ring geometry, and `d3.scale.ordinal` to assign categorical colors. Labels are placed at each arc’s centroid, and the data is loaded asynchronously via `d3.csv`.

AI-generated description

Estimated vs Actual CPU usage.

Similar vizzes

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

Gist 937986

A single red donut chart fills the entire 800-by-800-pixel SVG canvas, showing five equal slices that together form a complete ring. The visualization uses D3's `d3.layout.pie` to compute the arc angles and `d3.svg.arc` with an inner radius set to 95% of the outer radius, producing a thin, ring-like donut rather than a thick pie. Each slice is filled with the same solid red color, and the data comes from a hardcoded array of five 20s in the sample.coffee file. The rendering approach relies on SVG `path` elements grouped in `<g>` elements, with the entire chart translated to the center of the canvas.

CCaged
79% match
Loading thumbnail…

Untitled

This donut chart displays the distribution of gender counts from a CSV file, with Male (113) and Female (84) shown as two slices. Built with d3.v4 and SVG, it loads data via `d3.csv`, converts the total column to numbers, and uses `d3.pie()` to compute arc angles. The `d3.arc()` generator creates the paths, while `d3.scaleOrdinal` with `d3.schemeSet2` assigns slice colors, and each slice is labeled with its group name using the arc’s centroid.

IIyke2909
78% 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
78% match
Loading thumbnail…

Gist 1077277

This example shows a small donut chart that visualizes three named data points (Tom, Sally, John) with their corresponding numeric values, using a 400 by 400 pixel SVG canvas. The chart renders each slice with a distinct color from the categorical color scale, and labels each slice with its value formatted to two decimal places. The visualization is built with D3.js version 1.25.0, specifically using the `d3.layout.pie` for the pie layout and `d3.svg.arc` to define the donut's inner and outer radii. A click handler logs the data object of a clicked slice to the console. The data is hardcoded in the script, with no external source.

CCaged
76% match
Loading thumbnail…

Fork of Making an Interactive Pie Chart

This interactive donut chart visualizes the proportion of full versus not-full scores from a CSV dataset, displaying each category’s label on its slice and a percentage tooltip on hover. Built with D3 v5, it uses `pie()` and `arc()` to generate the chart, `scaleOrdinal` for colors, and `csv()` to load the data. Mouseover events trigger a tooltip showing the computed percentage, while hover effects increase slice opacity.

SshanLU999
76% match
Loading thumbnail…

Untitled

This example displays a donut chart of browser usage statistics from January 2017, with each segment labeled by browser name. The visualization uses D3 v4’s `pie` layout, `arc` for both the outer ring and inner labels, and `scaleOrdinal` for categorical coloring. Data is loaded via `d3.csv` from "browseruse.csv" and rendered as SVG, with the title styled as a separate text element. The chart encodes percentages as arc lengths, highlighting relative market share at a glance.

SShreya Nandkumar Jadhav
76% match
Loading thumbnail…

The ratio of

This donut chart visualizes the proportion of five apple values from a static dataset. The chart uses a blue-to-red color scale and places value labels outside the donut’s outer radius, with thin pointer lines and circular markers connecting each label to its corresponding arc segment. Built with D3 v6, it uses `d3.pie`, `d3.arc`, and `d3.scaleOrdinal`, rendering labels and markers as SVG text and path elements, with label positioning calculated from arc start and end angles.

RRochelle
76% match