Skip to main content
SimilarExport ZIP
100%

2018: KLASCE: Half Donut

✓ Published0🌍 Public
MMisunoKitara
Last edited Jan 14, 2019
Created on Jan 14, 2019

This example shows a half-donut chart displaying a single percentage value, 80%, with a light blue filled arc against a gray background. The chart is rendered using D3 v3’s SVG creation, with a pie layout defining a half-circle angular range and an arc generator for the donut shape. The code sets the arc’s outer and inner radii, positions the label above the center, and colors the two data segments using a simple two-color array. The data is hardcoded as a proportion, with the percentage text computed and displayed prominently.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/mikeyao/'>mikeyao</a>'s block: <a href='http://bl.ocks.org/mikeyao/1c5c69b562cc4dc915a7af157e9c967e'>Half Donut</a>

mit Licensed

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

Donut chart

A donut chart displays a single numeric value of 47 as a proportion of 100, rendered with 20 equal arc segments around a central hole. Blue segments represent the value, while grey segments show the remainder, with a partial blue arc for the fractional part. Built with React and D3 v5, the code uses the `d3.arc` API to generate SVG paths, setting inner and outer radii from the SVG height, and computes angles via `Math.PI` divisions. The SVG element is selected with `d3.select`, and strokes create separation between segments.

BBhavyatulasi
80% match
Loading thumbnail…

Donut chart

This donut chart visualizes a percentage value (47%) using a segmented arc, with blue segments representing the data portion and grey segments as the background track. The chart is rendered as SVG, with each of the 20 segments drawn as a path using the d3.arc function. The code calculates segment counts and a partial final segment based on the value, and applies stroke spacing between arcs to create the separated ring effect. The visualization uses React with D3 v5 for rendering.

BBhavyatulasi
80% match
Loading thumbnail…

donut

This donut chart uses D3 version 6 to render a single, five-segment ring where each segment is a wedge of equal value. The visualization employs `d3.arc` with dynamically calculated inner and outer radii based on the segment index, and `d3.pie` to compute the arc geometry. Each wedge is filled with a color from `d3.scaleSequential` using the `d3.interpolateRainbow` palette, and labeled with its data index. The entire SVG group is positioned using a CSS transform, though the code’s intended rotation animation is present but not functional, as the rotation angle is fixed to zero.

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