Project

100%

✓ Published0🌍 Public

Last edited Dec 2, 2024

Created on Dec 2, 2024

This example visualizes the income distribution of loan applicants using a pie chart. The chart is rendered as an SVG element within an HTML page, with each slice labeled by its category and displayed value. The visualization is built with D3.js version 5, specifically using the library’s SVG generation and layout capabilities to compute the pie slices and position text labels. The chart is presented with a bold title and a legend, all styled through CSS. The data, loaded from a bundled script, drives the pie’s proportions, while the rendering remains fully static SVG without animation or interaction.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Activity 7

This example shows the distribution of applicant incomes for approved loans using a pie chart, with each slice colored according to income level and a legend mapping loan IDs to their corresponding income values. The visualization fetches CSV data from a remote GitHub gist using `d3.csv`, then computes the pie layout with `d3.pie()` and renders SVG paths via `d3.arc()`; the color scale is built with `d3.scaleOrdinal`. The legend text is formatted with `d3.format` to display values in thousands, and the SVG canvas is selected and manipulated through `d3.select`.

Lleelakrishnadivi7@gmail.com

83% match

Loading thumbnail…

Fork of Nikita's Pie Chart

This example visualizes loan data from a CSV file as a pie chart, with each slice representing a loan’s ApplicantIncome and colored by its Loan_ID. A legend lists the Loan_IDs along with their associated rating points. The chart is built with D3 v5, using `d3.pie` and `d3.arc` to generate SVG paths, `d3.scaleOrdinal` for colors, and `d3.format` for tick labels. Data is loaded asynchronously via `d3.csv`.

CCHANDU BHARGAVI

81% match

Loading thumbnail…

Activity_7.1

This pie chart visualizes the distribution of loan types from a CSV dataset loaded via `d3.csv`. Each slice is generated using `d3.pie()` and rendered as an SVG path with `d3.arc()`, colored by `d3.scaleOrdinal` and `d3.schemeCategory10`. The chart includes a legend with colored rectangles and text labels, while slice labels are placed using the arc’s `centroid` method. The code uses D3 v6, an SVG container, and explicit width, height, and margin settings.

Ssanjanaadapa7@gmail.com

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

78% match

Loading thumbnail…

PieChart Fork

This pie chart visualizes income distribution (above or below $50K) using data from the UCI Adult dataset, loaded via D3’s `d3.csv` from a remote GitHub repository. It computes category counts with `d3.nest()` and `rollup`, then renders SVG arcs using `d3.pie()` and `d3.arc()`. A legend maps label colors via `d3.scaleOrdinal`, while the chart groups slices in a centered `<g>` element.

VVijay Sheru

78% match

Loading thumbnail…

Act7Question1

This example shows the distribution of income across five quintiles, from lowest to highest, using a pie chart. The visualization renders an SVG with D3.js v6, employing `d3.pie()` and `d3.arc()` to generate the chart’s slices, while `d3.scaleOrdinal` assigns colors. Each slice displays its quintile label and percentage value, and a legend on the right identifies the categories. The data is hardcoded in the script, not loaded from an external file.

Rrishikareddy181@gmail.com

78% match

Loading thumbnail…

Making a Pie Chart

This example shows a donut chart of income sources—Sales, Dividends, and Interest—with labeled slices and a custom color scale. It loads data from a CSV file, converts the amounts to thousands, and renders the chart as SVG. The code uses D3 v5 APIs including `d3.pie`, `d3.arc`, `scaleOrdinal`, and `csv` to compute slice angles, generate paths, and position labels via arc centroids.

BbeauMarko

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

77% match