Gist 1077277

100%

✓ Published0🌍 Public

Last edited Jul 12, 2011

Created on Jul 12, 2011

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.

AI-generated description

Similar vizzes

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

84% match

Loading thumbnail…

Untitled

This example shows a donut chart that visualizes a small dataset of five categorical values, with each slice colored distinctly and separated by black strokes. The chart uses D3.js version 6, where `d3.pie()` computes the arc angles from the data and `d3.arc()` generates the SVG path geometries with an inner radius creating the donut hole. A color scale via `d3.scaleOrdinal()` maps each category to a unique color, while the SVG rendering is sized and centered within a fixed 450×450 viewport. The slices are semi-transparent and rendered as SVG path elements appended to a grouped container.

Nnicolekevans

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

82% match

Loading thumbnail…

donut chart w. d3-annotations

A donut chart displays six categorical values as proportional slices, with annotations positioned to the left and right of the chart. A center label appears above the visualization, though the annotation rendering is commented out, leaving only red translucent circles marking annotation anchor points. The chart uses the d3-annotation library alongside d3.v4, building the pie and arcs with `d3.pie()` and `d3.arc()`. A `d3.forceSimulation` with collision and X-axis forces arranges the right-side annotation positions, while the data is hardcoded as an array of value-label-color objects.

PPatrick Wojda

81% match

Loading thumbnail…

D3 Layouts - Pie charts

This example shows a donut-shaped pie chart that visualizes a small dataset of six numeric values. The chart is rendered as an SVG, with each value displayed as a white label at the centroid of its corresponding arc. The code uses D3’s `pie` layout generator to compute the arc segments, `d3.arc` to define the ring’s inner and outer radii, and `d3.scaleOrdinal` with `d3.schemeCategory10` to assign categorical colors. The chart is drawn using D3’s select/append API on a blank HTML page.

KKaustav Sen

81% match

Loading thumbnail…

D3: Pie layout

This example shows a donut chart built with D3.js, displaying six numeric values as colored arc segments arranged around a central hole. Each segment is labeled with its corresponding value, positioned at the centroid of the arc. The visualization uses the `d3.pie()` layout to compute the angles and `d3.arc()` to generate the SVG path shapes, with an ordinal color scale (`d3.scaleOrdinal` and `d3.schemeCategory10`) assigning colors. Data is hardcoded as an array, and all rendering is done via SVG elements in d3.v4.

深深度碎片

81% match

Loading thumbnail…

Untitled

This example shows a donut chart with labels connected by polylines, using dummy data with eight categories where three have value one and five have value nine. The chart uses d3.pie and d3.arc to generate slices with a donut hole, while d3.scaleOrdinal and d3.schemeDark2 assign colors. Labels are positioned outside the chart using outerArc centroids, with text-anchor adjusted based on the slice angle for left or right alignment. The SVG rendering includes semi-transparent fills and white stroke separations.

SSampras Dsouza

80% match

Loading thumbnail…

Untitled

This example shows a donut chart with eight categorical slices, each labeled with a letter from "a" to "h" and connected to its slice via thin polylines. The chart uses dummy data defined as an object of key-value pairs, with slice colors mapped through `d3.scaleOrdinal` and the `d3.schemeDark2` palette. It computes arc paths using `d3.pie` and `d3.arc`, with a half-radius inner hole, while labels and leader lines are positioned via a second outer arc and centroid calculations. The visualization is rendered as SVG with semi-transparent slices and white stroke separations.

AAkshay U

80% match