Customer Attrition Dashboard V2

100%

Customer Attrition Dashboard V2

✓ Published7🌍 Public

Last edited Nov 15, 2021

Created on Oct 27, 2021

Forked from Clustered Bar Chart - Credit Card Utilization by Attrition Status

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`.

AI-generated description

A dashboard using D3 displaying data of credit card utilization from the Bank Customers Dataset.

It consists of 4 dynamic plots. A grouped bar chart, scatter plot, stacked bar chart and violin plots. The attrition status of the bank customers is encoded on the color of the elements.

Finally, there are some menus available for each plot to enable the users to choose which columns to be presented.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot - Credit Card Utilization Patterns by Attrition Status

This interactive D3.js scatter plot visualizes credit card utilization patterns from the Bank Customers Dataset, plotting customer age against total transaction amount. Each circle represents an individual, colored by attrition status—blue for active customers and gray for those who churned. Users can dynamically change the x- and y-axis variables via dropdown menus powered by a custom `menu` module, with smooth transitions updating the axes and points. The visualization uses `scaleLinear`, `scaleOrdinal`, and `axisBottom`/`axisLeft` from D3, rendered as an SVG with hover interactions that highlight individual points and a legend filtering by attrition status.

RRaul Gamez

87% match

Loading thumbnail…

Box Plot - Credit Card Utilization by Attrition Status

This interactive box plot visualization compares credit card customer behavior across attrition statuses using the Bank Customers Dataset. A dropdown menu lets users switch between six quantitative variables, including credit limit, total transaction amount, and average utilization ratio. The D3.js implementation uses `scaleBand` and `scaleLinear` for positioning, `quantile` for calculating box statistics, and SVG transitions to animate updates between selections. Hovering highlights individual boxes while tooltips display quartile values and whisker ranges, with attrition status encoded through color.

RRaul Gamez

86% match

Loading thumbnail…

Violin Plots - Credit Card Utilization by Attrition Status

This interactive visualization uses D3 violin plots to compare credit card customer attrition status—existing versus attrited—across selected quantitative variables from a bank customer dataset. A dropdown menu lets users switch between metrics like credit limit, total transaction amount, and average utilization ratio, with violin color encoding attrition status. The charts render as SVG with animated transitions, and hovering over a violin highlights it and reveals underlying bin values via a tooltip. The implementation relies on d3.histogram, d3.area, d3.curveCatmullRom, and d3.transition for smooth updates.

RRaul Gamez

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

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

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

82% match

Loading thumbnail…

Scatter Plot - Credit Card Utilization Patterns with Brushing

This interactive scatter plot from D3 visualizes credit card utilization patterns from the Bank Customers Dataset, with each circle representing a customer colored by attrition status. Users can switch the x- and y-axes among six attributes through dropdown menus, while hovering over the legend highlights points in each category and brushing a region temporarily emphasizes enclosed points. The visualization uses d3.scaleLinear, d3.axisBottom, d3.axisLeft, d3.brush, and d3.transition to animate updates.

RRaul Gamez

82% match

Loading thumbnail…

Donut Charts - Attrition Level per Categories

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.

RRaul Gamez

80% match