Fork of Fork of Pie Chart Artistes

100%

Fork of Fork of Pie Chart Artistes

✓ Published0🌍 Public

Last edited Nov 30, 2022

Created on Nov 30, 2022

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.

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…

Pie Chart Artistes

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.

AAnissa Belkelfa

91% match

Loading thumbnail…

Fork of Fork of Making an Interactive Pie Chart

This interactive donut chart visualizes income breakdown across three categories—Sales, Dividends, and Interest—using repeated rows from a CSV file. Built with D3 v5, it renders an SVG donut with labeled slices and a hover tooltip displaying each category’s percentage. The code leverages `d3.pie` for arc calculation, `d3.arc` for path geometry, and `d3.scaleOrdinal` for color mapping. Hovering highlights a slice and dynamically positions a tooltip using mouse coordinates.

RRochelle

80% match

Loading thumbnail…

Fork of Fork of Making an Interactive Pie Chart

This donut chart displays income categories (Sales, Dividends, Interest) with each slice’s percentage revealed via an interactive tooltip on mouseover. Built with D3 v5, it loads data from data.csv, scales colors with `scaleOrdinal`, and computes slice geometry using `pie` and `arc` functions. Hovering highlights each slice’s opacity change and shows a tooltip positioned at the cursor, while labeled text sits inside each arc segment. The SVG rendering includes a padded, rounded arc style with corner radius.

NNarayana Reddy

80% match

Loading thumbnail…

Fork of Pie chart

A donut chart displays the distribution of survey respondents across different age groups, with each segment colored distinctly and labeled with its corresponding value. Legends on the right identify each age group and its member count. The visualization uses D3 v5’s `pie` and `arc` generators to compute segment paths, `scaleOrdinal` for color mapping, and `format` for number formatting. Data is fetched as CSV from a GitHub gist, and the SVG is rendered within a React component.

VVineela Reddy

80% match

Loading thumbnail…

Fork of Making an Interactive Pie Chart

This interactive donut chart displays the distribution of income across three categories—Sales, Dividends, and Interest—from a CSV file. The visualization uses D3 v5’s `pie` and `arc` APIs to generate the donut segments, with a `scaleOrdinal` color scale for category distinction. Hovering over a slice triggers a tooltip, implemented via D3’s `select`, showing the percentage contribution of that category, calculated with `sum` from the data’s amount field. The SVG rendering includes labeled text for each slice, and slices are interactive with `mouseover` and `mouseout` events.

66mandati6

80% match

Loading thumbnail…

Fork of Making an Interactive Pie Chart11

This donut chart displays the relative proportions of three income sources—Sales, Dividends, and Interest—loaded from a CSV file. Each slice is labeled with its category name and colored using a custom ordinal scale. The visualization uses D3 v5’s `pie` and `arc` generators to compute slice geometry and `scaleOrdinal` for coloring. Hovering over a slice triggers an interactive tooltip that calculates and displays the percentage of the total amount represented by that slice, using `d3.sum` for aggregation and event listeners for mouse interactions.

66mandati6

80% match

Loading thumbnail…

Fork of Making an Interactive Pie Chart

This interactive donut chart visualizes the proportion of full versus not-full scores from a CSV dataset, displaying each category’s label on its slice and a percentage tooltip on hover. Built with D3 v5, it uses `pie()` and `arc()` to generate the chart, `scaleOrdinal` for colors, and `csv()` to load the data. Mouseover events trigger a tooltip showing the computed percentage, while hover effects increase slice opacity.

SshanLU999

80% match