Fork of PIECHART-SUBHASH

100%

Fork of PIECHART-SUBHASH

✓ Published0🌍 Public

Last edited Oct 27, 2025

Created on Oct 27, 2025

This fork of “PIECHART-SUBHASH” demonstrates a reusable D3 donut chart component built with the `d3` `pie` function for arc generation and `scaleOrdinal` with `schemeTableau10` for categorical colors. It renders five device-share categories (mobile, desktop, tablet, TV, other) as slices with corner radii, percentage labels, and leader lines, while a large right margin accommodates a legend titled “Device Share.” The SVG chart is configured via a fluent API with setter methods for margins, inner radius, padding angle, and label formatting.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

PIECHART-SUBHASH

This D3.js donut chart example, PIECHART-SUBHASH, displays device share percentages (e.g., mobile, desktop, tablet) as colored slices with rounded corners and padding. It shows percentage labels outside the donut, connected by leader lines, alongside a legend on the right. The code builds a reusable pie chart component using `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` with a Tableau10 palette, rendering to SVG via the D3 `.join()` pattern. The chart uses hardcoded demo data and supports configurable inner radius, corner radius, and label formatting.

SSubhash

91% match

Loading thumbnail…

Fork of pie chart

This fork of a pie chart visualizes categorical data as a donut-style ring with an accompanying legend. The code uses D3 v7 and renders the chart by mapping input data to arc paths via `d3.pie` and `d3.arc`, with each slice colored distinctly and a legend showing stroke outlines. The chart provides a static, non-interactive view of proportional shares, with text labels absent and only the legend indicating categories.

Ssaiabhishekmunnangi@gmail.com

80% match

Loading thumbnail…

Fork of pie chart ICE-7

This fork of a pie chart visualizes the distribution of campus snacks by category, aggregating counts from a CSV file and displaying each category’s share with percentage labels outside the slices. It renders an SVG using d3.pie, d3.arc, and d3.rollup to aggregate data, while d3.scaleOrdinal with schemeTableau10 assigns colors. A separate HTML legend lists categories with their counts, and the tooltip shows exact values. The chart loads data asynchronously via d3.csv and uses d3.format for percentage display.

118121a1545

79% match

Loading thumbnail…

Fork of Making an Interactive Pie Chart

This interactive donut chart displays the proportion of income from Sales, Dividends, and Interest, with each slice labeled by category and showing a percentage on hover. Built with D3 v5, it uses `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate SVG paths, while tooltips are implemented via mouse events and a styled HTML div. The chart reads its data from a CSV file, computing percentages from the parsed values, and features rounded slice corners and a responsive hover opacity effect.

WWangJiaCheng1999

78% match

Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

This fork of a D3.js v4 zoomable sunburst chart displays a donut (or pie) diagram built from a static, hard-coded dataset containing five named values. The visualization encodes each categorical value as an arc segment, using a custom ordinal color scale for distinct fills and black strokes with partial opacity for clarity. The implementation relies on the `d3.select`, `d3.pie`, `d3.entries`, `d3.scaleOrdinal`, and `d3.arc` APIs from the D3 v4 library to compute and render the paths inside an SVG container, with a fixed width and height of 450 pixels.

KKian Fay

78% match

Loading thumbnail…

Fork of Pie chart RDW

This example displays a donut chart showing four yearly values. It uses D3 v6 with an SVG canvas on a 400-by-400 coordinate system, centering the visualization. The code creates the chart using `d3.pie` to compute the pie segments and `d3.arc` for the outer and inner radii. A categorical color scheme, `d3.schemeCategory10`, colors each slice, while labels positioned via the arc’s centroid display the year. The data is a static inline array for 2013–2015 and 2019, and the chart is an unmodified fork of a FrontendTips tutorial.

MMar-99

78% match

Loading thumbnail…

Fork of Pie chart in React & D3 - 1st attempt

A React and D3 pie chart renders four slices with a color scale interpolated from #eaaf79 to #bc3358 using d3.interpolateRgb. The chart uses d3.pie() and d3.arc() to compute and draw each SVG path, with inner and outer radii defining a donut shape. A secondary component defines a checkered color ramp from #0F8C79 to #f2f2f2, though it is commented out. Unused legend data for five named categories is declared but not rendered.

Yyingzhe-z

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

78% match