Skip to main content
SimilarExport ZIP
100%

ICE-7 Pie chart Creation

✓ Published0🌍 Public
NNavaneeth-Ragi
Last edited Mar 12, 2023
Created on Mar 12, 2023

This interactive pie chart visualizes the distribution of salaries across different time categories. Built with D3.js v5 within a React framework, it renders an SVG with colored segments representing salary values, while a legend maps each time category to its corresponding color and salary amount. The implementation uses d3.pie, d3.arc, and d3.scaleOrdinal to generate the chart, with data fetched from a remote CSV file. Text labels are positioned using arc centroids, and the legend is manually constructed with rectangles and text elements.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE - 7 PIE CHART

A pie chart displays employee salaries by profession, using colored slices segmented from a CSV dataset of annual incomes. The chart renders with D3.js v5, using `d3.pie` to compute angles and `d3.arc` to generate SVG paths. A legend pairs each profession name with its corresponding annual income, formatted in thousands with `d3.format`. The visualization also uses `d3.scaleOrdinal` to assign colors from a fixed palette, and the salary data is loaded asynchronously via `d3.csv`.

Mmadanvemulapally
89% match
Loading thumbnail…

ICE7 PIE chart for vini

This visualization shows the hourly salaries of employees as a pie chart, with each slice labeled in dollars and a corresponding legend listing both the time and salary value. The chart uses D3 version 5 APIs including `pie`, `arc`, and `scaleOrdinal` to generate the SVG paths and text, handling data fetched from a remote CSV via `csv`. The code defines section colors, calculates arc centroids for labels, and binds legend entries to the same dataset.

VVineela Reddy
89% match
Loading thumbnail…

ICE - 7 Pie Chart

This example shows base salaries across different U.S. government departments using an interactive pie chart with a legend. Each slice represents a department, colored by salary value, with salary amounts displayed in thousands next to colored legend markers. The visualization loads CSV data from a GitHub gist and uses d3.pie, d3.arc(), and d3.scaleOrdinal() to generate SVG paths and legends. The chart is built with React and D3 v5, rendering entirely as SVG elements.

Mmboinapally17
87% match
Loading thumbnail…

Fork of ICE7 PIE chart for vini

This pie chart visualizes hourly salary data for employees, displaying each pay rate as a colored slice with the dollar amount labeled at its centroid. The chart renders through D3 v5’s `pie` and `arc` generators on an SVG canvas, with a legend listing employee hours alongside their corresponding pay values. Data is loaded asynchronously from a CSV file using `d3.csv`, with colors assigned via `scaleOrdinal`. The code also uses `arcGenerator.centroid` for label placement and `format` for concise numeric tick formatting, all within a React-compatible structure that directly manipulates the D3 selection API.

VVineela Reddy
87% match
Loading thumbnail…

Pie ICE - 7

This visualization presents a pie chart depicting Data Scientist job salaries, with each slice sized by salary value and labeled with the corresponding figure in thousands. The chart uses D3 v5 to fetch CSV data from a GitHub gist and render SVG paths via `d3.pie` and `d3.arc`. A legend maps job titles to salary ranges, using D3’s `scaleOrdinal` for color assignment. The interface includes a title and axis formatting via `d3.format`, with all elements drawn using the SVG canvas.

Ssaijahnaviappineni
86% match
Loading thumbnail…

ICE - 7 Pie Chart

This interactive pie chart visualizes loan details, displaying applicant income segments with color-coded sections and a corresponding legend that maps Loan IDs to income values. Built with React and D3 v5, it uses `d3.csv` to load data from a GitHub gist, then applies `d3.pie` and `d3.arc` to generate the chart’s paths, with `scaleOrdinal` assigning colors. The SVG rendering includes formatted income labels in thousands (e.g., "5K") via `d3.format`, and the legend is manually positioned alongside the pie.

Aachyutanandmishra17@gmail.com
86% match
Loading thumbnail…

ICE7 - Pie Chart

This pie chart visualizes regional sales distribution, with each slice representing a region's proportion of total sales and a legend showing region names with percentage values. The code loads sales data from a GitHub-hosted CSV using d3.csv, then renders the chart with d3.pie and d3.arc functions, applying colors via scaleOrdinal. SVG elements are appended to the page using d3.select, with legend text formatted via d3.format to display percentages. The visualization uses d3.v5 and outputs the result as scalable vector graphics.

Kkuraakhila9@gmail.com
85% match
Loading thumbnail…

Fork of Fork of Fork of ICE7 PIE chart for vini

A pie chart displays salary per hour for employees, with each slice colored and labeled with its dollar value, alongside a legend pairing hourly rates with time categories. The visualization uses D3 v5 APIs including `d3.csv`, `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to load data from a CSV file hosted on GitHub, compute arc paths, and assign colors. Text labels are positioned using the arc centroid method, and the chart is rendered as an SVG within a React-based HTML page.

VVineela Reddy
85% match