Skip to main content
SimilarExport ZIP
100%

Donut Chart v2

✓ Published1🌍 Public
MMaeva B
Last edited Sep 28, 2022
Created on Sep 28, 2022

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.

AI-generated description

Un exemple pour le TP.

MIT Licensed

Similar vizzes

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

Donut Chart v2 - Le bon qui fonctionne

A donut chart displays the popularity of 36 languages from a dataset, but only the top 5 are labeled individually; all remaining languages are aggregated into a single "others" slice. The visualization uses d3.pie and d3.arc to generate the SVG paths, with d3.scaleOrdinal and d3.schemeDark2 for color encoding. Labels and connecting polylines are positioned using arc.centroid and a computed mid-angle, with text anchored left or right based on slice placement. Data is loaded via d3.json.

Ssagayous
81% match
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
81% match
Loading thumbnail…

Donut Chart v2 - Le bon qui fonctionne

A donut chart displays the popularity of languages in a song dataset, aggregating all categories beyond the top five into an "others" slice. The visualization uses D3.js v4 to generate SVG paths for the pie slices, with labels and connecting polylines positioned using the `d3.arc` centroid functions. The chart colors slices via `d3.scaleOrdinal` with the `schemeDark2` palette. Data is loaded from a local JSON file, and the code computes the pie layout with `d3.pie`, limiting displayed categories to five before grouping the remainder.

MMaeva B
80% 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
79% match
Loading thumbnail…

Donut Multiples

Donut multiples display age-group population proportions for each U.S. state as small pie charts, with a legend mapping seven age brackets to distinct colors. The charts are generated from a CSV file parsed via d3.csv, with d3.scale.ordinal assigning colors, d3.layout.pie computing arc angles, and d3.svg.arc rendering the donut segments as SVG paths. Each state’s label appears centered within its donut, highlighting proportional differences across regions.

Mmbostock
79% match
Loading thumbnail…

Untitled

This example uses d3.pie and d3.arc to render a matrix of donut charts, one per U.S. state, with each donut’s area scaled via d3.scaleSqrt to reflect the state’s total population. The arcs within each donut represent age brackets, colored using d3.scaleOrdinal. Data is loaded from a CSV with d3.csv, and the `selection.each` method provides simultaneous access to parent state data and child age data. The SVG charts are sized dynamically based on each state’s population sum.

VVito
79% match
Loading thumbnail…

Fork of Pie chart

This fork of a D3 pie chart visualizes the top 10 countries in the world for 2022, using an interactive, animated donut chart rendered as SVG. The chart segments expand on mouse hover and, upon clicking, drill down to reveal a nested second-level breakdown based on additional data attributes. Built with D3 v2 and jQuery, the visualization uses `d3.layout.pie`, `d3.svg.arc` with inner and outer radii, and `transition.attrTween` for smooth entry animations, while handling color assignments via a categorical ordinal scale.

MMalempatiSaranya
78% match