Skip to main content
SimilarExport ZIP
100%

Disappointing bar chart

✓ Published1🌍 Public
Rrvdv
Last edited Dec 22, 2021
Created on Dec 22, 2021

This bar chart displays the populations of 20 countries using data from the UN Population 2019 CSV. The visualization encodes values horizontally with SVG rectangles, where the x-axis uses a d3.scaleLinear and the y-axis uses a d3.scaleBand. Data is loaded via d3.csv, and the chart is rendered through React components managing state with useState and useEffect. The example uses React 17, D3 v7, and SVG rendering.

AI-generated description

https://www.youtube.com/watch?v=2LhoCfjm8R4&t=10638s

MIT Licensed

Similar vizzes

Loading thumbnail…

Pathetic bar chart

This example shows a horizontal bar chart displaying the populations of the ten most populous countries, using data from the UN Population 2019 CSV file. The bars are rendered as SVG rectangles via React, with the d3.csv function loading the data and d3.scaleBand and d3.scaleLinear mapping country names to vertical positions and population values to horizontal bar widths, respectively. The chart appears sparse, with only bars and no axes or labels, which highlights the raw data in a minimal layout.

TTsaikkari
88% match
Loading thumbnail…

Pathetic Bar Chart V0

The example shows the 20 most populous countries in 2020 as horizontal bars, sorted by population with country labels on the y-axis. It loads CSV data from a GitHub-hosted UN Population dataset using D3’s `csv` utility, then renders SVG rectangles via React. The bar widths are scaled with `d3.scaleLinear` and the y-axis positions with `d3.scaleBand`, with margins applied via an SVG transform.

Mmarouan-ben
87% match
Loading thumbnail…

UN Population Data

A horizontal bar chart displays the populations of ten countries in 2020, sourced from UN data loaded via a CSV file. The visualization uses React to render SVG elements, with D3 v6 scales (scaleBand and scaleLinear) positioning bars and axes. Custom React components handle the axes and bars, with native SVG `<title>` elements providing tooltips. Population values are formatted using D3's `format` function, converting values like billions into abbreviated labels.

LLaura Johnson
87% match
Loading thumbnail…

Pathetic Bar Chart

This bar chart displays the ten most populous countries in 2020 using UN population data. The visualization loads the CSV dataset with D3’s `csv` utility and renders horizontal bars through React components in SVG. D3’s `scaleBand` and `scaleLinear` map country names to vertical positions and population values to bar widths, while React’s `useState` and `useEffect` hooks manage data fetching and component state.

WWilliam Couturiaux
87% match
Loading thumbnail…

dv2020-ep21-viz20 - bar chart

A horizontal bar chart displays the 20 most populous countries in 2020, ranked in descending order by population. The visualization uses React to render SVG rectangles, with D3's `scaleBand` and `scaleLinear` mapping country names to y-coordinates and population values to bar widths. Data comes from the UN World Population Prospects 2019, loaded via D3's `csv` parser and sorted with `d3.descending`. The chart updates dynamically as React re-renders when the asynchronous data fetch completes.

Zzach b.
87% match
Loading thumbnail…

Pathetic Bar Chart

This example presents a bar chart of the ten most populous countries in 2020, sourced from a UN population dataset loaded via D3’s `csv` utility. The visualization uses React state to hold the parsed data, and D3’s `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, which map country names and population values to SVG rectangles. The chart renders within an SVG element, with each bar’s width proportional to its population, while the interface displays a loading message until the data arrives.

NNigel
87% match
Loading thumbnail…

Pathetic Bar Chart

This bar chart visualizes the top 10 most populous countries in 2020 using data from the UN Population 2019 dataset. A horizontal bar encodes each country’s population with a rectangle, positioned along a band scale and scaled by a linear scale from D3. The React app loads the CSV via `d3.csv`, stores it in state with `useState`, and renders the SVG bars through React’s DOM. Once loaded, the chart appears, replacing an initial “Loading…” text.

AAnthonyAl-Rifai
87% match
Loading thumbnail…

dv.21 - basic bar chart

This example displays the top 20 most populous countries as horizontal bars, ranked by their 2020 population estimates from the United Nations World Population Prospects 2019 dataset. It renders an SVG bar chart using React for component structure and d3.scaleBand for the categorical y-axis, d3.scaleLinear for the numeric x-axis, and d3.csv for data loading. The chart intentionally has no axes or labels, using only rectangles whose widths encode population values.

Zzach b.
86% match