Fork of Pie Chart

Last edited Mar 26, 2025

Created on Mar 25, 2025

This fork of a pie chart visualizes freelancer earnings by experience level, aggregating total USD earnings across categories. The chart renders as a standard donut-style pie with white stroke separations, category labels placed at arc centroids, and a color-coded legend. Data is fetched asynchronously from a CSV file hosted on GitHub Gist, then parsed and summed using JavaScript. The visualization is built with D3 v7, using `d3.pie`, `d3.arc`, `d3.scaleOrdinal` with `schemeCategory10`, and SVG rendering for both the chart and legend.

AI-generated description

MIT Licensed

Similar vizzes

Freelancer_Pie Chart

This visualization displays a pie chart of total freelancer earnings aggregated by experience level. The data is loaded from a CSV file via a `fetch` request, and the chart is rendered using the Chart.js library on a Canvas element. Users select a sleep quality category, which filters the displayed earnings data. A custom legend is generated alongside the chart, using the same background color palette, to identify each experience level. The chart presents earnings in USD for each experience category.

88% match

Fork of D3 Starter

This donut chart displays the mental health conditions of freelancers based on their work-life balance, with each slice sized according to earnings in USD and colored by experience level. The visualization uses the D3.js library (v5) with the `pie`, `arc`, and `scaleOrdinal` APIs to generate and style the chart. Data is loaded asynchronously from a CSV file hosted on GitHub, and a custom legend maps experience levels to slice colors.

84% match

Fork of ICE - 7 Pie Chart Maanas Katta

This example shows a pie chart of earnings by experience level for three categories—Beginner, Intermediate, and Expert—with a legend displaying each value. Rendered as SVG using D3 v6, the visualization employs `d3.pie()` to compute arc angles from the hardcoded dataset and `d3.arc()` to draw the slices, which are colored via `d3.scaleOrdinal(d3.schemeSet2)`. Labels are positioned using `arc.centroid()`, while the legend is built manually with HTML divs.

80% match

SSrinivasAbburi@my.unt.edu

Piechart

This pie chart shows the distribution of survey respondents by experience level, with each slice labeled by category and count. The visualization loads CSV data from a GitHub gist, uses `d3.rollup` to tally occurrences per level, and renders the chart with `d3.pie` and `d3.arc` in an SVG. Slice colors come from `d3.schemeCategory10`, and labels are positioned at each arc’s centroid. The chart is built with D3 v7 and displays a static, unanimated view of the categorical breakdown.

80% match

Fork of Pie Chart ICE-7

This example visualizes monthly expenditures from a CSV file as a pie chart. The chart displays categories as colored slices, with each slice labeled by its associated data value, and includes a legend that maps the colors to their numeric values. The visualization is built using D3 version 5, specifically leveraging `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` for the pie geometry, arc paths, and color mapping. Data is fetched asynchronously via `d3.csv` from a GitHub gist URL, and the SVG canvas is rendered with a fixed width and height.

AAnanyaSamala

Mmukundakrishna.r@gmail.com

Fork of Fork of Fork to pie chart

A pie chart displays total wages by country for 2022, with each slice representing a country’s share from the loaded CSV dataset. The visualization uses Chart.js, fetching data from a GitHub Gist and parsing the CSV rows to extract country names and wage values. Rendered on an HTML canvas with a fixed 400×400 size, the chart assigns six distinct semi-transparent colors to the slices and includes a title. The code relies on the browser’s DOMContentLoaded event to fetch and process the data before drawing.

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

Fork of Making an Interactive Pie Chart

NNarayana Reddy