Fork bar chart with axis

100%

Fork bar chart with axis

✓ Published1🌍 Public

Last edited May 22, 2021

Created on May 22, 2021

This fork bar chart displays population data for 15 countries from the United Nations World Population Prospects 2019, using horizontal bars ranked by value against a linear scale. The visualization is built with React and d3-v5, leveraging `scaleBand` for the categorical y-axis, `scaleLinear` for the numerical x-axis, and SVG rectangles to encode population sizes. Data is loaded via d3’s `csv` method, and the chart includes a loading state rendered as text before the data arrives.

AI-generated description

Adding axis

Data: United Nations World Population Prospects 2019.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Bar chart

This horizontal bar chart displays the populations of 20 countries in 2020, using United Nations population data. The chart is built with React and D3 v7, where each country’s population is represented by an orange horizontal bar, sorted from largest to smallest. The visualization uses D3’s `scaleBand` and `scaleLinear` to map categorical and numerical data, with SVG `rect` elements for bars and custom axis components. Populations are shown in billions using D3’s `format` function, and tooltips display precise values via SVG `<title>` elements.

MMatias Conde

91% match

Loading thumbnail…

Fork of Bar Chart

This example shows the ten most populous countries as horizontal bars, with population values scaled along the x-axis and country names labeled on the y-axis. The visualization uses React components to render SVG elements, with d3.scaleBand and d3.scaleLinear for positioning and sizing, and d3.format to abbreviate axis tick labels. Data comes from the United Nations World Population Prospects 2019 dataset, loaded via d3.csv, and the chart includes a "Population" axis label but omits a y-axis title.

Ffaik.binaj@gis-dev.com

90% match

Loading thumbnail…

Fork of reformat Bar chart (access data)

This example presents a horizontal bar chart of the top 15 countries by 2020 population, sourced from the United Nations World Population Prospects 2019. A React component renders SVG rectangles for each bar, using D3’s `scaleBand` and `scaleLinear` for the y- and x-axes, respectively. The chart includes labeled axes generated by custom `AxisBottom` and `AxisLeft` components, with tick marks and text positioned via D3’s scale methods.

JJean David

89% match

Loading thumbnail…

Fork of Bar Chart

This fork renders the top 10 most populous countries from the United Nations World Population Prospects 2019 dataset as a bare SVG bar chart with no axes or labels. The React app uses d3.csv to load the data, d3.scaleBand for the y-axis category positions, and d3.scaleLinear for the x-axis bar lengths based on the 2020 population column. The chart displays only the rectangles, omitting all chart furniture for a minimal presentation.

Rrmgoldberg24

89% match

Loading thumbnail…

Fork of Axes with React & D3

A horizontal bar chart displays the top 10 most populous countries from the UN World Population Prospects 2019 dataset. The chart renders as an SVG using React components, with each bar’s length proportional to the 2020 population estimate. D3’s `scaleBand` and `scaleLinear` APIs position the categorical country labels and numeric population axis, respectively, while `.ticks()` generates gridlines and tick labels. A loading state is shown from React’s `useEffect` until data is fetched via D3’s `csv` parser.

TTheAnswer-Is-42

89% match

Loading thumbnail…

Fork of Axes with React & D3

This example displays a horizontal bar chart of the top 10 most populous countries for 2020, with population values from the United Nations World Population Prospects 2019 dataset. The chart includes labeled axes: the y-axis shows country names using a band scale, while the x-axis shows population ticks with grid lines. Built with React hooks and D3 v5, the code uses `scaleBand`, `scaleLinear`, and `csv` to fetch and scale the data. The bars and axes are rendered as SVG elements, with tick generation handled through `xScale.ticks()`.

JJean David

89% match

Loading thumbnail…

Fork of Fork of Stylized Bar Chart

This example shows the ten most populous countries in 2020 as a horizontal bar chart, with country names on the y-axis and population counts (in billions) on the x-axis. Built with React and D3 v5, it uses `d3.scaleBand` and `d3.scaleLinear` to map data from the United Nations World Population Prospects 2019 dataset. SVG rectangles render each bar, with axes generated via `xScale.ticks()` and tooltips provided by SVG `<title>` elements.

EEmma kim

88% match

Loading thumbnail…

Fork of Fork of Stylized Bar Chart

A stylized horizontal bar chart displays the top 10 most populous countries, with bars representing population values. The visualization uses React with D3.js (v5) APIs such as `scaleBand`, `scaleLinear`, and `format` to compute scales and tick labels. SVGs are rendered through React components, with data loaded from the UN World Population Prospects 2019 CSV. The chart includes labeled axes, a Poppins font, and tooltips showing formatted population values.

Ssnehareddygurram

88% match