Skip to main content
SimilarExport ZIP
100%

Pie Chart Artistes

✓ Published2🌍 Public
AAnissa Belkelfa
Last edited Nov 30, 2022
Created on Nov 29, 2022

A donut chart breaks down music genres by count, with each slice labeled and colored to show the proportion of artists per category. The visualization uses D3’s `pie` and `arc` generators to compute slice geometry and paths, while `scaleOrdinal` maps genre names to a custom color palette from `d3-scale-chromatic`. Hovering over a slice reveals a tooltip with the exact percentage, calculated using `sum` over the CSV data. The code reads from `data.csv` and renders the chart as SVG elements with mouseover and mouseout event handlers.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Pie Chart Artistes

A donut chart displays the distribution of music genres by percentage, with each slice labeled and colored distinctly. The visualization uses D3.js to load CSV data and render an SVG, employing `d3.pie` and `d3.arc` for the donut geometry, `d3.scaleOrdinal` with a custom color range, and d3-scale-chromatic for color handling. Hovering over a slice reveals a tooltip showing the precise percentage, calculated with `d3.sum`, while mouse events and CSS transitions manage tooltip visibility.

AAnissa Belkelfa
95% match
Loading thumbnail…

Fork of Fork of Pie Chart Artistes

This donut chart shows the distribution of music genres for a specific artist, displaying each genre’s percentage on hover via a tooltip. The visualization uses `d3.pie` and `d3.arc` to generate the slices, with `d3.scaleOrdinal` and a custom color range for genre encoding. It applies `d3.select` for mouse interaction and fetches additional genre data from the Wasabi API. The chart is rendered as SVG, with labels positioned using `labelArc.centroid`, and data is loaded from a CSV file.

AAnissa Belkelfa
91% match
Loading thumbnail…

piechart

This visualization displays the genre distribution of Spotify’s Top 50 songs as a pie chart, with percentage labels on each slice and a color-coded legend. It loads CSV data via `d3.csv`, aggregates counts with `d3.rollup`, and renders SVG paths using `d3.pie` and `d3.arc`. The chart applies a Tableau10 color scheme from `d3.scaleOrdinal` and positions text labels at arc centroids.

Sshivadeclare2@gmail.com
83% match
Loading thumbnail…

Pie Chart

This pie chart displays categorical data loaded from a CSV file, with slices colored by category and labeled directly on the chart. It uses D3.js APIs such as `d3.pie()`, `d3.arc()`, and `d3.scaleOrdinal` with `d3.schemeCategory10` to generate and color the SVG paths. Text labels are positioned using `arc.centroid`, and a legend is built with appended rectangles and text elements. The SVG is centered via a transform, and the chart dimensions are fixed at 500 by 500 pixels.

Rrajeswariamruthabommaraju@my.unt.edu
82% match
Loading thumbnail…

Pie chart

This pie chart example shows a donut-shaped chart with a solid orange center, rendered as an SVG using D3 v5. The chart displays four data segments (10, 20, 30, 60) with a color scale based on `d3.scaleOrdinal`, while radio buttons allow switching between apple and orange datasets (though only the orange dataset is actively rendered). The visualization uses `d3.arc()` to generate both the outer ring and inner circle paths, with the chart positioned at three-fifths of the SVG height.

JJoachimSchaeffer
82% match
Loading thumbnail…

Pie chart

A pie chart displays the proportional breakdown of a categorical variable, using colored slices to represent each category's share of the whole. The example renders a fixed dummy dataset (`{a: 9, b: 20, c:30, d:8, e:12}`) as SVG paths, with each slice's angle determined by `d3.pie` and its geometry drawn via `d3.arc`. Colors come from `d3.scaleOrdinal` with a manually specified palette, and the chart is centered within a 450×450 pixel canvas. The code uses the D3.js v4 library, appending the visualization to a `<div>` and styling slices with black strokes and 0.7 opacity.

Hhanulik.ondrej@gmail.com
82% match
Loading thumbnail…

Pie chart

A pie chart displays the proportional breakdown of four hardcoded values, with a color legend assigned via a radio button group offering apples or oranges datasets. The visualization renders as an SVG donut using D3 v5's `d3.pie()` and `d3.arc()` generators, with an ordinal color scale mapping categories to distinct hues. The chart draws all arcs at once from a fixed data array, and changing the dataset radio button does not trigger a re-render, as only the initial render function is called.

Ssathishkanna11
82% match
Loading thumbnail…

Making a Pie Chart

This example shows a donut chart of income sources—Sales, Dividends, and Interest—with labeled slices and a custom color scale. It loads data from a CSV file, converts the amounts to thousands, and renders the chart as SVG. The code uses D3 v5 APIs including `d3.pie`, `d3.arc`, `scaleOrdinal`, and `csv` to compute slice angles, generate paths, and position labels via arc centroids.

BbeauMarko
81% match