Fork of Pathetic Bar Chart

100%

Fork of Pathetic Bar Chart

✓ Published0🌍 Public

Last edited Apr 10, 2021

Created on Apr 10, 2021

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.

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 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 presents the top 10 most populous countries as a bar chart with no axes, rendering bars as plain rectangles. Built with React and D3 v5, it loads population data from the United Nations World Population Prospects 2019 via `d3.csv`, scales the bar widths with `scaleLinear` and positions them with `scaleBand`. The SVG output uses React state and hooks to fetch and display the data, with a red grid line attempted inside the tick mapping.

EEdgar Alves

97% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example visualizes the top 10 most populous countries as a bar chart without axes or labels, rendering each country as a horizontal rectangle scaled by its 2020 population. Built with React and D3 v5, it uses `d3.csv` to load United Nations World Population Prospects 2019 data, then applies `scaleBand` and `scaleLinear` to map countries and population values to screen coordinates. The visualization displays rectangles in an SVG container, with the loading state shown as plain text until data arrives.

RReymond Mesuga

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 or labels, rendered as SVG rectangles. The React component fetches United Nations World Population Prospects 2019 data via d3.csv, then uses d3.scaleBand for the y-axis positioning and d3.scaleLinear with d3.max to map population values to bar widths. The visualization relies on React hooks—useState and useEffect—to load and slice the data, while d3.v5 and React 16.9 render the chart through ReactDOM.

JJean David

96% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as colored rectangles, with bar width proportional to population and no axes or labels. Built with React and D3 v5, it uses `d3.csv` to load UN World Population Prospects 2019 data, then `scaleBand` for the vertical country positions and `scaleLinear` for horizontal bar lengths. The visualization renders as SVG, updating from a loading state to the final chart once data arrives.

Ffaizalmunna

96% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example visualizes the ten most populous countries as a minimalist bar chart with no axes, using rectangles whose widths encode population values. The chart is built with React and D3 v5, where `d3.csv` loads United Nations World Population Prospects 2019 data, `scaleBand` positions countries vertically, and `scaleLinear` maps population to horizontal bar lengths. Each bar is rendered as an SVG `<rect>` inside a React component, with state managing the asynchronous data loading. The visualization intentionally omits labels and gridlines, emphasizing raw proportional differences between countries.

JJohn Vance

96% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example shows the top 10 most populous countries as a bare bar chart with no axes or labels, using rectangles whose widths encode population. The visualization fetches data from the United Nations World Population Prospects 2019 CSV, then sorts and slices it to the first ten rows inside a React component. It uses d3.csv for loading, d3.scaleBand for the vertical country positioning, and d3.scaleLinear for the horizontal population values, rendering the output as SVG via React elements.

Aanandbabu-k

96% match

Loading thumbnail…

Fork of Pathetic Bar Chart

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.

YYing-Liu21

96% match