Quantity vs. Price Scatter Plot visualization

100%

Quantity vs. Price Scatter Plot visualization

✓ Published0🌍 Public

Last edited Apr 23, 2024

Created on Apr 23, 2024

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Fork of HTML Starter

This example shows a scatter plot of transaction data, plotting Quantity on the x-axis against Price on the y-axis using D3.js v7. The code defines a small inline dataset, sets up an SVG canvas with margins, and uses `d3.scaleLinear` to map data values to pixels. Circles are rendered with `d3.axisBottom` and `d3.axisLeft` adding the corresponding axes. The visualization is a minimal, static representation of the relationship between the two numeric variables.

PPriyank Singh

80% match

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

77% match

Loading thumbnail…

"InvoiceDate" and "Price" line chart visualization

This example shows a scatter plot of quantity against price, with each data point labeled by its coordinates. The SVG visualization uses D3.js v7 to create axes, axis labels, and steelblue circles plotted via `d3.scaleLinear` scales. The code explicitly draws the x- and y-axes as separate line elements, positions circles using `attr('cx', ...)` and `attr('cy', ...)`, and adds text labels using `enter().append('text')`. All data is hardcoded in a JavaScript array.

JJames Cruz

77% match

Loading thumbnail…

Fork of "InvoiceDate" and "Price" line chart visualization

A scatter plot with connected line visualizes the relationship between product quantity and price using seven sample e-commerce items, each labeled with its full description. Circles in steelblue mark data points, while a line connects them in sequence. Built with D3 v7 and SVG, the code manually constructs axes as line and text elements, uses linear scales for both dimensions, and positions labels offset from each point.

JJames Cruz

75% match

Loading thumbnail…

resuable scatter plot

This interactive scatter plot visualizes supermarket sales data, plotting Quantity on the x-axis and Price on the y-axis, with points colored by product list category. It demonstrates a reusable chart pattern, using d3.csv to load the dataset and d3.scaleLinear, d3.extent, d3.axisLeft, and d3.axisBottom to render axes. An animated loop using setInterval toggles the x-value mapping between Quantity and Price every two seconds, redrawing the chart with smooth SVG transitions. The code follows the “Towards Reusable Charts” methodology, exposing configuration methods like .width, .height, .data, and .radius for flexible customization.

Pprashanth yamala

75% match

Loading thumbnail…

Scatter (PRICEEACH vs QUANTITYORDERED, color = PRODUCTLINE)

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.

RRamdas Dheeraj

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

74% match

Loading thumbnail…

Reusable D3 Scatter

This example presents a reusable scatter plot that visualizes retail sales data from a supermarket dataset. The plot animates by cycling between two variables—Quantity and Price—on the x-axis every four seconds, while the y-axis remains Price. Data points are colored by product category (blue for Clothing, purple for Gadgets, orange for Appliances). Built using D3 v6, it leverages scaleLinear, axisLeft, axisBottom, and csv loading, with SVG circles for rendering and a setInterval-driven animation.

Pprashanth yamala

74% match