Fork of Pathetic Bar Chart

100%

Fork of Pathetic Bar Chart

✓ Published1🌍 Public

Last edited Jul 31, 2025

Created on Jul 31, 2025

This example visualizes the top 10 countries by 2020 population using a horizontal bar chart rendered as SVG. The chart uses a `scaleBand` for country categories on the y-axis and a `scaleLinear` for population magnitudes on the x-axis, with a `rect` per data row. It loads UN population data via `d3.csv` and builds the visualization with React hooks (`useState`, `useEffect`) and D3 v5 scales.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Pathetic Bar Chart

This example shows the top ten countries by 2020 population as horizontal bars, with bar lengths scaled proportionally to population size. The visualization uses React state to manage data loading and rendering, while D3 utilities load the CSV dataset and compute the scales. Specifically, `d3.csv` fetches the UN population data, `scaleBand` positions each country along the y-axis, and `scaleLinear` maps population values to bar widths on the x-axis. The chart renders as SVG rectangles inside a React component, updating once the data arrives and displaying a loading message beforehand.

TTaeyoung Ahn

95% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example visualizes the top 10 most populous countries using a bar chart with no axes, rendered as SVG elements. It loads population data from the United Nations World Population Prospects 2019 dataset via `d3.csv`, then uses React’s `useState` and `useEffect` hooks to fetch and store the data. The chart maps each country to a rectangle, sizing bars with `scaleBand` and `scaleLinear` from d3.v5, while the overall layout is managed through React and ReactDOM.

TTchea JiaWei

95% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as horizontal bars without axes, using a simple SVG rendering. The chart fetches population data from the United Nations World Population Prospects 2019 CSV, extracting the 2020 population values for each country. Built with React, it leverages d3.scaleBand for the y-axis categories and d3.scaleLinear for the x-axis values, mapping each country’s population to bar widths. The bars are drawn as SVG rectangles, with a loading state shown while data loads asynchronously via d3.csv.

SSunbinSong

94% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries in 2020 as a "pathetic" bar chart, with bars extending rightward from the left edge without any axes or labels. Using React with hooks to manage state, the code fetches UN population data via D3’s `csv` loader, sorts by population, and renders SVG rectangles scaled by population using `scaleBand` for the y-axis and `scaleLinear` for the x-axis. The visualization intentionally omits chart furniture, focusing solely on the proportional bar lengths.

Kkaitlin.timmer@gmail.com

94% match

Loading thumbnail…

Fork of Pathetic Bar Chart2

This example displays the top 10 most populous countries as a horizontal bar chart, with no axes or labels, using country names as categorical bands and population counts mapped to bar widths. The code loads UN World Population Prospects 2019 data via `d3.csv`, parses the 2020 population column, and slices the first ten rows. It renders SVG rectangles using React components and D3 scales: `scaleBand` for the y-axis positioning and `scaleLinear` for the x-axis extent, with dimensions fixed at 960 by 500 pixels.

Bbart

94% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example visualizes the top 10 most populous countries as a bar chart, with each bar’s length representing the 2020 population estimate. Drawn using React and D3 v5, the SVG renders rectangles positioned via `scaleBand` along the y-axis and scaled by `scaleLinear` on the x-axis. No axes are drawn; the chart intentionally appears minimal. Data comes from the United Nations World Population Prospects 2019, loaded as CSV and sliced to the first ten rows.

Hharika-1929

94% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as a horizontal bar chart with no axes, using React and D3.v5. Population values from the United Nations World Population Prospects 2019 dataset are loaded via `d3.csv` and rendered as SVG rectangles. The code uses `scaleBand` for the y-axis positioning of country names and `scaleLinear` for bar widths, with bars colored by the default fill. The chart updates asynchronously, showing a loading message until data arrives.

TToooooooT

94% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example shows the top 10 most populous countries as a set of horizontal bars without axes, labels, or scales. It loads population data from the United Nations World Population Prospects 2019 CSV file. The code uses React hooks, including `useState` and `useEffect`, to fetch and store the data, then renders SVG rectangles with D3’s `scaleBand` and `scaleLinear` to position and size each bar based on the country name and 2020 population value.

EEthan Pierce

94% match