Untitled

100%

✓ Published0🌍 Public

Last edited Jul 2, 2022

Created on Jul 2, 2022

This example shows a simple donut-style pie chart displaying five categorical items (A through E) with their corresponding counts. It uses the D3.js library to compute arc paths with the `d3.pie` and `d3.arc` functions, renders them as SVG paths, and colors each slice with `d3.scaleOrdinal`. Interactive tooltips appear on hover, displaying the item name and count. The chart is built as a React component, with D3 handling the SVG rendering and styling.

AI-generated description

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

Similar vizzes

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

89% match

Loading thumbnail…

Untitled

A donut chart displays the distribution of a small dataset with categories a through e, each rendered as a colored arc segment. The visualization uses D3's `pie` function to compute angular values from object entries, with `arc` paths using inner and outer radii. Label lines and text annotations are positioned via `arc.centroid` calculations and polar-coordinate adjustments. The SVG output is generated through a React rendering pipeline, using `scaleOrdinal` for categorical color mapping and `join` for declarative element creation.

Ssubratanp

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

86% match

Loading thumbnail…

Untitled

This example shows a pie chart where each arc segment represents a portion of a population value, with colors assigned from a categorical ordinal scale. The visualization uses a D3.js layout and SVG rendering, constructing the chart with `d3.svg.arc` for the arcs and `d3.layout.pie` to compute the angles from the data. The chart is centered on an SVG canvas of 960 by 500 pixels, with white strokes separating each arc for clarity. The code relies on D3’s ordinal color range to distinguish the segments visually.

Ssaenanan

86% match

Loading thumbnail…

Untitled

This example shows a donut chart that distributes categorical data into seven colored arcs, with each slice labeled by its corresponding category name. It renders directly to a Canvas element using the `d3.arc` and `d3.pie` APIs from D3 v4, with data loaded from an external TSV file via `d3.requestTsv`. The chart translates the Canvas context to center it, fills each arc with a distinct color from a predefined palette, applies white stroke separators, and places labels along the inner ring using `labelArc.centroid`.

Mmauricio-acosta-reyes

85% match

Loading thumbnail…

Untitled

This example presents a static SVG pie chart inside a centered HTML layout, rendering data slices with D3.js version 5.7.0. The chart uses the `d3.pie` API to compute arc paths, which are then drawn as SVG `path` elements within a 960×500 viewport. The visualization is styled via an external `pie.css` stylesheet, while the JavaScript logic resides in a bundled `pie_bundle.js` file. The chart displays categorical proportions directly, with no interactivity or animation, relying solely on D3’s arc generation and SVG rendering.

TTharun2022

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

84% match

Loading thumbnail…

Untitled

A donut chart displays three categorical values—Country, City, and Continent—with proportional arcs colored via a categorical scale. A legend aligns beneath the chart, using text labels and colored rectangles. The code builds the visualization with d3.pie and d3.arc, and positions legend items by measuring each group’s bounding box width. The chart is rendered as SVG on an HTML page using React-style class syntax, with margins and a fixed outer size.

AAndrea Mignone

84% match