Donult Chart D3 V4

100%

Donult Chart D3 V4

✓ Published0🌍 Public

Last edited May 27, 2017

Created on May 27, 2017

This donut chart visualizes the distribution of a "beautiful ratio" metric across five cities, with each arc segment sized proportionally and colored by city. The chart is built with D3 v4, using `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate SVG paths with rounded corners and an inner radius. Hovering over a segment triggers a temporary opacity change and displays a tooltip showing the exact percentage, computed from the arc’s start and end angles. The visualization also includes a window-resize handler that redraws the chart after a 500ms delay.

AI-generated description

Similar vizzes

Loading thumbnail…

Pie Chart D3 V4

This example shows a pie chart using D3 v4 to visualize the distribution of a “beautifulRatio” value across several cities. Hovering over a slice highlights it and displays a tooltip with the city’s percentage. The chart is rendered as SVG and includes a corner radius on the arcs, with colors assigned via a ordinal scale. It uses `d3.pie`, `d3.arc`, and jQuery for resizing, recalculating the chart on window resize.

CChandrakantThakkarDigiCorp

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

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

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

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

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

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

79% match

Loading thumbnail…

Reusable Donut Chart in D3 v4

This reusable donut chart, built with D3 v4, displays the probability distribution of bacterial species in a sample. It renders an interactive SVG donut with labeled slices and connecting lines, and shows a tooltip in the center when hovering over a slice or species name. The chart is implemented as a reusable function using `d3.pie`, `d3.arc`, and `d3.scaleOrdinal`, with data loaded from a tab-separated values file. It features animated transitions and customizable parameters like corner radius and pad angle.

EEndNight95

79% match