Top 10 Cosmetic Products by Revenue

100%

Top 10 Cosmetic Products by Revenue

✓ Published0🌍 Public

Last edited Mar 6, 2022

Created on Mar 6, 2022

A horizontal bar chart ranks the top ten cosmetic products by revenue, from Eyeshadows at the top to Powder at the bottom. Each bar’s length encodes the dollar value, with the x-axis labeled “Reveune in Dollars.” Built with D3 v5, the visualization uses `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft`, and formats tick labels with `d3.format`. Data comes from a CSV file, rendered as SVG rects with a steelblue fill, and includes a title and gridlines via `tickSize`.

AI-generated description

MIT Licensed

Similar vizzes

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

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

81% match

Loading thumbnail…

Fork of ICE-6 Tutorial Bar Chart

This bar chart displays the top 10 cosmetic products by revenue in dollars, using a horizontal layout with a linear x-scale and a banded y-scale. The visualization is built with D3 v5, leveraging the `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` APIs to render axes and bars. Data is loaded from a CSV file via `d3.csv`, with revenue values parsed as numbers. The chart includes axis labels and custom tick formatting that converts large numbers from G to B. The SVG canvas is 860 by 450 pixels, with margins arranged for clear presentation.

DDINESH SAI BOPPANA

81% match

Loading thumbnail…

Fork of ICE-6 Tutorial Bar Chart

This bar chart displays the top 10 cosmetic products by revenue, using a horizontal layout where product names are on the y-axis and revenue in dollars on the x-axis. The visualization is built with D3 v5, using `scaleLinear` and `scaleBand` to map data, and `axisLeft` and `axisBottom` for customized axes with tick formatting that converts large numbers to abbreviations. Data is loaded from a CSV file via `d3.csv` and rendered as SVG rectangles. The chart includes a title and axis label, with a light styling applied through external CSS.

Vvegurusaiprathyusha

81% match

Loading thumbnail…

Fork of ICE-6 Tutorial Bar Chart

Vvegurusaiprathyusha

81% match

Loading thumbnail…

ICE-6 Tutorial Bar Chart

This bar chart displays the top 10 cosmetic products by revenue, using a horizontal layout where bar length represents dollar amounts. The data is loaded from a CSV file using D3’s `csv` function. The visualization customizes D3 axes: the y-axis removes domain and tick lines, while the x-axis uses a custom tick formatter that converts values from gigabytes to billions. The chart is rendered as SVG, with bars styled via CSS and axes created using `scaleBand`, `scaleLinear`, `axisLeft`, and `axisBottom`.

Sskambhore04

81% match

Loading thumbnail…

....................

This horizontal bar chart visualizes the top 10 countries by beauty product spending from a 2018 United Nations population estimate, highlighting the cosmetic industry's revenue. The D3 v5 code uses `scaleLinear` and `scaleBand` to map spending values and country names, with `axisLeft` and `axisBottom` for customized axes. The bars are rendered as SVG rectangles, colored steelblue via CSS, and a `format('.3s')` tick label transforms numbers into readable units. Data is loaded from a CSV file, and the chart title and axis label are added as SVG text elements.

KKeerthiAnnem

80% match

Loading thumbnail…

Fork of ICE-6 Tutorial Bar Chart

This horizontal bar chart displays the top 10 cosmetic products by revenue, with revenue values on the x-axis and product names on the y-axis. The chart uses D3 v5’s `scaleLinear` and `scaleBand` for scaling, `axisBottom` and `axisLeft` for axes, and formats tick labels with `format` to abbreviate large numbers. Data is loaded via `d3.csv` from a GitHub gist, and the SVG rendering includes custom axis label and title text.

Eeravellisaimeghana

80% match