Skip to main content
SimilarExport ZIP
100%

Beauty Products Scatter Plot

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

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.

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

Beauty Product Sales Scatter Plot

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.

NNukaShravanKumar
85% match
Loading thumbnail…

3D Scatter Plot

This 3D Scatter Plot visualizes product sales data, plotting relationships between brand, lipstick, and area code in one trace, and area code, brand, and foundation in another. The code uses D3’s `d3.csv` to load the dataset from a GitHub gist, then builds two `scatter3d` traces via Plotly’s JavaScript API, populating a `newPlot` inside the `myDiv` element.

AAnitha Shivaramaiah
75% match
Loading thumbnail…

3D Scatter Plot

This 3D scatter plot visualizes Apple product data, mapping original price, discounted price, and ratings along the x, y, and z axes. The plotly.js library renders the interactive 3D scene, while the d3.csv method loads the data from a remote CSV file hosted on GitHub. Each marker’s size is fixed, with a semi-transparent fill and gray outline, and axis titles are colored distinctly to aid legibility. The layout’s margins are minimized to maximize the plot area within the page.

BBhanuMotupalli
73% match
Loading thumbnail…

Scatter Plot

A scatter plot displays the relationship between item weight and item rate from a CSV dataset, with each point positioned by d3.scaleLinear scales and rendered as an SVG circle. The visualization includes axes with tick marks, axis labels, and a title, all styled via CSS. The code uses d3.csv, d3.extent, d3.axisLeft, d3.axisBottom, and d3.format for data loading, scaling, and formatting, while React serves as the framework hosting the D3 v5 implementation.

BBaraneedharan N M
72% 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
72% match
Loading thumbnail…

Fork of ScatterPlot

This scatter plot visualizes the relationship between sale price and number of ratings for iPhone products, using a dataset loaded via `d3.csv`. It shows individual data points as circles, with axes labeled for both variables. The code employs D3 v7’s `d3.scaleLinear` for positioning, `d3.axisBottom` and `d3.axisLeft` for axes, and appends circles with `g.selectAll('.dot')`. Styling uses CSS for axis text and hover effects, while the fill color is conditionally applied based on product name.

Mmukundakrishna.r@gmail.com
71% 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
71% match