Making a barchart

100%

Making a barchart

✓ Published1🌍 Public

Last edited Nov 10, 2020

Created on Nov 2, 2020

Forked from Let's make a face with D3.js!

This bar chart displays the population of the ten most populous countries based on 2018 estimates from the World Population Prospects 2017 dataset. The SVG visualization uses d3.csv to load and parse the data, d3.scaleLinear for the population axis, and d3.scaleBand for the categorical country axis. Horizontal bars are rendered as SVG rectangles, with axes generated using d3.axisBottom and d3.axisLeft. d3.max determines the domain, while margin conventions and padding control layout and bar spacing.

AI-generated description

This barchart shows the 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 Barchart

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 uses D3 v5’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to map population values to bar widths and country names to vertical positions, with axes customized via CSS. Data is loaded from a local CSV file and rendered as SVG rectangles, with a margin-based layout separating the plot from the axes.

Ooceanecharlery

92% match

Loading thumbnail…

Making a bar chart

This bar chart displays the population of the ten most populous countries, using 2018 estimates from the United Nations World Population Prospects 2017. Rendered as SVG, the visualization encodes population on a linear x-axis and country on a categorical y-axis. The code leverages D3.js v5 APIs including `select`, `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to load the data, compute scales, and draw axes. Bars are appended as `rect` elements, and the data is preprocessed by multiplying the population values by 1000.

Ddtdenver

92% match

Loading thumbnail…

Making bar chart

This bar chart displays the population of the ten most populous countries, based on 2018 estimates from the United Nations World Population Prospects 2017. The code uses d3.csv to load the data, then applies d3.scaleLinear and d3.scaleBand to map population and country names to the SVG canvas. Axes are rendered with d3.axisLeft and d3.axisBottom, while rectangular bars are appended and styled with a steelblue fill.

PPragati Porwal

91% 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 the World Population Prospects 2017. The visualization uses an SVG rendering with D3 v5, employing `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the y-axis, along with `d3.axisLeft` and `d3.axisBottom` to render the axes. Data is loaded from a CSV file using `d3.csv` and displayed as steel-blue rectangles.

MMichał Szumnarski

91% match

Loading thumbnail…

Making a Bar Chart

MMichał Szumnarski

91% match

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

91% match

Loading thumbnail…

Making a Bar Chart

This bar chart displays the populations of the ten most populous countries, using 2018 estimates from the United Nations World Population Prospects 2017. The data is loaded from a CSV file and rendered as SVG rectangles. The code uses d3.csv, d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom to map population values to bar widths and country names to vertical bands. Each rectangle’s width corresponds to the population, with values scaled in thousands as specified in the dataset.

Ssamatha516

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

91% match