Assignment2_task5_reusablescatterplot

100%

Assignment2_task5_reusablescatterplot

✓ Published0🌍 Public

Last edited Jul 22, 2023

Created on Jul 21, 2023

This scatter plot visualizes the relationship between customer age and total transaction amount, using point color to distinguish existing customers from attrited customers. It loads bank customer data from a CSV file and renders circles as SVG elements, with black representing existing customers and red representing attrited customers. The visualization uses D3 v6’s `d3.csv` for data loading, `d3.scaleLinear` for both axes, and `d3.axisLeft` and `d3.axisBottom` to display the scales. The chart includes labeled axes for age and total expenditure, with semi-transparent points to reveal overlapping data density.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

Similar vizzes

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.

RRaul Gamez

83% match

Loading thumbnail…

Activity 7 Scatter Plot

This scatter plot visualizes customer data from a CSV file, showing the relationship between Age on the x-axis and Income on the y-axis. Each circle’s fill color encodes the customer’s Spending Score, with skyblue for low scores, lightgreen for medium scores, and orange for high scores. The visualization uses d3.csv to load and parse data, d3.scaleLinear for both axes, and d3.axisLeft and d3.axisBottom to render the chart. SVG circles are drawn with a fixed radius of 5 pixels, while labeled axes are added via SVG text elements.

Vvineelaramulapalli32

79% match

Loading thumbnail…

assign2-5_pardha

A scatter plot shows credit card usage among bank customers, with age on the x-axis, total expenditure in dollars on the y-axis, and circle color indicating attrition status—black for existing customers and red for those who have churned. The visualization loads a CSV from a GitHub gist using `d3.csv`, parses numeric fields, and renders circles as SVG elements sized with a fixed radius and 35% fill opacity. Axes are generated with `d3.axisLeft` and `d3.axisBottom`, while scales are created using `d3.scaleLinear` with domains derived from `d3.min` and `d3.max`. The chart fills the browser window, drawing data marks via data joins on SVG circles.

Ppardha1411

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

75% match

Loading thumbnail…

Online Sales based on Age

A scatter plot displays online customer sales, mapping customer age on the x-axis against purchase value on the y-axis. Each circle’s fill color encodes the number of purchases, while the Time_Spent and Revenue_Total fields are bound to the circle’s rx and ry attributes, though the standard radius remains constant. The visualization uses D3 v5 with scaleLinear, extent, axisLeft, and axisBottom, loading CSV data from a GitHub gist and rendering as SVG circles.

MManideeprenikindi

75% match

Loading thumbnail…

reusable scatter plot

This example demonstrates a reusable scatter plot that visualizes the relationship between age and price, with points colored by gender. It automatically alternates between two subsets of the data every five seconds, using a timer to refresh the visualization. The implementation leverages D3 v6’s modular functions, including `scaleLinear`, `scaleOrdinal`, `extent`, and `axisLeft`/`axisBottom`, within a custom chart factory function. Data is loaded from a remote CSV file and parsed, while SVG rendering and animation are handled through D3’s selection and join methods, ensuring a clean, declarative approach to updating the plot.

Vvishnupriya eupuri

75% match

Loading thumbnail…

Scatter Plot

A scatter plot visualizes the relationship between total bill amounts and tip amounts for restaurant customers, with circles colored blue for male patrons and red for female patrons. Built with D3 v5, the visualization loads data from a CSV file using `d3.csv` and renders SVG circles positioned by `d3.scaleLinear` scales. The chart includes axes created with `d3.axisBottom` and `d3.axisLeft`, along with custom labels and a title, all rendered within an SVG container.

Mmandadi1999

73% match

Loading thumbnail…

reusable scatter plot

This reusable scatter plot displays age against fare price, with points colored by gender. The visualization alternates between two halves of the dataset every five seconds using `setInterval`, clearing the SVG and re-rendering with D3’s `selectAll` and `join` pattern. It uses `scaleLinear`, `scaleOrdinal`, `extent`, and `axisLeft`/`axisBottom` from D3 v6 to build axes and scales. The custom `scatterPlot` function exposes chainable methods for width, height, margins, and radius, while the data loads from a CSV URL via `d3.csv`.

Vvishnupriya eupuri

73% match