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

100%

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

✓ Published0🌍 Public

Last edited Jul 16, 2023

Created on Jul 16, 2023

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.

AI-generated description

This bar chart shows population of the top 10 most populous countries. The data comes from the year 2018 estimate in United Nations: World Population Prospects 2017. It also demonstrates customization of D3 axes.

See also the first bar chart visualization that this one builds on: Making a Bar Chart.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of ICE-6 Tutorial Bar Chart

This bar chart displays the top 10 cosmetic products by revenue, using 2018 population data from the United Nations World Population Prospects 2017 as a proxy for ranking. The visualization uses D3 v5 with `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render SVG bars and axes. Data is loaded via `d3.csv` from a GitHub gist, with revenue values parsed as numbers. The chart customizes axes by removing domain lines and adds a formatted tick label that replaces "G" with "B" for billions.

DDeekshithVemula

83% match

Loading thumbnail…

Assignment 2_Task 1 (Bar chart)

This horizontal bar chart displays the cosmetic industry revenue across ten countries, with the United States leading in spending on beauty products and Russia trailing. The bars are sorted in descending order, with each bar’s length proportional to the spending value. The chart is rendered as an SVG using D3 v7, employing `scaleLinear` for the x-axis and `scaleBand` for the y-axis. Data is loaded from a CSV file, and axes are generated with `axisBottom` and `axisLeft`.

KKeerthiAnnem

82% match

Loading thumbnail…

Top 10 Cosmetic Products by Revenue

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`.

Sskambhore04

80% match

Loading thumbnail…

Fork of ICE-6 Tutorial Bar Chart

This horizontal bar chart displays the top 10 cosmetic products by revenue, using a linear scale for the value axis and a band scale for product categories. The visualization, built with D3 v5, demonstrates axis customization by removing domain lines and tick marks while applying a custom formatter that converts thousands to billions. Data is loaded from a CSV file hosted on GitHub, sourced from United Nations population estimates, and rendered as SVG rectangles with steelblue fill.

Bbhargavarathod

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

80% match

Loading thumbnail…

bar chart

This horizontal bar chart displays the populations of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. Using D3 v5, it employs `scaleLinear` and `scaleBand` to map population values and country names, respectively, while `axisBottom` and `axisLeft` generate the labeled axes. The SVG bars are colored steelblue via CSS, with tick formatting converting numbers to abbreviated units like “B” for billions. Data is loaded from a CSV file using D3’s `csv` parser.

Ttkreglhn

79% match

Loading thumbnail…

Making a Bar Chart

This bar chart shows the top 10 most populous countries using 2017 United Nations population estimates. The SVG visualization uses `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the categorical y-axis, with custom tick formatting that converts billions to the ‘B’ suffix. Axes are styled via `d3.axisBottom` and `d3.axisLeft`, removing default domain lines and adding a centered axis label. Data is loaded with `d3.csv` and displayed as steelblue rectangles.

Rrandom-program

79% match

Loading thumbnail…

Making a Bar Chart

This bar chart displays the population of the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects 2017. It demonstrates customized D3 v5 axes and a linear scale for population values, with a band scale for country names. The code imports specific APIs including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`, and formats tick labels using `format('.3s')`. Data is loaded from a CSV file and rendered as SVG rectangles with a steelblue fill.

Zzilvus

79% match