Skip to main content
SimilarExport ZIP
100%

Donut Chart

✓ Published0🌍 Public
Xxyzcorrupt@gmail.com
Last edited Jun 23, 2024
Created on Jun 22, 2024

This donut chart displays five equal segments, each representing a donut count of 1000 from the Data.json file. The circular visualization uses a ring geometry with an inner radius of 140 and outer radius of 185, with segments colored green, blue, yellow, red, and teal. The visualization is built using D3 version 5, leveraging the `pie` API to compute arc segments and the `arc` API to generate the SVG paths. A `scaleOrdinal` color scale maps the data values to the custom color palette. The chart reads its data asynchronously from a JSON file and renders within an SVG element on an HTML page.

AI-generated description
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
87% 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
87% 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
86% match
Loading thumbnail…

Donut Chart

This donut chart displays six categorical segments arranged in a circular ring, with each slice sized proportionally to its value and distinguished by a unique color. The visualization uses static SVG paths with hardcoded coordinates to define the arc shapes, and a white circle overlay to create the donut hole effect. Rendered as a standalone React component, the chart is built with native SVG elements rather than a charting library, making it a lightweight, dependency-free example of hand-crafted data visualization.

Xxyzcorrupt@gmail.com
85% 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
85% match
Loading thumbnail…

Donut chart

A donut chart displays the value 27 as a proportion of 20 total segments, with blue arcs marking each increment of five and a partial blue arc representing the remainder. The visualization renders in SVG using React and D3 v5, calling the `arc` generator to draw each path. The chart is built by looping through 20 equal segments, filling grey arcs for the unselected portion and blue arcs for the selected value, with white strokes separating each slice.

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

Fork of Donut Chart v2

This donut chart displays proportional data from a JSON file (data.json) with country names and numeric sums, rendered as an SVG using D3.js v4. The visualization uses a pie layout with a half-radius inner hole and divergent color scheme from d3-scale-chromatic. Labels are positioned outside the arcs using polyline connectors and text elements, with the arc generator determining slice geometry and outerArc handling label placement. The example demonstrates D3’s modular approach to building interactive, data-driven graphics.

MMaeva B
83% match