Fork of Donut Chart v2

100%

Fork of Donut Chart v2

✓ Published1🌍 Public

Last edited Sep 28, 2022

Created on Sep 28, 2022

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.

AI-generated description

Un exemple pour le TP.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Donut Chart v2 - Le bon qui fonctionne

This example shows the distribution of language popularity as a donut chart, aggregating the six largest categories into labeled slices and grouping all remaining categories into a single "others" slice. It uses d3.pie and d3.arc to generate the SVG paths, with an ordinal color scale from d3-scale-chromatic (schemeDark2) for slice fills. Labels and connecting polylines are positioned using outerArc.centroid and conditional text-anchor logic based on mid-angle, with data loaded from data.json via d3.json.

SSuzie1022susu

88% match

Loading thumbnail…

Donut Chart v2

A donut chart displays country-level aggregated values, ranking the United States highest, followed by the United Kingdom and Germany, with each slice labeled and connected via polylines. Built with D3 v4 and SVG, it uses `d3.pie()` for slice generation, `d3.arc()` for inner and outer radii, and `d3.scaleOrdinal()` for colors. Data is loaded from `data.json` via `d3.json()`, and labels are positioned dynamically based on slice angles.

MMaeva B

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

85% match

Loading thumbnail…

Fork of Donut Chart v2 - Le bon qui fonctionne

A donut chart displays language popularity by song count, grouping the top five languages into slices and aggregating all others into a single "others" category. The visualization uses d3.pie and d3.arc with an inner radius to create the donut shape, and d3.scaleOrdinal with the d3.schemeDark2 color range. Labels and polylines are positioned using a second outerArc generator, with text anchored based on the mid-angle to align left or right. Data comes from a local data.json file, and the chart is rendered in SVG.

Ssagayous

84% match

Loading thumbnail…

Fork of Pie chart RDW

This example displays a donut chart showing four yearly values. It uses D3 v6 with an SVG canvas on a 400-by-400 coordinate system, centering the visualization. The code creates the chart using `d3.pie` to compute the pie segments and `d3.arc` for the outer and inner radii. A categorical color scheme, `d3.schemeCategory10`, colors each slice, while labels positioned via the arc’s centroid display the year. The data is a static inline array for 2013–2015 and 2019, and the chart is an unmodified fork of a FrontendTips tutorial.

MMar-99

84% match

Loading thumbnail…

Fork of Labels

A donut chart displays three apple values with labels positioned outside the chart’s outer radius. The visualization uses only D3.js v6 with SVG rendering, calculating arc paths via `d3.arc` and slice angles via `d3.pie`. Labels are placed using trigonometry and each label’s bounding box (`getBBox`) to compute adjusted coordinates, though the commented-out pointer lines and markers remain inactive. The chart applies a color scale derived from an HSL interpolation and notable padding and corner radius for the arcs.

PPiotr Paszek

84% match

Loading thumbnail…

Fork of HTML Starter

This example shows a donut chart displaying six data categories labeled District A through F, with values assigned as static data in a d3 array. The visualization uses `d3.arc` to create the donut shape with an inner radius of 40 and outer radius derived from the viewport, and `d3.pie` to compute the angles for each segment. The chart is rendered as an SVG appended to the body, with each slice filled in steelblue and white strokes, while custom text labels are positioned using `arc.centroid` and rotated based on the slice’s start and end angles. The color scale `d3.scaleOrdinal` defines a range but is not used for slice fills in the code.

Vvipin kumar paikra

83% match

Loading thumbnail…

Fork of Making an Interactive Pie Chart

This interactive donut chart visualizes the proportion of full versus not-full scores from a CSV dataset, displaying each category’s label on its slice and a percentage tooltip on hover. Built with D3 v5, it uses `pie()` and `arc()` to generate the chart, `scaleOrdinal` for colors, and `csv()` to load the data. Mouseover events trigger a tooltip showing the computed percentage, while hover effects increase slice opacity.

SshanLU999

83% match