Skip to main content
SimilarExport ZIP
100%

Fork of ICE-6 Tutorial Bar Chart

✓ Published0🌍 Public
DDeekshithVemula
Last edited Mar 7, 2022
Created on Mar 7, 2022

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.

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.

MIT Licensed

Similar vizzes

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
92% 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
88% 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
87% 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
87% match
Loading thumbnail…

Fork of ICE-6 Tutorial Bar Chart

This horizontal bar chart displays the top 10 cosmetic products by revenue, using data sourced from a CSV file hosted on GitHub. The visualization employs D3 v5's scaleLinear and scaleBand to map revenue values and product names, and renders the chart as SVG. The axes are customized using axisBottom and axisLeft, with tick formatting that converts large numbers to abbreviated forms and removes grid lines from the y-axis. The X-axis label and title are added via SVG text elements.

Ggayathri
87% match
Loading thumbnail…

Fork of ICE-6 Tutorial Bar Chart

This example displays a horizontal bar chart of the top 10 most populous countries, with revenue on the x-axis and race categories on the y-axis, using a 2018 United Nations population estimate. The visualization, built with D3 v5, customizes the axes by removing tick lines and domain paths, and formats the x-axis tick labels using a `format` function that converts values to abbreviated billions. The y-axis is generated with `scaleBand` and `axisLeft`, while `axisBottom` renders the x-axis with a custom label; data is loaded from a CSV URL and mapped to `rect` elements via `selectAll`, leveraging `scaleLinear` for the numeric scale.

AAishwarya Manjunath
87% match
Loading thumbnail…

Fork of ICE-6 Tutorial Bar Chart

This bar chart displays the revenue of the top 10 cosmetic products, sorted by product name on the y-axis and revenue in dollars on the x-axis. It uses D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render an SVG with custom tick formatting that abbreviates large numbers (e.g., converting billions to "B"). Data is loaded from a CSV via `d3.csv` and originates from a GitHub gist. The chart also removes default axis lines and includes custom labels for the title and x-axis.

Ssaiteja0725
87% 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
87% match