Bar chars with d3.js

100%

Bar chars with d3.js

✓ Published1🌍 Public

Last edited Oct 4, 2021

Created on Oct 4, 2021

This bar chart displays the populations of sub-Saharan African countries in 1950, based on data from the United Nations World Population Prospects 2017. Each bar’s length is proportional to population in thousands, with country names listed along the vertical axis. The visualization is rendered as an SVG using d3.v5, leveraging `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisLeft` and `axisBottom` for gridlines. Data is loaded from a CSV file and processed with the `csv` method.

AI-generated description

This data shows the sub saharan population in the year 1950. The data comes from the year 2018 prospects United Nations: World population prospects 2017

MIT Licensed

Similar vizzes

Loading thumbnail…

Customizing axes

This bar chart displays the population of Sub-Saharan African countries in 1950, using data from the United Nations World Population Prospects 2017. The visualization customizes both axes: the y-axis removes its domain and tick lines for a cleaner look, while the x-axis formats population values with d3’s `format('.3s')` and adds negative tick sizes to create gridlines. Built with d3.scaleBand and d3.scaleLinear, the chart renders as SVG rectangles with a steelblue fill and includes a title and axis label.

MMuiruriscode

88% match

Loading thumbnail…

Bar chart

This bar chart displays the populations of African countries, with each bar’s length proportional to population in thousands. It uses D3 v5’s `csv` loader to parse the data, `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisLeft`/`axisBottom` for ticks, rendering all marks as SVG `<rect>` elements.

Jjeronimoek

87% match

Loading thumbnail…

African Populations

This horizontal bar chart displays the population of African countries in 2019, sorted by country name. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear` for the x-axis and `scaleBand` for the y-axis. Population values from the United Nations World Population Prospects are loaded via `csv` and formatted with `format('.3s')`, replacing 'G' with 'B' for billions. The chart includes axis labels, gridlines, and a title, with bars filled in steelblue.

Ggabcoderboi

86% match

Loading thumbnail…

Making a bar chart

This horizontal bar chart displays population figures for African regions, using bars scaled by population size. Built with D3 v5, it employs `scaleLinear` for the x-axis, `scaleBand` for the categorical y-axis, and `axisBottom` and `axisLeft` to render axes. Data is loaded from a CSV file via `csv`, and the SVG output is styled with steelblue bars and custom tick labels. The chart includes axis labels and a title, with margins calculated from the SVG’s width and height.

HHelenaShu

82% match

Loading thumbnail…

Making a bar chart

This bar chart displays population counts for North African countries using horizontal bars. The chart loads data from a CSV file, cleans the population values by removing spaces and multiplying by 1000, then renders SVG rectangles. It uses d3.csv for data loading, d3.scaleLinear for the x-axis population scale, and d3.scaleBand for the categorical y-axis positioning of countries. The bar widths correspond to population values, with each bar’s height set by the band scale’s bandwidth.

AAloha1403

81% match

Loading thumbnail…

BarChart with D3.js

This bar chart displays the populations of the 19 most populated countries, using data from UN 2020 estimates. The horizontal bars are sorted by country name, with each bar’s length proportional to its population. The visualization is built with D3 v5, using `scaleLinear` and `scaleBand` to map values, and `axisLeft` and `axisBottom` for the axes. Data is loaded from a CSV file and rendered as SVG rectangles with a green fill.

TTebid Quinsy

80% match

Loading thumbnail…

Making a bar chart

This example shows a horizontal bar chart of population figures for regions in Africa. It uses D3 v5 to load the CSV data and render SVG rectangles, with a linear scale for population values and a band scale for country names. Axes are generated using `axisLeft` and `axisBottom`, and a margin-based layout positions the chart within the SVG canvas. The bars are styled with a steelblue fill via CSS.

HHelenaShu

80% match

Loading thumbnail…

Making a Bar Chart

A bar chart displays the population of ten countries using 2018 data from the United Nations World Population Prospects. The visualization loads a CSV file with population values and maps them to horizontal bars, with country names on the y-axis and population counts on the x-axis. Using D3 v5, the code employs `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the SVG chart, while `csv` loads the data and `max` determines the scale domain. The bars are rendered as SVG rectangles with steelblue fill.

BBossmaen

80% match