Skip to main content
SimilarExport ZIP
100%

Donut Charts - Attrition Level per Categories

✓ Published1🌍 Public
RRaul Gamez
Last edited Oct 10, 2021
Created on Oct 10, 2021

A set of donut charts displays the number of attrited versus existing bank customers across five categorical variables: income level, education level, marital status, card category, and gender. A dropdown menu lets the user switch between these categories, and the charts animate smoothly when the selection changes. The visualization is rendered with SVG using D3.js, leveraging the pie and arc generators to create the donut segments. Each slice’s fill color encodes customer status, and tooltips reveal exact counts on hover. The data comes from a Bank Customers Dataset loaded as a CSV, and a custom summary function aggregates counts per group.

AI-generated description

Donut charts using D3 displaying data of credit card utilization from the Bank Customers Dataset.

The menu at the top enable the users to choose which categorical columns to use. The options are:

  • Income Level
  • Education Level
  • Marital Status
  • Card Category
  • Gender

Finally, the attrition status of the customers is encoded on the color of the bars.

MIT Licensed

Similar vizzes

Loading thumbnail…

Stacked Bar Chart - Attrition Level per Categories

A stacked bar chart displays customer attrition percentages across five categorical variables—income level, education level, marital status, card category, and gender—from the Bank Customers Dataset. A dropdown menu lets users switch between these categories, while bar segments encode existing versus attrited customers. Hovering over legend items highlights corresponding segments, and hovering over individual rectangles reveals exact percentage values via tooltips. The visualization is built with D3 v7, using `d3.stack` with `stackOffsetExpand`, `d3.scaleBand`, `d3.rollups` for data aggregation, and SVG rendering with animated transitions.

RRaul Gamez
83% match
Loading thumbnail…

Customer Attrition Dashboard V2

This interactive dashboard uses D3 to visualize bank customer attrition from a credit card utilization dataset. Four coordinated plots—a grouped bar chart, scatter plot, stacked bar chart, and violin plots—encode attrition status through color, with dropdown menus letting users switch grouping categories and numeric columns. The scatter plot uses D3 transitions to animate circle growth on load, while all charts feature hover highlighting and tooltips. Data is loaded via `d3.csv` and summarized using `d3.rollups` and `d3.group`.

RRaul Gamez
80% match
Loading thumbnail…

1_Fork of Clustered Bar Chart - Credit Card Utilization by Attrition Status

This interactive clustered bar chart visualizes credit card utilization from the Bank Customers Dataset, comparing average transaction amounts, credit limits, or revolving balances across demographics such as income, education, and marital status. Bars are color-coded by customer attrition status (Existing vs. Attrited), with tooltips revealing aggregate sums and counts. Users select grouping and aggregate columns via dropdown menus, triggering transitions that update the chart. Built with D3 v7, it uses `scaleBand`, `scaleLinear`, `scaleOrdinal`, `rollups`, and `group` to compute summaries, rendered as SVG with animated bar transitions and hover highlighting.

RRenee
78% match
Loading thumbnail…

Fork of Customer Attrition Dashboard V2

This dashboard visualizes bank customer attrition through four dynamic plots: a grouped bar chart, scatter plot, stacked bar chart, and violin plots. Attrition status is encoded by color, with interactive menus allowing users to select which data columns to display. Built with D3.js, it uses scaleLinear for axes, scaleOrdinal for color mapping, transition for smooth animations, and data from the Bank Customers Dataset. The scatter plot includes hover interactions that adjust circle opacity and stroke.

Eeschuman20@gmail.com
78% match
Loading thumbnail…

Clustered Bar Chart - Credit Card Utilization by Attrition Status

This interactive clustered bar chart visualizes credit card utilization from the Bank Customers Dataset, comparing the average of a selected metric (total transaction amount, credit limit, or revolving balance) across customer demographics. Bars are grouped by attrition status, with color distinguishing existing versus attrited customers, and dropdown menus let users switch between categorical groupings like income, education, or marital status. Built with D3.js, the chart uses `scaleBand` and `scaleLinear` for axes, `scaleOrdinal` for color encoding, and `transition` for smooth animated updates when the data selection changes. Tooltips reveal the underlying sum and count for each bar.

RRaul Gamez
77% match
Loading thumbnail…

Fork of Customer Attrition Dashboard V2

This dashboard explores bank customer attrition using credit card utilization data from the Bank Customers Dataset. It presents four interactive plots—a grouped bar chart, scatter plot, stacked bar chart, and violin plots—with attrition status encoded by color. Users can dynamically select which columns to display via menus. Built with D3 v7, it employs APIs such as `scaleBand`, `scaleLinear`, `transition`, `stack`, and `histogram` for data aggregation and rendering, producing an animated SVG visualization.

Eeschuman20@gmail.com
77% match
Loading thumbnail…

Fork of Clustered Bar Chart - Credit Card Utilization by Attrition Status

This interactive clustered bar chart visualizes credit card utilization trends from the Bank Customers Dataset, comparing average transaction amounts, credit limits, or revolving balances across demographic categories. The x-axis menu selects grouping variables like income, education, or marital status, while the y-axis menu chooses the metric to aggregate. Bar colors distinguish existing versus attrited customers, with hover tooltips revealing sums and sample counts. Built with D3 v7, the visualization uses `scaleBand`, `scaleLinear`, `scaleOrdinal`, `rollups` for summary statistics, and `transition` for animated updates when menu selections change.

Vvoid-LSTM
77% match
Loading thumbnail…

Fork of Customer Attrition Dashboard V2

This dashboard presents an exploratory analysis of bank customer attrition, using four interactive plots: a grouped bar chart, scatter plot, stacked bar chart, and violin plots. The visualizations encode attrition status through color, with menus letting users choose which data columns to display and compare. Built with D3 v7, the code leverages APIs like `scaleBand`, `scaleLinear`, `stack`, `histogram`, and `area` to render SVG graphics with smooth transitions. The data comes from the Bank Customers Dataset, loaded via `d3.csv` and processed with rollups and summary statistics.

Eeschuman20@gmail.com
77% match