Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Fork of ICE-6 Scatter Plot

✓ Published0🌍 Public
GGogineni44
Last edited Mar 21, 2023
Created on Mar 21, 2023
Forked from scatter plot

This scatter plot visualizes shopping data by mapping Spending Score against Family Size, with age and annual income encoded as circle radii. Each point’s color represents gender, distinguishing male (blue) and female (yellow) shoppers. Built with D3 v6, the visualization loads CSV data via `d3.csv`, scales axes with `scaleLinear`, and renders SVG circles using `selectAll` and `join`. Axis labels are added with `axisLeft` and `axisBottom`, while explicit text elements provide contextual titles for the x and y axes.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Penguin Data set scatter Plot

This fork of the Penguin Data set scatter plot visualizes relationships between annual income, spending score, work experience, and family size, with points colored by gender (yellow for male, green for female, brown otherwise). The visualization uses React, D3 v5, and SVG rendering, loading data from a CSV via `d3.csv`. It employs D3’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map data to coordinates and render axes. Circles are drawn with both `rx`/`ry` attributes and a radius, while axis labels and a title are added as text elements.

Pprathyusha-reddy-arch
82% match
Loading thumbnail…

Activity6_Task3

A scatter plot displays annual income against spending score for mall customers, with each circle colored pink or blue to distinguish female and male shoppers. The visualization uses D3 v6 to load the CSV dataset from a GitHub repository, then applies scaleLinear functions to map income and spending values to SVG coordinates. Axes are rendered using axisLeft and axisBottom, while circle positions and fills are set through data joins and a genre-based color function.

Jjtulasi05@gmail.com
81% match
Loading thumbnail…

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.

119h61a05c9@cvsr.ac.in
80% match
Loading thumbnail…

Fork of Scatter plot

A scatter plot displays 100 customers by annual income on the x-axis and spending score on the y-axis, with each dot colored by gender using a Tableau10 ordinal scale. Hovering over a point reveals a tooltip with customer details, including age, purchase frequency, and satisfaction rating. The visualization loads a tab-separated dataset via `d3.tsv`, renders axes with `d3.axisBottom` and `d3.axisLeft`, and uses `d3.scaleLinear` for both dimensions within an SVG canvas.

119h61a05c9@cvsr.ac.in
79% match
Loading thumbnail…

Fork of ICE-6 Scatter Plot

This example presents a scatter plot of an insurance dataset, visualizing the relationship between patient height and age while encoding weight and income through non-standard circle radius properties (`rx` and `ry`), which distorts the marks into ellipses. The code colors each point by gender (red for female, green for male) and builds the SVG chart using D3 v5 APIs such as `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`. Data is loaded from a GitHub-hosted CSV file, with axes labeled “Charges” and “bmi” despite the actual mapped fields being age and height.

TTekmal-Bhavana
79% match
Loading thumbnail…

Fork of ICE7 - Reusable scatter plot 1

This interactive scatter plot visualizes relationships between pairs of numerical columns from a cosmetics dataset loaded via `d3.csv`. Users select which attributes appear on the x- and y-axes using dropdown menus, and the chart redraws on change. Built with D3 v6, it uses `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to render axes, while circles with steelblue fill represent data points. The visualization is rendered as SVG within a fixed 700×500 viewport, with margins and axis labels updated dynamically.

Ddeepthiv.4706@gmail.com
79% match
Loading thumbnail…

Fork of ICE6.1

This example visualizes the relationship between life expectancy and GDP per capita using a scatterplot of individual data points, with each point colored by species category. The visualization first presents the data as colored circles positioned along two quantitative axes, then explains the implementation: it loads CSV data from a GitHub gist, parses numeric fields, and uses D3 v6’s `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` functions to map values to screen coordinates. SVG circles are rendered with a fixed radius, and axis labels are added via appended text elements. The code employs React as the framework, though the visualization itself relies purely on D3’s DOM manipulation and SVG rendering.

Ppavan vasamsetti
79% match
Loading thumbnail…

Fork of ICE-6(Scatter plot)

This scatter plot from the ICE-6 series visualizes monthly sales versus profit using D3 v7 with SVG rendering. Each circle encodes a month’s sales on the x-axis and profit on the y-axis, with a hover tooltip revealing exact values via mouse events. The chart includes gridlines, axis labels, and a legend, pulling data from a local CSV file. A title and caption provide context, while the dark theme and scaling functions (d3.scaleLinear, d3.extent) structure the visualization clearly.

Vvydeeshm@gmail.com
78% match