Skip to main content
SimilarExport ZIP
100%

Beauty Product Sales Scatter Plot

✓ Published0🌍 Public
NNukaShravanKumar
Last edited Jul 17, 2023
Created on Jul 17, 2023
Forked from HTML Starter

This scatter plot visualizes the relationship between units sold and revenue for various beauty products, with each point labeled by product name. The chart uses D3 v5 to load the CSV data, scale linear axes, and render SVG circles and text labels. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, while points are positioned using the `xScale` and `yScale` functions. The visualization highlights trends between sales volume and revenue, such as higher-revenue products not always having the highest units sold.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Beauty Product Sales Scatter Plot

This scatter plot visualizes the relationship between units sold and revenue for various beauty products, with each circle labeled to identify its product name. The visualization uses the D3.js library (v5) within a React framework, rendering as an SVG. It reads data from a CSV file, scales the axes using `d3.scaleLinear` for both variables, and employs `d3.axisBottom` and `d3.axisLeft` to create the coordinate system. Data points are drawn as circles with `d3.selectAll` and appended with `.enter()`, and product names are added as text labels positioned next to each point.

Hharsha
97% match
Loading thumbnail…

Beauty Products Scatter Plot

A scatter plot displays the price and rating of six beauty products, including lipstick, mascara, and foundation. Each dot represents a product, positioned by its price on the x-axis and rating on the y-axis. The visualization uses d3.csv to load data from beauty_products.csv, then applies d3.scaleLinear to map values to SVG coordinates. Circles are appended to the SVG with a fixed radius of five pixels, while text labels identify the axes as Price and Rating.

NNukaShravanKumar
85% match
Loading thumbnail…

Reusable Scatterplot

This scatter plot visualizes the relationship between units sold and sales revenue for mobile devices, with data points colored by brand. The implementation uses a reusable `scatterPlot` module built with D3 v6, employing `scaleLinear` and `scaleOrdinal` for axes and color encoding, alongside `axisLeft` and `axisBottom` for chart annotations. The visualization cycles between two halves of the dataset every five seconds, fetched from a CSV via `d3.csv`, and renders as an interactive SVG with a 12-pixel font for labels.

Ttelkapallyrekha@gmail.com
77% 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
76% match
Loading thumbnail…

COSMETICS PRODUCTS

This bar chart displays cosmetic product revenue in dollars, with product categories listed on the y-axis and revenue amounts on the x-axis. The visualization uses d3.scaleLinear and d3.scaleBand to map data values to pixel coordinates, with d3.axisBottom and d3.axisLeft generating the axes. Data is loaded from a CSV file hosted on GitHub via d3.csv, and the chart renders as SVG rectangles filled pink, with formatting applied through d3.format to display values in billions.

Aadapavaishnavi12
76% 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
76% match
Loading thumbnail…

Fork of COSMETICS PRODUCTS

This chart is a horizontal bar chart visualizing cosmetic product revenues in dollars. It compares the revenue of each product, with the bars sorted in descending order and labeled on the y-axis. The chart has a pink color scheme and uses a linear scale for the revenue axis and a band scale for the product categories. Built with D3 v5, the code uses `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render the SVG. The data is loaded from an external CSV file using `d3.csv`.

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