Skip to main content
SimilarExport ZIP
100%

Donut Chart v2 - Le bon qui fonctionne

✓ Published6🌍 Public
MMaeva B
Last edited Nov 15, 2022
Created on Sep 28, 2022

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.

AI-generated description

Un exemple pour le TP.

MIT Licensed

Similar vizzes

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
94% 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
93% 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
91% match
Loading thumbnail…

Donut Chart - Version 6 - Test

A donut chart displays the number of songs by language, with nine main categories and all remaining languages aggregated into an "Others" slice. Clicking this slice zooms in to reveal the individual languages within that group. The visualization uses D3.js v6 with `d3.pie` and `d3.arc` to generate SVG paths, a `d3.scaleOrdinal` with the Tableau10 color scheme, and custom tooltips for hover interactions. Data is loaded via `d3.json` from a local file.

MMaeva B
89% 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
88% match
Loading thumbnail…

BACKUP - Donut Chart - Version 6

This donut chart visualizes the popularity of languages in song lyrics, grouping the top five languages individually and aggregating all others into a single "others" slice. The chart uses D3 v6’s `d3.pie` and `d3.arc` generators to compute and render the SVG paths, with a color scale from `d3.schemeDark2` distinguishing each category. Labels and polylines are positioned using an outer arc generator and angle-based logic, with text placed either left or right depending on the slice’s midpoint angle. Data is loaded from a local JSON file.

MMaeva B
87% match
Loading thumbnail…

BACKUP - Donut Chart v2 - Le bon qui fonctionne

A donut chart displays the popularity distribution of song lyrics across languages, aggregating the five most frequent languages (English, Spanish, German, French, Italian) into individual slices and grouping all remaining languages into an "others" slice. The chart uses d3.pie to compute arc angles and d3.arc to generate donut paths, with labels connected via polylines positioned using a second outer arc generator. Colors come from d3.schemeDark2 applied through a d3.scaleOrdinal, while data loads from a local JSON file via d3.json.

MMaeva B
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
86% match