Fork of ICE-6 Tutorial Bar Chart

100%

Fork of ICE-6 Tutorial Bar Chart

✓ Published0🌍 Public

Last edited Mar 7, 2022

Created on Mar 7, 2022

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.

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, 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

87% match

Loading thumbnail…

Fork of Making a Bar Chart

This horizontal bar chart displays the top 10 most populous countries in 2018, using United Nations population estimates. It demonstrates D3 v5 customization of axes, including a formatted x-axis with tick marks and labels, a removed y-axis domain, and rotated tick labels. The chart uses `scaleLinear` and `scaleBand` for scales, `csv` to load data, and `axisBottom` and `axisLeft` for axes. Population values are multiplied by 1000, and d3-format abbreviates tick labels (e.g., "1.42B"). Rendering is SVG-based with steelblue bars and a custom title.

DDavi Resio

86% match

Loading thumbnail…

Fork of ICE-6 Tutorial Bar Chart

This horizontal bar chart displays the top 10 countries by accident count for 2015, sourced from the United Nations World Population Prospects 2017. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear` and `scaleBand` for the x and y axes, respectively. The code customizes the axes by removing domain lines, applying a tick formatter that converts large numbers to abbreviated units, and adding axis labels and a title. Data is loaded asynchronously via `d3.csv` from a GitHub gist.

SSreekarveeravelly

86% match

Loading thumbnail…

Fork of Making a Bar Chart

This bar chart displays the populations of the top 10 most populous countries, based on 2018 United Nations estimates. It shows how a D3 v5 bar chart can be customized, with axes and tick labels formatted using `d3.format`. The visualization uses `d3.scaleLinear` and `d3.scaleBand` to map population values and country names, while `d3.axisBottom` and `d3.axisLeft` render the axes. The data is loaded with `d3.csv` and rendered as SVG rectangles with a steelblue fill.

AAnimesh Nautiyal

86% match

Loading thumbnail…

Fork of Making a Bar Chart

This bar chart displays the top 10 most populous countries based on 2018 estimates from the United Nations World Population Prospects, using revenue data in dollars as a proxy. The visualization uses D3 v5 with `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis, and `d3.axisBottom` and `d3.axisLeft` for labeled axes. Data is loaded from a CSV file via `d3.csv`, and the chart is rendered as SVG, with customized axis formatting and removal of default tick lines.

Sskambhore04

86% match

Loading thumbnail…

Fork of Making a Bar Chart

This bar chart displays the top 10 most populous countries using 2018 United Nations population estimates, with values reformatted to show billions. The visualization uses D3 v5’s `scaleLinear` and `scaleBand` to map population and country names, while `axisBottom` and `axisLeft` render the axes. The chart features a custom tick formatter that abbreviates numbers with `format('.3s')`, and SVG rectangles are colored steelblue via CSS. Data is loaded from a CSV file and rendered with d3.csv.

JJingyi Feng

86% match

Loading thumbnail…

Fork of Making a Bar Chart

This example displays the top 10 most populous countries as a horizontal bar chart, using 2018 population estimates from the United Nations World Population Prospects. The chart customizes D3 axes by removing domain lines, adding tick marks, and formatting population values with the `format('.3s')` function, which converts large numbers into abbreviated labels like “B.” The visualization is built with D3 v5, loading data from a CSV file via `d3.csv`, and uses `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render SVG bars, labels, and a title.

RRobFaj

86% match

Loading thumbnail…

Fork of Making a Bar Chart

This example shows a horizontal bar chart of the top 10 most populous countries, using 2018 population estimates from the United Nations World Population Prospects 2017. The chart customizes D3 axes by removing domain lines and tick lines, and formats tick labels with `d3.format` to abbreviate values (e.g., “B” for billions). It uses `d3.csv` to load data, `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis, and renders SVG rectangles. The chart is rotated 270 degrees via CSS.

Ssumitmishra9826

85% match