Skip to main content
SimilarExport ZIP
100%

Iterated Clustered Bar Chart - Average Credit Card Utilization by Education Level

✓ Published1🌍 Public
RRaul Gamez
Last edited Oct 1, 2021
Created on Sep 28, 2021

This clustered bar chart visualizes average credit card utilization by education level and gender, using data from the Bank Customers Dataset. Six education categories are shown on the x-axis, with male and female averages paired as blue and orange bars respectively on the y-axis. The D3 code groups raw records via a custom `groupBy` function, then renders SVG rectangles with `scaleBand` and `scaleLinear`. Interactive tooltips display the total transaction sum and record count per group, while hover effects temporarily darken bar colors. Axes are formatted with `axisBottom` and `axisLeft`.

AI-generated description

What's new?

  1. New selection of colors for the bars.
  2. More subtle axis ticks and labels.
  3. New tooltip when hovering over a bar with the number of records and totals used to calculate the average.
  4. Bars are highlighted when hovering over them.

A clustered bar chart using D3 displaying data of credit card utilization from the Bank Customers Dataset.

The education level of the customers is displayed on the x-axis, the average utilization in dollars on the y-axis and their gender on the color of the bars (blue for males or orange for females).

MIT Licensed

Similar vizzes

Loading thumbnail…

Clustered Bar Chart - Average Credit Card Utilization by Education Level

This clustered bar chart compares average credit card utilization across six education levels, with blue bars for male customers and orange bars for females. The data comes from the Bank Customers Dataset, loaded via `d3.csv` and preprocessed using a custom `groupBy` function that aggregates transaction amounts by gender. The visualization uses `d3.scaleBand` for the x-axes, `d3.scaleLinear` for the y-axis, and `d3.scaleOrdinal` for color encoding. Bars are rendered as SVG rectangles within grouped elements, with axes generated through `d3.axisBottom` and `d3.axisLeft`, plus a legend appended dynamically.

RRaul Gamez
96% 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
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…

Reusable Clustered Bar Chart with Interaction

A clustered bar chart displays average credit card metrics from a bank customer dataset, grouped by categorical attributes like income or education. Users select the grouping variable and the metric to aggregate, while bar colors encode card category (Blue, Silver, Gold, Platinum). The chart uses D3’s `scaleBand`, `scaleLinear`, and `scaleOrdinal` to position and color bars, with `transition` animating updates. Hovering reveals tooltips showing sums and counts via SVG `title` elements. Data is preprocessed with D3’s `rollups` and `group` functions from a CSV source.

RRaul Gamez
83% 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…

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
76% 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
75% 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
73% match