Skip to main content
SimilarExport ZIP
100%

Fork of Donut Chart v2 - Le bon qui fonctionne

✓ Published1🌍 Public
Ssagayous
Last edited Apr 10, 2023
Created on Apr 10, 2023

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.

AI-generated description

Un exemple pour le TP.

MIT Licensed

Similar vizzes

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
96% 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
95% 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
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
92% 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
91% 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
91% match
Loading thumbnail…

Fork of Donut Chart - Version 6 - Test

This donut chart displays the number of songs per language, showing the top nine languages individually and aggregating the rest into an "Others" slice. Clicking the "Others" segment zooms in to reveal a secondary pie chart with all remaining languages. The visualization uses D3 v6 with the `pie()` and `arc()` generators, scales ordinal colors with `d3.schemeTableau10`, and implements interactive tooltips via mouse events. Data is loaded from a local JSON file, and the SVG is rendered within a Vue-based environment.

Vvipin kumar paikra
90% 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
89% match