Skip to main content
SimilarExport ZIP
100%

Scatter (PRICEEACH vs QUANTITYORDERED, color = PRODUCTLINE)

✓ Published0🌍 Public
RRamdas Dheeraj
Last edited Oct 17, 2025
Created on Oct 17, 2025
Forked from HTML Starter

This scatter plot shows the relationship between PRICEEACH and QUANTITYORDERED from a sales sample CSV, with each point colored by PRODUCTLINE using a Tableau10 ordinal scale. The visualization uses d3.csv to load and parse the data, then renders SVG circles positioned by linear scales for both axes. A legend built with HTML divs identifies the product lines, while the dark-themed chart includes axis labels, a title, and a rotated y-axis label. The code relies on d3.axisBottom, d3.axisLeft, d3.extent, and d3.scaleLinear for the quantitative encodings.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Re-usable Scatter Plot

This reusable scatter plot visualizes the relationship between product quantity and price from a CSV inventory dataset. It uses D3 v6 to load the data, map the numeric fields to linear scales, and render circles with fixed radius on an SVG canvas. The code demonstrates a modular chart-building pattern with explicit margins, axis generation via `d3.axisBottom` and `d3.axisLeft`, and a consistent steelblue fill for all data points. The chart is embedded in a centered, styled layout.

Vvishnupriya eupuri
78% match
Loading thumbnail…

ice 6 - q2

This scatter plot visualizes the relationship between quantity ordered and price per unit from a sales dataset. Each red circle represents a single order, with the x-axis showing quantity and the y-axis showing price in USD, and hovering reveals exact values via a tooltip. The visualization is built with D3 v7, using `d3.csv` to load data from a GitHub-hosted CSV file, `d3.scaleLinear` to map data to coordinates, and `d3.axisBottom` and `d3.axisLeft` for the axes. Axes are labeled, and the title clarifies the plotted variables, all rendered as SVG elements.

AAravindReddyJanke@my.unt.edu
76% match
Loading thumbnail…

Question3

This scatter plot displays sales data, plotting total sales on the x-axis against order numbers on the y-axis, with each point colored by customer using an ordinal scale with the Tableau10 scheme. It loads a CSV from GitHub using d3.csv, renders circles in an SVG, and includes axes, a legend, and interactive tooltips that show product details on hover. The visualization uses d3.scaleLinear, scaleBand, axisLeft, and axisBottom for positioning and scaling.

Kkandulasunny17@gmail.com
75% match
Loading thumbnail…

Activity 6 Q3

This scatter plot shows the relationship between sales amount and number of orders, with each point colored by product category (electronics, cosmetics, or clothing). The visualization loads CSV data from a GitHub gist, uses `d3.csv` to parse the dataset, and renders circles via SVG. It employs `d3.scaleLinear` for both axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and a `d3.scaleOrdinal` to map categories to colors. A manually positioned legend explains the color coding at the bottom-right corner.

Kkrishi7079@gmail.com
75% match
Loading thumbnail…

Quantity vs. Price Scatter Plot visualization

This scatter plot visualizes the relationship between transaction quantity and price, with each data point represented as a steelblue circle positioned along linear axes. The visualization uses D3.js v7 within an HTML page, employing `d3.scaleLinear` for both x and y coordinates, `d3.axisBottom` and `d3.axisLeft` for the axes, and SVG rendering inside a `div` container. The dataset is hardcoded in the JavaScript file, and the chart dimensions are fixed at 600 by 400 pixels with defined margins, demonstrating a basic D3 scatter plot implementation with a React-friendly structure.

PPriyank Singh
75% match
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
74% match
Loading thumbnail…

Activity6_Question3

This scatter plot visualizes the relationship between Quantity and Profit in the Superstore dataset, with points colored and shaped according to Order Priority. Using D3.js v6, it loads CSV data via a GitHub gist and maps values to linear scales. The visualization creates SVG paths with distinct d3.symbol shapes—squares, diamonds, circles, and triangles—based on priority level. Axes are rendered using d3.axisLeft and d3.axisBottom, with custom styling applied to tick labels and axis titles.

Vvarshithainaganti@gmail.com
74% match
Loading thumbnail…

scatter plot

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.

CChindamrohan321@gmail.com
74% match