Fork of Making a Bar Chart

100%

Fork of Making a Bar Chart

✓ Published0🌍 Public

Last edited Dec 25, 2023

Created on Dec 25, 2023

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.

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 a horizontal bar chart of the top 10 most populous countries, using 2018 population estimates from the United Nations World Population Prospects 2017. It highlights customization of D3 axes, including a formatted x-axis that converts large numbers to abbreviated units like “B” for billions. The chart is rendered in SVG using d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom, with data loaded via d3.csv. The code also removes default axis domains and tick lines for a cleaner appearance.

Ssalim.mir@outlook.com

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

97% match

Loading thumbnail…

Fork of Making a Bar Chart

A horizontal bar chart displays the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. The chart emphasizes customization of D3 axes, removing domain lines and applying a tick formatter that converts values to abbreviated units like "B" for billions. Built with D3 v5, the code uses `d3.csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render SVG rectangles, with labels for the title and x-axis.

SShalin Shah

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

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 displays a horizontal bar chart of the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects 2017. It demonstrates customizations of D3 axes, including tick formatting that converts values to billions and removal of default domain lines. The chart uses d3.csv to load data, d3.scaleLinear and d3.scaleBand for scaling, and d3.axisLeft with d3.axisBottom to render SVG axes. The title and axis label are added as SVG text elements.

Mmicyen

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

MMatthew Rinaldi

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