Fork of Donut Chart v2

100%

Fork of Donut Chart v2 - Le bon qui fonctionne

✓ Published0🌍 Public

Last edited Jan 31, 2023

Created on Jan 31, 2023

Forked from 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.

AI-generated description

Un exemple pour le TP.

MIT Licensed

Similar vizzes

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

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

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

91% match

Loading thumbnail…

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

88% match

Loading thumbnail…

Fork of Fork of Donut Chart v2 - Le bon qui fonctionne

This donut chart visualizes the popularity of 36 languages by song lyrics. The chart displays the top five languages as individual slices, while all remaining languages are aggregated into a single "others" slice. Slices are labeled with their language name and total value, and connecting lines help map labels to their respective slices. Built with D3 v4 (d3.pie, d3.arc), the visualization renders as an SVG, pulling data from a local JSON file and using a color scale from d3-scale-chromatic.

Ssagayous

87% match

Loading thumbnail…

Fork of Donut Chart - Version 6 - Test

This donut chart displays the distribution of song counts across languages, aggregating the top nine categories and grouping all remaining languages into an "Others" slice. Clicking the "Others" segment replaces the view with a detailed breakdown of those smaller language groups. Built with D3 v6, the visualization uses `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` with the Tableau10 color scheme, rendering SVG paths with hover tooltips and interactive click transitions.

SSuzie1022susu

87% match

Loading thumbnail…

Fork of Donut Chart - Version 6 - Test

A donut chart displays the number of songs per language, with the nine most popular languages shown individually and all remaining languages aggregated into an "Others" slice. Clicking the "Others" slice removes the main chart and shows a zoomed view with all the remaining languages as individual slices. The visualization uses D3 v6's `d3.pie`, `d3.arc`, `d3.scaleOrdinal`, and `d3.schemeTableau10` to generate and color the SVG paths, with tooltips shown on mouseover. Data is loaded from a local `data.json` file, and the chart is built within a Vue.js framework.

SSuzie1022susu

87% match

Loading thumbnail…

Fork of Donut Chart - Version 6 - Test

This donut chart displays the distribution of song counts by language, showing the top nine languages individually and aggregating all remaining languages into an "Others" slice. Clicking the "Others" segment replaces the view with a zoomed-in breakdown of those remaining languages. The visualization is built with D3 v6 (including `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` with `d3.schemeTableau10`), renders as an SVG, and uses a custom tooltip for hover details on each slice.

Ssagayous

84% match