Donut Chart

100%

✓ Published0🌍 Public

Last edited Jul 7, 2024

Created on Jun 30, 2024

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

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

86% 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 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.

Xxyzcorrupt@gmail.com

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

85% match

Loading thumbnail…

Donut Chart D3

This interactive donut chart displays categorical data as colored arcs, with a hover effect that enlarges the selected segment. Built with React and rendered as SVG, it uses D3’s `pie` generator to compute arc paths and `scaleOrdinal` for the yellow, red, blue, and green color mapping. On mouse enter, the corresponding arc is redrawn with a larger `arc` radius, while a separate `hoveredArc` path is drawn beneath. The data is hardcoded as an array of `x` and `y` values.

SSiddharthMittal07

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

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…

Two-Layer Donut Chart

This example shows a two-layer donut chart made with D3.js v6 in an SVG, displaying two concentric rings that each represent different categorical data sets. The outer ring uses categories A, B, and C, while the inner ring shows categories D and E, with labels placed at each arc’s centroid. It works by applying `d3.pie()` to two distinct data arrays and generating arcs with `d3.arc()` using different inner and outer radius values. A categorical color scale (`d3.scaleOrdinal`) assigns distinct colors to each segment, and the chart is rendered entirely with SVG elements.

HHayat Hasan

84% match