Customer Data Visualization

Last edited Oct 20, 2025

Created on Oct 20, 2025

This visualization presents customer data from a CSV file through two Plotly charts. A multi-series line chart displays trends in annual income, spending score, and satisfaction rating across customer IDs. A combined bar and line chart compares store visits (bars) against online purchases (line) using dual y-axes. The code uses the Plotly.js library, loading data via `Plotly.d3.csv` and rendering charts with `Plotly.newPlot`.

AI-generated description

Customer Data Visualization

This project visualizes customer data using D3.js to create two charts:

Multi-Series Line Chart showing trends in Annual Income, Spending Score, and Satisfaction Rating
Combined Chart (Bar + Line) showing Store Visits (bar) vs Online Purchases (line)

How to Run

Save all files in the same directory
Open index.html in a web browser
The visualizations will load automatically

Data

The dataset contains information about 49 customers including:

Customer ID
Age
Annual Income
Spending Score
Online Purchases per month
Store Visits per month
Satisfaction Rating

MIT Licensed

Similar vizzes

Fork of combines

This example shows customer behavior data from a CSV file through two interactive charts. The first is a multi-series line chart displaying annual income, spending score, and satisfaction rating across customer IDs. The second combines a bar chart of store visits with a line chart of online purchases, using dual y-axes. Both visualizations are built with Plotly.js, using its `Plotly.newPlot` method, and load data through `Plotly.d3.csv`.

89% match

Scatter plot

This scatter plot visualizes customer data from a CSV file, showing the relationship between annual income and spending score, with each dot colored by gender. The visualization uses D3.js v7 to render SVG circles, with a tooltip that appears on mouseover to display detailed customer information like age, purchase frequency, and satisfaction rating. The chart includes axis labels, a title, and a legend, with scales computed via `d3.scaleLinear` and `d3.extent` for data domains.

74% match

Scatter plot

74% match

Multi-Series Line + Combined (Bar+Line)

This dashboard presents two charts built with D3.js v7 from a CSV sales dataset. The top visualization uses a multi-series line chart to track monthly trends for Sales and Profit. The bottom chart combines bars for Sales with an overlaid line for Profit Margin, providing a dual-axis view of volume versus efficiency. Data is parsed and aggregated by month using `d3.rollups` and `d3.timeParse`, with axes, grids, and scales configured via `d3.axisLeft`, `d3.axisBottom`, and `d3.scaleUtc`. Rendering uses SVG within a dark-themed HTML container.

RRamdas Dheeraj

73% match

LLikhitaMudagereShivaraj@my.unt.edu

Combined Chart

This combined chart displays stock price trends for three companies across January through June 2024, using data from a CSV file. Multi-series lines show all three companies’ price movements over time. The visualization overlays Company A’s data as semi-transparent bars with its line, while Company B appears as a dashed line, creating a layered comparison. Built with D3 v7, the SVG rendering uses `d3.scaleTime`, `d3.scaleLinear`, `d3.line` with curves, and axes via `d3.axisBottom` and `d3.axisLeft`.

Combined chart

This combined chart displays monthly car sales as blue bars on a left axis and a satisfaction score as a pink line on a right axis. The visualization uses D3 v7 to load a CSV from a GitHub gist, then renders with SVG. It employs `d3.scaleBand` for the x-axis months and separate `d3.scaleLinear` scales for the two y-axes, with gridlines, rotated tick labels, and a legend.

Ccharchana0527@gmail.com

Mmaddulanagasanjana@gmail.com

Multiline & Combined

Two D3.js v7 SVG charts display monthly data from ICE.csv. The first is a multi-series line chart plotting signups, revenue, and support tickets over time on a shared axis, using distinct pastel strokes and a legend. The second combines a bar chart of revenue with an overlaid line for support tickets, using shared time and value scales. Both charts employ d3.csv, d3.timeParse, d3.scaleTime, d3.scaleLinear, d3.line, and d3.axisBottom/axisLeft.

ICE6_Combined_Bar_Line

This combined chart displays 150 months of coffee sales as blue bars on a left y-axis, overlaid with customer counts as a red line on a right y-axis, using two independent linear scales. The visualization also includes grid lines, axis labels, a legend, and circular data points along the customer line for precise value reading. Built with React and D3 v7, the chart renders as SVG, reads data from a CSV file via d3.csv, and constructs the bar and line elements using d3.scaleBand, d3.scaleLinear, d3.axisLeft, d3.axisRight, and d3.line.

AAddiga Himesh Chander