Fork of Bar chart

100%

Fork of Bar chart

✓ Published0🌍 Public

Last edited Oct 3, 2023

Created on Oct 3, 2023

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.

AI-generated description

A bar chart with United Nation data

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork bar chart with axis

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.

JJean David

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

90% match

Loading thumbnail…

Fork of Stylized Bar Chart

This example presents a horizontal bar chart of the ten most populous countries, using data from the United Nations World Population Prospects 2019. The chart encodes each country’s 2020 population as a teal bar, with country names on the y-axis and population values on the x-axis. Built with React and d3.scaleBand and d3.scaleLinear, it renders SVG rectangles for each bar and includes a tooltip showing the exact population value. The axes are composed of lightweight components that map scales to tick lines and labels.

Aashershah

90% match

Loading thumbnail…

Fork of Refactored Bar Chart

This example presents a horizontal bar chart ranking the ten most populous countries for 2020, using data from the United Nations World Population Prospects 2019. The visualization renders SVG bars with scales and axes, displaying population values in billions. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` for positioning, along with custom axis components that generate ticks and labels. The code also includes an axis label for “Population” and a tooltip formatting function that converts large numbers into concise notation.

SSergey Shulzhenko

90% match

Loading thumbnail…

Fork of Stylized Bar Chart

This example displays a horizontal bar chart of United Nations population data for ten countries, ranking them by 2020 estimated population. The visualization uses React components to render SVG marks and axes, with D3 v5 utilities like `scaleBand`, `scaleLinear`, and `csv` handling data loading and scaling. Population values are formatted using D3’s `format` function, and hover tooltips appear via SVG `<title>` elements. The chart features a clean design with styled tick lines, a Poppins font, and teal-colored bars.

TtrwMK

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

89% match

Loading thumbnail…

Fork of bar chart laboratorio 4

This visualization displays the top 10 countries by population in 2020 using horizontal bars. Built with React and D3 v6, it renders SVG rectangles whose lengths correspond to population values. The chart uses D3’s scaleBand and scaleLinear for axes, formats tick labels with the D3 format function, and loads UN population data from a CSV file. Tooltips on each bar reveal the exact population when hovered.

Llimeroc

89% match