Fork of Fork of Making an Interactive Pie Chart

100%

Fork of Fork of Making an Interactive Pie Chart

✓ Published0🌍 Public

Hharika-1929

Last edited Jul 1, 2022

Created on Jul 1, 2022

Forked from Fork of Making an Interactive Pie Chart

This interactive donut chart displays the distribution of student enrollment across ten prominent universities, with each slice labeled and color-coded. Hovering over a slice reveals the percentage of total students it represents via a tooltip. The visualization uses D3 v5 APIs including `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` with a custom color range from `d3-scale-chromatic`, while rendering SVG elements and tooltip interactions are managed through D3 selections. Data is loaded from a CSV file.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Making an Interactive Pie Chart

This interactive donut chart displays the number of university students at ten institutions, with each slice labeled and colored using a custom ordinal scale from d3-scale-chromatic. Hovering over a slice reveals a tooltip showing the percentage of total enrollment. Built with D3.js, the visualization uses d3.pie, d3.arc, and d3.select to compute slice geometries and handle mouse events, rendering as SVG. Data is loaded from a CSV file containing university names and student counts.

NNikhilMakkena

96% match

Loading thumbnail…

Making an Interactive Pie Chart

This interactive pie chart visualizes university funding amounts, with each slice labeled and color-coded by institution. Built with D3.js v5, the chart uses `d3.pie` and `d3.arc` to generate the donut geometry and `d3.scaleOrdinal` with `d3-scale-chromatic` for slice colors. Hovering over a slice triggers a tooltip showing the percentage of total funding, calculated via `d3.sum` and `d3.event`. The data comes from a CSV file loaded asynchronously, and the visualization renders as SVG with hover opacity effects and rounded slice corners.

PPriyaEnuganti

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

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

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

84% match

Loading thumbnail…

Fork of Making an Interactive Pie Chart

This donut chart displays the proportional breakdown of income sources, with three colored segments labeled Sales, Dividends, and Interest. Hovering over a slice reveals a tooltip showing its percentage of the total amount. The visualization uses D3 v5 APIs including `d3.pie`, `d3.arc`, `d3.scaleOrdinal`, and `d3.sum` to calculate and render the arcs. Data is loaded from a CSV file, and the SVG elements are manipulated directly to create the chart and interactive tooltip.

NNarayana Reddy

84% match

Loading thumbnail…

Fork of Making an Interactive Pie Chart

NNarayana Reddy

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

84% match