Fork of Making a Bar Chart

100%

Fork of Making a Bar Chart

✓ Published0🌍 Public

Last edited Jan 4, 2021

Created on Jan 4, 2021

This fork of a D3 bar chart displays the top 10 most populous countries based on 2018 United Nations estimates. Using D3 v5, the SVG visualization customizes both axes: the left axis labels are stripped of their domain line, while the bottom axis uses a `.3s` format that converts billions (G) to billions (B). The chart also removes the x-axis domain line and adds custom axis and title labels. Data is loaded from a CSV file and population values are multiplied by 1000.

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 bar chart displays the top 10 most populous countries based on 2018 United Nations estimates, with population values in thousands. The visualization uses D3 v5’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render the SVG bars, while a custom tick formatter converts large numbers to readable abbreviations like “B” for billions. Axis labels and a title are added manually, and gridlines are drawn via `tickSize(-innerHeight)`. Data is loaded from a local CSV file, with the population column multiplied by 1000 during preprocessing.

Nnathan@shieldsonline.org

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

95% match

Loading thumbnail…

Fork of Making a Bar Chart

This bar chart displays the top 10 most populous countries based on 2018 United Nations estimates, with population values scaled in thousands. Using D3 v5, the visualization employs `scaleLinear` and `scaleBand` to map population counts and country names, while `axisBottom` and `axisLeft` render formatted axes with a custom tick format that converts large numbers to abbreviated units. The SVG rendering includes gridlines, a title, and an axis label, with horizontal bars styled in steel blue.

Sskambhore04

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

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

94% match

Loading thumbnail…

Fork of Making a Bar Chart

This bar chart displays the top 10 most populous countries based on 2018 United Nations population estimates, with values converted from thousands to absolute numbers. The visualization uses D3 v5’s `scaleLinear` for the x-axis, `scaleBand` for categorical country labels, and custom axis formatting via `format('.3s')` to abbreviate large numbers. Grid lines are generated with `tickSize(-innerHeight)`, while axis labels and a title are added directly to the SVG. Data loads asynchronously from a CSV file using `d3.csv`.

CComplicated Phenomenon

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

94% match

Loading thumbnail…

Fork of Making a Bar Chart

This bar chart displays the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. It uses D3 v5 with an SVG renderer to draw horizontal bars, a linear scale for population, and a band scale for country names. The axes are customized with tick formatting that abbreviates large numbers, and gridlines are drawn via the x-axis. Data is loaded from a CSV file using the `d3.csv` method, with population values multiplied by 1000 for display.

AAnthony Zornig

94% match