Fork of Pathetic Bar Chart

100%

Fork of Pathetic Bar Chart

✓ Published0🌍 Public

Last edited Apr 14, 2021

Created on Apr 14, 2021

This example displays the top 10 most populous countries as a bar chart stripped of all axes and labels, emphasizing raw bar lengths over context. Built with React and D3, it loads United Nations World Population Prospects 2019 data via `d3.csv`, converts the “2020” population field to numbers, and slices the dataset to the first ten rows. Each bar is an SVG rectangle positioned with `d3.scaleBand` for the y-axis and sized using `d3.scaleLinear` and `d3.max` for the x-axis, all within a fixed 960×500 viewport.

AI-generated description

A program that shows the top 10 most populous countries as a pathetic bar chart with no axes.

Data: United Nations World Population Prospects 2019.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as horizontal bars with no axes, making the ranking immediately visible through bar lengths. Built with React and D3 v5, it loads United Nations World Population Prospects 2019 data via `d3.csv`, parses the 2020 population column, and slices the first 10 rows. The SVG rendering uses `d3.scaleBand` for the y-axis country positions and `d3.scaleLinear` for the x-axis population widths, with each bar drawn as a `<rect>` element.

AAbin

98% match

Loading thumbnail…

Fork of Pathetic Bar Chart

AAbin

98% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as a rudimentary bar chart with no axes, using a React component and SVG rendering. It loads United Nations World Population Prospects 2019 data from a CSV via `d3.csv`, slices the first ten rows, and maps populations for 2020 to rectangle widths using `d3.scaleLinear`, while `d3.scaleBand` positions each country vertically. The chart omits axis labels and titles, presenting only the bars against a blank canvas.

KKuladeep

97% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as a set of horizontal bars without axes or labels, emphasizing raw bar lengths. The visualization uses React with hooks to fetch and parse United Nations World Population Prospects 2019 data via d3.csv, slicing the first 10 records. It renders SVG rectangles, positioning them with d3.scaleBand for the categorical country axis and sizing widths with d3.scaleLinear for population values. The code includes grid lines with tick marks from xScale.ticks(), though tick text is positioned incorrectly, and the chart shows only the bars and gridlines.

UUtsav Khatu

97% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as a bare bar chart with no axes, using rectangular bars whose widths encode each country’s 2020 population. It loads data from the UN World Population Prospects 2019 via `d3.csv` and sorts the first ten rows. The visualization uses React’s `useState` and `useEffect` to fetch and store data, then renders SVG rectangles positioned with `d3.scaleBand` on the y-axis and scaled with `d3.scaleLinear` based on the maximum population. The chart lacks labels, tick marks, or any annotation, emphasizing its intentionally minimal design.

KKNJour

97% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example shows the top 10 most populous countries as a bar chart with no axes, labels, or other context. It fetches United Nations World Population Prospects 2019 data from a GitHub gist via `d3.csv`, then sorts and slices the first ten rows. Using `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis, it renders SVG `<rect>` elements inside a React component. The bars use `yScale.bandwidth()` for height and `xScale(d.Population)` for width, with React `useState` and `useEffect` managing the asynchronous data loading.

Aavgoust

97% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as ranked bars, with no axes or labels, using a minimal bar chart layout. It loads United Nations World Population Prospects 2019 data via `d3.csv`, then sorts and slices the first ten rows. React state management (`useState`, `useEffect`) handles the asynchronous data fetch, while `d3.scaleBand` and `d3.scaleLinear` map countries and population values to SVG rectangles. The visualization renders in SVG, with bar widths proportional to 2020 population estimates.

Aanindyamehta@gmail.com

96% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays a bar chart of the top 10 most populous countries, using raw rectangles with no axes or labels. Built with React and D3 v5, it loads population data from the United Nations World Population Prospects 2019 via `d3.csv`, sorts the first ten rows, and maps values using `scaleBand` and `scaleLinear`. The visualization renders as SVG, with bar widths proportional to 2020 population estimates, though the geometric primitives are intentionally left bare.

JJean David

96% match