Skip to main content
SimilarExport ZIP
100%

Making a Bar Chart!

✓ Published0🌍 Public
YYasser Mohseni
Last edited Dec 28, 2020
Created on Dec 28, 2020

This example shows a bar chart of the population of ten countries, with labeled values on the x-axis and country names on the y-axis, rendered as SVG rectangles. Using D3 v5, the code loads data from the UN World Population 2017 dataset and applies a linear scale for population counts and a band scale for categorical countries. The chart draws its axes via `axisLeft` and `axisBottom`, and populates the graphic with a data join that appends `rect` elements.

AI-generated description

This data comes from UN World Population 2017

MIT Licensed

Similar vizzes

Loading thumbnail…

Making a Bar Chart

This example shows a horizontal bar chart of the ten most populous countries using population data from the UN, with each bar labeled by country and a formatted x-axis in millions. It renders with SVG, and the code uses D3 v6 APIs including `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`, and `csv` to load and parse the data. The chart includes a title, axis labels, and styled grid lines, with bars filled via CSS. The y-axis is ordered alphabetically by country, and population values are multiplied by 1000 before scaling.

Hhanulik.ondrej@gmail.com
91% match
Loading thumbnail…

Making a Bar Chart

This example uses D3 v5 to render a horizontal bar chart of the top 10 most populous countries, with population values from the 2017 United Nations World Population Prospects (2018 estimates). It employs `scaleLinear` and `scaleBand` for positioning and sizing, and customizes the axes via `axisBottom` with a tick formatter that converts large numbers to billions. The chart’s bars are drawn as SVG rectangles, with axis labels and a title added as text elements.

Ttmrb
90% match
Loading thumbnail…

Making a Bar Chart

This example displays the populations of the ten most populous countries from the 2017 United Nations World Population Prospects, using a horizontal bar chart. It loads data from a CSV file with `d3.csv`, then maps values with `d3.scaleLinear` and `d3.scaleBand`, and renders axes via `d3.axisLeft` and `d3.axisBottom`. Rectangles are appended to an SVG container, with bar widths proportional to population, and the chart refreshes when the data promise resolves.

RRobinson Owino
90% match
Loading thumbnail…

Making a Bar Chart

This example displays the populations of the ten most populous countries in 2018, ordered along a vertical bar chart. It uses D3 v5’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to map population values to horizontal bar widths and country names to vertical bands. The data, sourced from the United Nations’ 2017 World Population Prospects, is loaded via `csv` and rendered as SVG rectangles. The code explicitly multiplies population figures by 1,000 to reflect actual counts.

MMounikaBeerelly
90% match
Loading thumbnail…

Making a Bar Chart

This bar chart displays the population of the ten most populated countries in the world, using data from the UN World Population Prospects. It renders the countries on the y-axis with horizontal bars scaled by population via `d3.scaleLinear` and `d3.scaleBand`. The SVG visualization is built with d3 v5, using `d3.csv` to load the data, `d3.axisLeft` and `d3.axisBottom` for labeling, and includes a steelblue fill for each bar.

MMillie White
90% match
Loading thumbnail…

Making a Bar Chart

This example presents a horizontal bar chart showing the population of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects 2017. It uses D3 v5's `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` APIs to map population values and country names to SVG rectangles. Data is loaded from a CSV file and processed by multiplying the population values by 1000. The chart renders entirely as SVG, with bars styled in steelblue, and the code illustrates a basic data-join and margin setup for reusable visualization.

Vvoiletymr
90% match
Loading thumbnail…

Making a Bar Chart

This bar chart displays the populations of the ten most populous countries, using data from the United Nations World Population Prospects 2017. The chart renders as SVG, with horizontal bars ordered by country name along the y-axis and population counts on the x-axis. The visualization is built with D3 v5, utilizing `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to position the bars and axes. Population values are read from a local CSV file and scaled by a thousand before being mapped to bar widths.

AAnna Lopez
90% match
Loading thumbnail…

Making a Bar Chart

This bar chart visualizes the populations of the ten most populous countries, based on 2018 estimates from the United Nations World Population Prospects. It uses D3 v5 to create an SVG with linear and band scales, displaying horizontal bars labeled by country. The chart’s axes are generated with `axisLeft` and `axisBottom`, while data is loaded from a CSV file and rendered as `rect` elements filled with steelblue, with a title added as a text element.

Mmorjyooo
90% match