scatter plot

100%

✓ Published0🌍 Public

Last edited Oct 27, 2025

Created on Oct 27, 2025

Forked from Vanilla D3 Vibecoding Template

This scatter plot displays product sales versus profit, with each circle representing a product and colored by category (Electronics, Clothing, or Food). The D3.js v7 code uses `d3.scaleLinear` for both axes, `d3.scaleOrdinal` with `d3.schemeCategory10` for coloring, and SVG circles to render data points. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, with text labels for Sales and Profit. The static dataset is embedded in JavaScript and passed to a render function that clears and redraws the chart.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

activity 6 task q3

This scatter plot visualizes the relationship between sales and profit for five products (A through E), with each point styled by a distinct shape and color derived from its product category. Built with D3.js v7, the visualization uses `scaleLinear` for both axes, `scaleOrdinal` with `schemeCategory10` for colors, and a custom symbol generator for shapes. Data originates from a hardcoded array in `bundle.js`, mirroring the `product.csv` file, and is rendered on an SVG canvas with axes labeled via the `axes.js` module.

Ssairamisetti3829@gmail.com

84% match

Loading thumbnail…

Scatter Plot group4

This scatter plot visualizes the relationship between sales and profit from a sample dataset. The SVG chart is rendered using the D3.js library, specifically leveraging `d3.csv` to load data, `d3.scaleLinear` to map values, and `d3.axisBottom`/`d3.axisLeft` for the axes. Each data point is drawn as a steelblue circle with a radius of five, positioned according to its sales and profit coordinates. The chart title and axis labels are added as SVG text elements.

Ssaikrishnabussa

82% match

Loading thumbnail…

Fork of Fork of Fork of d3.js project

This scatterplot displays the relationship between Sales and Profit for five products, with each circle representing a product and positioned according to its sales and profit values. The visualization uses D3.js v3, loading data from a CSV file via `d3.csv` and rendering an SVG with `d3.select`. Axes are generated using `d3.axisBottom` and `d3.axisLeft`, with linear scales (`d3.scaleLinear`) mapping the data ranges to the 500×400 pixel canvas. Steelblue circles mark the data points, while axis labels identify the measured variables.

Ssowjanyateppali4202@gmail.com

82% match

Loading thumbnail…

activity 6 question 3

This scatter plot shows the relationship between sales and profit, with points colored by product type using distinct D3 symbols (circle, square, diamond, triangle, and cross). It loads data from a CSV file and renders a scatterplot with axes, labels, and a shape legend. The visualization uses d3.scaleLinear for axes, d3.scaleOrdinal for shape encoding, and d3.symbol to generate marker paths, while d3.axisLeft and d3.axisBottom draw the axes.

Ssairamisetti3829@gmail.com

81% match

Loading thumbnail…

Ice7Q1

This interactive scatter plot visualizes Microsoft sales data, plotting revenue against profit for different product categories and scaling each point’s radius by order count. Hovering reveals a tooltip with category, revenue, and profit details. Built with D3.js v3, it uses `d3.svg.axis`, linear scales, and `d3.scale.category10` for coloring. Data loads from an external CSV file, and the chart is rendered as an SVG with mouseover transitions controlling tooltip opacity. The reusable `scatterPlot` function configures dimensions, margins, and accessor functions.

Ssrujana reddy

80% match

Loading thumbnail…

Store sales scatter plot

A scatter plot displays sales figures for five store products, with each product represented by a color-coded circle positioned along a band scale for product names and a linear scale for sales values. Sales numbers appear as labels above each circle, while axis titles identify the product and sales dimensions. Built with D3 v6, the SVG chart uses `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to construct the visualization from static in-memory data.

VVenkat-Sumith-Thota

80% match

Loading thumbnail…

Extra-Question6-Activity6_Task3

This scatter plot visualizes the relationship between Sales and Profit for products in a Global Superstore dataset. Each mark is positioned by the d3.scaleLinear scales for the x- and y-axes, and its shape and color encode the product Category, using d3.symbol with d3.symbolCircle, d3.symbolSquare, and d3.symbolTriangle, and a d3.scaleOrdinal color scale with the d3.schemeCategory10 palette. The visualization is rendered as SVG, drawing axes with d3.axisBottom and d3.axisLeft, and it loads the data from a remote CSV file.

Kkrunalpatel@my.unt.edu

80% match

Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot

This scatter plot displays monthly sales figures across six retail categories, with each circle’s horizontal position encoding the month, vertical position encoding sales amount, and color distinguishing product types. The visualization uses a reusable custom D3 module that employs `scaleOrdinal` for the categorical x-axis and legend colors, `scaleLinear` for the sales axis, and `axisLeft`/`axisBottom` for tick labels. The SVG output is generated from hardcoded data via the provided `index.js` and `scatterPlot.js` files.

UUday Kiran

80% match