Making a bar chart

100%

Making a bar chart

✓ Published1🌍 Public

Last edited Nov 24, 2020

Created on Nov 24, 2020

A horizontal bar chart ranks the ten most populous countries using 2018 estimates from the World Population Prospects 2017 data. The visualization maps population values to bar widths via d3.scaleLinear and country names to vertical positions via d3.scaleBand, with axes generated by d3.axisLeft and d3.axisBottom. Rectangles are appended to an SVG group, and the population data is loaded from a CSV file and converted to thousands.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

This bar chart shows population of the top 10 most populous countries. The data comes from the year 2018 estimate in [world population prospects 2017]

MIT Licensed

Similar vizzes

Loading thumbnail…

Making a bar chart

A horizontal bar chart displays the populations of the ten most populous countries using 2018 estimates from the World Population Prospects 2017 dataset. The chart uses D3 v5’s `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to load data and render SVG axes and rectangles. Population values are converted from thousands and scaled to bar widths, with country names positioned on the y-axis.

CConnor Bailey

94% match

Loading thumbnail…

Making a Bar Chart

A horizontal bar chart ranks the ten most populous countries, with populations derived from the 2018 United Nations World Population Prospects estimate. The chart uses an SVG rendering with d3.scaleLinear for the quantitative x-axis and d3.scaleBand for the categorical y-axis, populated via d3.csv. Axes are generated with d3.axisLeft and d3.axisBottom, while d3.max computes the domain. The data file is loaded asynchronously, with population values converted from thousands to full numbers before rendering.

JJenniferFernald

94% match

Loading thumbnail…

Making a Bar Chart

This bar chart displays the population of the top 10 most populous countries, based on 2018 estimates from World Population Prospects 2017. The visualization uses d3.scaleLinear and d3.scaleBand to map population values and country names to positions, with axes rendered via d3.axisLeft and d3.axisBottom. Population values are loaded from a CSV file using d3.csv and formatted with d3.format. The chart is drawn as SVG rectangles inside a fixed-width container, with a custom title and axis label included.

Oovalli

94% match

Loading thumbnail…

Making a Bar Chart

This example shows a horizontal bar chart ranking the top 10 most populous countries based on 2018 estimates from the United Nations World Population Prospects. It uses D3 v5 (d3.scaleLinear, d3.scaleBand, d3.axisLeft, d3.axisBottom) to map population values to bar lengths and country names to y-axis positions. The chart customizes axes by removing domain lines and tick marks, and formats tick labels with a custom function replacing 'G' (giga) with 'B' (billion). Population data is read from a CSV file and multiplied by 1000 before rendering as SVG rectangles.

KKevinw97

93% match

Loading thumbnail…

Making a Bar Chart

A horizontal bar chart displays the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects 2017. The chart uses D3 v5’s `scaleLinear` and `scaleBand` to map population and country names, with `axisBottom` and `axisLeft` for customized axes. Population values are formatted with `d3.format`, and the SVG bars are rendered from a CSV file.

TTomisin Owolabi

93% match

Loading thumbnail…

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. The visualization encodes country names on the y-axis with d3.scaleBand and population values on the x-axis with d3.scaleLinear, rendering rectangular bars as SVG elements. The code loads data from a CSV file, converts populations to absolute numbers, and generates axes using d3.axisLeft and d3.axisBottom. Bars are filled with a steelblue color via CSS, and the chart includes margins for clear label placement.

Yyejichun@naver.com

93% match

Loading thumbnail…

Making a Bar Chart

This bar chart displays the population of the top 10 most populous countries, using 2018 estimates from World Population Prospects 2017. The chart renders horizontal bars with d3.scaleLinear and d3.scaleBand, and axes via d3.axisLeft and d3.axisBottom in an SVG. Data is loaded from a CSV with d3.csv.

Iilsan142

93% match

Loading thumbnail…

Making a Bar Chart

This example shows a bar chart of the top 10 most populous countries, based on 2019 estimates from World Population Prospects. The chart uses a vertical layout with country names on the y-axis and population values on the x-axis. The code builds the visualization with D3 v5, using `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, and `d3.axisBottom` to render an SVG. Population data is loaded as CSV and scaled to thousands; bars are drawn as `rect` elements with a steelblue fill.

GGeolffrey S Mena

93% match