scaling bar chart

100%

scaling bar chart

✓ Published1🌍 Public

Last edited Feb 3, 2022

Created on Feb 3, 2022

This visualization shows the populations of the top 10 most populous countries using a horizontal bar chart, with each bar’s length representing the population value from the United Nations 2018 estimate. The chart is rendered as an SVG within a React app, and the code uses `scaleBand` for the categorical country axis and `scaleLinear` for the quantitative population axis. The D3 `max` function sets the domain for the linear scale, while the `bandwidth()` method determines each bar’s height. Data is loaded from a CSV file via the `csv` function, and the bars are drawn as SVG `rect` elements.

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.

See also the first bar chart visualization that this one builds on: Making a Bar Chart.

MIT Licensed

Similar vizzes

Loading thumbnail…

Bar Chart

This bar chart displays the top 10 most populous countries based on 2020 UN Population data, with horizontal bars showing each country’s population count. The visualization uses React with D3 v5’s `scaleBand` and `scaleLinear` to map country names and population values to screen coordinates. SVG `<rect>` elements render the bars, while custom axis components generate tick marks and labels using D3’s `ticks()` and `format()` APIs, with population values formatted using the SI prefix format (e.g., “1.4B”).

Nnghosh319

91% match

Loading thumbnail…

barChart

This example displays the top 10 most populous countries as horizontal bars, with no axes or labels to guide interpretation. The chart uses React to manage state and render SVG rectangles, while D3’s `scaleBand` and `scaleLinear` map country names to vertical positions and population values to bar widths, respectively. Data comes from the United Nations World Population Prospects 2019 dataset, loaded via D3’s `csv` function and filtered to the first ten rows. The visualization intentionally omits scales, leaving the raw bars to convey relative sizes.

RRahul Gupta

91% match

Loading thumbnail…

Bar Chart

This visualization displays the top 10 most populous countries using horizontal bars, with country names on the y-axis and population values on the x-axis. It is built with React and D3 v5, using `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, rendering as SVG. Population data comes from the United Nations World Population Prospects 2020, loaded via `d3.csv`, with tooltips showing formatted values. The chart includes styled axes and labels, with a teal fill for each bar.

Hhariveda-git

90% match

Loading thumbnail…

Refactored Bar Chart

This visualization displays the top 10 most populous countries as horizontal bars, with the bar length proportional to each country’s 2020 population estimate. Axes are included: a bottom linear scale for population values and a left band scale for country names. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` for scaling, `csv` for data loading from the UN World Population Prospects 2019, and renders the chart as SVG with custom axis and mark components.

Yyuzhang21

90% match

Loading thumbnail…

UN Population Bar Chart

This visualization displays the top 10 most populous countries in 2020 as horizontal bars, with bar length proportional to population. The React component loads the UN population dataset via d3.csv, then renders an SVG using scaleBand for the categorical country axis and scaleLinear for the population values. The chart fills the entire browser window (width and height set to window dimensions) and updates only after the data loads, initially showing a large “Loading…” message. The code uses React hooks (useState, useEffect) to manage the asynchronous data fetching and D3’s scale functions for mapping data to pixel coordinates.

JJohn Lewis

90% match

Loading thumbnail…

bar_chart

This example shows a horizontal bar chart displaying the top 10 countries by population in 2020, based on data from a UN population CSV file. The chart uses React with hooks to load and process the data, and renders bars as SVG rectangles scaled with D3’s `scaleLinear` and `scaleBand`. Axis ticks are drawn using D3’s `ticks()` method, and both countries and population values are labeled directly within the visualization. The bars are vertically centered on each band using the scale’s `bandwidth()` function.

Ssagar limbu

90% match

Loading thumbnail…

Bar Chart

This example visualizes the top 10 most populous countries as horizontal bars using React and D3 v5. The chart lacks axes, displaying only labeled bars with lengths proportional to each country’s 2020 population estimate. Data comes from the United Nations World Population Prospects 2019 CSV file, loaded via `d3.csv`. The code uses `d3.scaleBand` for vertical positioning, `d3.scaleLinear` for bar widths, and renders SVG elements within a React component using hooks.

YYohR

90% match

Loading thumbnail…

Horizontal Bar Graph

This horizontal bar graph displays the 10 most populous countries in 2020, ranked by population size. Built with React and D3 v5, the visualization uses `scaleBand` and `scaleLinear` to map country names and population values to SVG rectangles. The data comes from a CSV file of UN Population 2019 estimates, loaded via D3's `csv` function. Each bar includes a tooltip showing the formatted population value, with axes rendered through custom `AxisBottom` and `AxisLeft` components using D3 tick formatting.

KKevin J Crespin

90% match