Cosmetic Pie Chart

100%

Cosmetic Pie Chart

✓ Published1🌍 Public

Last edited Apr 1, 2025

Created on Apr 1, 2025

This pie chart displays the distribution of cosmetic product labels—such as Lipstick, Foundation, and Eyeliner—from a CSV dataset loaded via `d3.csv`. The chart uses `d3.pie()` and `d3.arc()` to generate slices, with `d3.scaleOrdinal(d3.schemeCategory10)` assigning colors. Each slice includes a white text label positioned using `arc.centroid`. A legend, built with SVG rectangles and text, maps each color to its full product name. The SVG is rendered at 700×500 pixels with a red title, and all styling is applied via CSS.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Cosmetics32

This example visualizes the distribution of skin types from a cosmetics dataset loaded as CSV, rendering a pie chart with colored slices and a legend. The code uses D3 v7 APIs such as `d3.csv` for data loading, `d3.pie` and `d3.arc` for pie geometry, and `d3.scaleOrdinal` with `d3.schemeCategory10` for color encoding. Each slice is drawn as an SVG path with black strokes, and the legend maps skin type labels to corresponding colors.

Ssriharshakondakindi@gmail.com

84% match

Loading thumbnail…

Pie Chart latha bemanadham 11714828

This pie chart visualizes the distribution of cosmetic product types from a CSV dataset, showing the frequency of each category with labeled slices and a color-coded legend. It uses D3 v6 APIs including `d3.pie`, `d3.arc`, `d3.rollup`, and `d3.scaleOrdinal` with `d3.schemeCategory10` to generate and style the SVG chart, placing a red title above the visualization.

Llathabemanadham@my.unt.edu

83% match

Loading thumbnail…

Cosmetic Scatter Plot

A cosmetic product scatter plot visualizes the relationship between customer ratings (on the x-axis, 0–5) and price in USD (on the y-axis), for a dataset loaded via `d3.csv` from a GitHub gist. Each blue dot represents a product, with hover interactions changing the dot’s fill color and stroke width, and tooltips showing brand, rating, and price. Built with D3 v7, the SVG uses `scaleLinear` for both axes, `axisBottom` and `axisLeft` to render ticks, and appended circle elements with `title` nodes for tooltips. The chart highlights how price and perceived quality correlate across cosmetics brands.

Ddeepthiv.4706@gmail.com

79% match

Loading thumbnail…

ICE7-q2

This example shows the distribution of cosmetics brand stock as a pie chart, with each slice labeled directly on the chart and an interactive legend to the side displaying brand names and total values. It uses D3.js v7 with SVG rendering, loading CSV data from a GitHub Gist via `d3.csv`. The chart employs `d3.pie` and `d3.arc` to generate slices, `d3.scaleOrdinal` with `d3.schemeTableau10` for color encoding, and `d3.group` with `d3.sum` to aggregate stock values by brand.

Ppashamsahithi2391@gmail.com

79% match

Loading thumbnail…

ICE7-PieChart-Part2

This example visualizes product revenue shares as a pie chart, with five cosmetic product categories (e.g., Eyeshadows, Mascara) and their corresponding percentages. A legend with colored dots and labels identifies each category, while the chart’s slices are labeled directly with product names. The visualization uses D3 v4’s `d3.pie` and `d3.arc` to generate the chart, `d3.scaleOrdinal` with `d3.schemeCategory10` for colors, and SVG rendering within a React framework. The data is hardcoded in the script, with all values summing to 100 percent.

Sskambhore04

79% match

Loading thumbnail…

Cosmetic Area Chart

This visualization shows how the prices of cosmetic products vary across a dataset, using a filled area chart where the x-axis represents the index of products and the y-axis displays price in USD. The blue, semi-transparent area emphasizes the overall price range and distribution across the product list. Built with D3.js v7, the code loads CSV data from a GitHub gist, parses the Price field, and constructs linear scales for both axes. It renders the area using the `d3.area()` generator into an SVG path, with labeled axes and a heading.

Ddeepthiv.4706@gmail.com

78% match

Loading thumbnail…

Pie Chart

This pie chart displays categorical data loaded from a CSV file, with slices colored by category and labeled directly on the chart. It uses D3.js APIs such as `d3.pie()`, `d3.arc()`, and `d3.scaleOrdinal` with `d3.schemeCategory10` to generate and color the SVG paths. Text labels are positioned using `arc.centroid`, and a legend is built with appended rectangles and text elements. The SVG is centered via a transform, and the chart dimensions are fixed at 500 by 500 pixels.

Rrajeswariamruthabommaraju@my.unt.edu

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

77% match