Skip to main content
SimilarExport ZIP
100%

ICE-6 Tutorial Bar Chart

✓ Published23🌍 Public
Sskambhore04
Last edited Mar 6, 2022
Created on Mar 6, 2022
Forked from Making a 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`.

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

Fork of ICE-6 Tutorial Bar Chart

This horizontal bar chart displays the top 10 cosmetic products by revenue, with dollar amounts scaled along the x-axis and product names on the y-axis. It uses d3.csv to load data from a GitHub gist, then renders SVG rectangles with d3.scaleLinear and d3.scaleBand. Custom axes are built with d3.axisLeft and d3.axisBottom, including tick formatting that abbreviates large numbers with d3.format. The chart demonstrates margin-based layout and axis customization within an SVG canvas.

Iiamhassanrazaahr
92% 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
91% match