R

Raul Gamez

@jrgamez·22 public vizzes

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

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.

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.

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.

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.

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.

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.

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.

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.

Loading thumbnail…

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

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

Loading thumbnail…

JavaScript Arrays and D3 Selections

This example demonstrates a generative animation of circles moving in a sine wave pattern across the screen, created using D3.js and JavaScript array methods. The visualization shows how D3’s selection API and array functions can be combined to dynamically update the scene, with 10 to 15 circles oscillating horizontally and vertically. The code imports `select` and `ascending` from D3, uses `range`, `map`, `filter`, `reduce`, and `sort` to manipulate data, and updates the SVG elements in a 60 FPS loop with a sine-based trajectory. The rendering is entirely SVG-based with no external data source.

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.

Loading thumbnail…

Scatter Plot - PS4 Game Sales by Year of Development

This scatter plot shows global PS4 game sales in millions of dollars plotted against the year of game development, with each circle representing a game. The code uses D3 v6 to load a CSV dataset from a GitHub gist, filters for global sales records, and renders the points as semi-transparent SVG circles. Axes are generated using `d3.axisLeft` and `d3.axisBottom`, with linear scales (`d3.scaleLinear`) mapping years and sales values to screen coordinates. The chart fills the browser window and includes labeled axes for year and sales.

Loading thumbnail…

Clustered Bar Chart - Average Insurance Charges by Region

This clustered bar chart displays average insurance charges across four US regions, comparing smokers (red bars) versus non-smokers (black bars) using data from an Insurance Expenses Dataset. The visualization uses D3 v6 scales—`scaleBand` for the region groups and subgroup categories, `scaleLinear` for the y-axis, and `scaleOrdinal` for color mapping. Data is loaded via `d3.csv` and grouped with a custom `groupBy` function that calculates averages by smoking status. The SVG rendering includes axis generators (`axisBottom`, `axisLeft`) and a custom legend, with bars shaded at 0.95 opacity.

Loading thumbnail…

Scatter Plot - Insurance Charges by Age

This scatter plot visualizes insurance charges for individuals based on age, with each circle’s color indicating smoking status—red for smokers and black for non-smokers. The chart, rendered as SVG using D3 v6, loads data from a CSV file via `d3.csv`, applies linear scales via `d3.scaleLinear`, and uses `d3.axisLeft` and `d3.axisBottom` for axes. The code joins circles to data with `selectAll().data().join()` and sets fill opacity to 0.35.

Loading thumbnail…

Scatter Plot - Bank Customers Expenditure by Age

This scatter plot visualizes credit card expenditure against customer age, with each circle colored black for existing customers and red for those who have churned. Data comes from the Bank Customers Dataset, loaded via `d3.csv`. The SVG renderer uses `scaleLinear` for both axes, `axisLeft` and `axisBottom` for ticks, and circles with a fill opacity of 0.35 to show overlapping points. The plot emphasizes age and total transaction amount, revealing spending patterns and attrition clusters.

Loading thumbnail…

Multiple Smiley Faces

Six identical smiley faces repeat in a grid, each a yellow circle with black stroke, two eyes, and a mouth. The example demonstrates composing SVG shapes from reusable React components, with the D3 library providing the arc generator for the mouth path. Each face is rendered as an independent SVG via the `FaceContainer`, with fixed dimensions and positioned by a simple transform. The grid is generated by iterating over a range of values from D3, creating a uniform, tile-like arrangement of the same facial expression.

Loading thumbnail…

Interaction with React

A circle follows the cursor as it moves across an SVG canvas. The example demonstrates how React manages interactive state for a simple visualization, using the `useState` and `useCallback` hooks to track mouse coordinates and update the circle's position. React 16.9 renders the SVG element, which listens for `onMouseMove` events and updates the `cx` and `cy` attributes of the circle in real time.

Loading thumbnail…

SVG - Database Icon

This example shows a classic cylindrical database icon drawn entirely with SVG shapes. The code uses SVG elements such as `ellipse`, `path`, and `circle` to render the icon's body, connector lines, and data dots on a 960x500 canvas. The icon is composed of stacked curved paths creating a three-dimensional cylinder effect, with the top ellipse and side straight lines forming the container. Grey circles on the side represent stored records, while the stroke and fill attributes control the black-and-white aesthetic. No JavaScript libraries are used; the visualization relies purely on static SVG markup.

Loading thumbnail…

Loading and Parsing Insurance Expenses Dataset

This example shows the basic structure of an insurance expenses CSV dataset by displaying its file size, row count, and column count in large text. It loads the data from a GitHub gist using d3.csv and formats the parsed result with d3.csvFormat to calculate its size. The code also includes commented alternatives using fetch with async/await and d3.csvParse, as well as a nested promise example.

Loading thumbnail…

Loading and Parsing PS4 Games Sales Dataset

This example shows the raw size and structure of a PS4 games sales dataset by displaying three statistics: total file size in kilobytes, number of rows, and number of columns. Using D3 v5’s `d3.csvParse`, it converts fetched CSV text into a parsed data array, then extracts `data.length` for row count and `data.columns.length` for column count. The data is retrieved asynchronously via the Fetch API with `async`/`await`, and the results are rendered as large text inside a `<pre>` element.

Loading thumbnail…

Loading and Parsing Bank Customers Dataset

This example shows the basic structure of a bank customer dataset by displaying three summary statistics: file size in kilobytes, row count, and column count. It loads a CSV file from a GitHub gist using `d3.csv` and parses the data, then formats the metrics with `d3.csvFormat` and `Math.round`. The results are rendered as large text inside a `<pre>` element. The visualization relies on D3 v5’s promise-based loading API to handle the asynchronous data fetch.