Fork of Making a Bar Chart

100%

Fork of Making a Bar Chart

✓ Published0🌍 Public

Last edited May 29, 2022

Created on May 29, 2022

This example displays the top 10 most populous countries as a horizontal bar chart, using year 2018 estimates from the United Nations World Population Prospects. Population values are multiplied by 1000 and encoded as bar widths via `d3.scaleLinear`, while country names are placed on a `d3.scaleBand` y-axis. The chart customizes D3 axes by removing domain lines, adding tick marks, and formatting tick labels to abbreviate large numbers (e.g., “1.4B”). Data is loaded from a CSV using `d3.csv`, and the SVG is rendered with D3 v5 selections.

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

97% 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 estimates from the United Nations World Population Prospects. The chart uses D3 v5 with an SVG rendering, scaling population values via `d3.scaleLinear` and country names via `d3.scaleBand`. It customizes the axes with `d3.axisLeft` and `d3.axisBottom`, applies a `.3s` tick format that replaces “G” with “B”, and removes default axis domain lines. The data is loaded from a CSV file using `d3.csv`.

CCristina Macaraig

97% match

Loading thumbnail…

Fork of Making a Bar Chart

This chart displays the top 10 most populous countries using vertical bars, with population values from the 2018 estimate in United Nations: World Population Prospects 2017. It uses D3 v5's `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render an SVG bar chart, with custom tick formatting that converts billions to abbreviated labels. The chart demonstrates axis customization by removing gridlines and domain paths, and labels the x-axis "Population." Data is loaded from a CSV file and processed by multiplying population values by 1000.

AAD-W99

96% match

Loading thumbnail…

Fork of 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. The chart customizes D3 axes with a left-aligned y-axis and a bottom x-axis using `d3.axisLeft` and `d3.axisBottom`, while `d3.scaleLinear` and `d3.scaleBand` map populations and country names to SVG rectangles. Data is loaded from a CSV file via `d3.csv`, with populations multiplied by 1000 for accurate scaling.

AApril Fangzhu Guo

96% match

Loading thumbnail…

Fork of Making a Bar Chart

This example displays the top 10 most populous countries as a horizontal bar chart, using population estimates from the 2018 United Nations World Population Prospects data. The chart emphasizes population size through bar length, with a formatted x-axis that abbreviates large numbers using the `d3.format` API. Built with D3 v5, it leverages `d3.csv`, `d3.scaleLinear`, `d3.scaleBand`, and D3’s axis components (`d3.axisLeft`, `d3.axisBottom`) to render SVG bars and gridlines. The visualization also customizes axis ticks and removes default domain lines for a cleaner presentation.

RRohit-2710

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

96% match

Loading thumbnail…

Fork of Making a Bar Chart

This bar chart displays the top 10 most populous countries using 2018 population estimates from the United Nations World Population Prospects, with values multiplied by 1,000 for accuracy. It demonstrates customization of D3 axes, including a horizontal linear scale with tick formatting that converts abbreviations (e.g., "G" to "B") and a vertical band scale for country names. The SVG rendering uses d3.csv, scaleLinear, scaleBand, axisBottom, and axisLeft. The chart includes a title, labeled x-axis, and gridlines created via tickSize, while gridlines and axis domains are selectively removed for a cleaner look.

DDanny Stephens

96% match

Loading thumbnail…

Fork of Making a Bar Chart

This bar chart visualizes the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects 2017, with population values scaled by 1,000. The chart orders countries by population, displaying each bar’s length proportionally to its population via d3.scaleLinear and d3.scaleBand for categorical y-axis positioning. Axes are customized with d3.axisLeft and d3.axisBottom, including a tick formatter that converts G to B for billions, and a title and axis label are added as SVG text elements. The visualization is rendered in SVG using d3.csv for data loading and d3.select to manipulate the DOM.

MMillie

96% match