Fork of Pathetic Bar Chart

100%

Fork of Pathetic Bar Chart

✓ Published0🌍 Public

Last edited Jul 27, 2021

Created on Jul 27, 2021

This example visualizes the top 10 most populous countries as a bar chart, using rectangle widths proportional to each country’s 2020 population estimate from the United Nations World Population Prospects 2019. The chart intentionally omits axes and labels, presenting only bare colored bars against a plain background. Built with React and D3 v5, the code uses `d3.csv` to load the data, `scaleBand` for the vertical positioning of countries, and `scaleLinear` for the horizontal bar lengths. All bars are rendered as SVG `<rect>` elements within a React component, with each bar’s width derived from the maximum population value.

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 visualizes the top 10 most populous countries as a minimal bar chart with no axes, using rectangles sized by each country’s estimated 2020 population from the United Nations World Population Prospects 2019 dataset. The chart loads data via d3.csv, scales the bars with d3.scaleBand and d3.scaleLinear, and renders them as SVG elements within a React component using useState and useEffect. The visualization deliberately omits labels, gridlines, and scales, leaving only the raw bars to emphasize the relative magnitudes.

CCem Onal

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

97% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example visualizes the top 10 most populous countries as a bar chart, with each country’s bar length proportional to its 2020 population from the United Nations World Population Prospects 2019 dataset. The chart uses React with hooks (`useState`, `useEffect`, `useCallback`) to fetch CSV data via `d3.csv`, then renders SVG rectangles positioned using `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis. The visualization intentionally omits axes and labels, making it a "pathetic" bar chart. The code loads React and D3 v5 from CDNs and renders within a fixed 960×500 SVG.

JJohanna Magdalena

97% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This visualization displays the top 10 most populous countries as a bare bar chart with no axes, using rectangular bars proportional to each country’s 2020 population. The chart loads data from the United Nations World Population Prospects 2019 CSV, then uses `d3.csv`, `scaleBand`, `scaleLinear`, and `max` to map country names and population values to SVG rectangles. React manages the component state and rendering, while D3 handles the data processing and scales. The bars render in an SVG canvas with no labels or gridlines, focusing purely on the relative population sizes.

Aavneet12284

97% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as a bar chart with no axes, using population data from the United Nations World Population Prospects 2019. The chart renders with React and D3 v5, where `scaleBand` maps countries to vertical positions and `scaleLinear` maps population values to bar widths. Each bar is drawn as an SVG rectangle within a React component, with data loaded asynchronously via `d3.csv`. The visualization intentionally omits scales, labels, and other chart furniture to present a minimal, data-only view.

TTushar Dangayach

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 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 set of horizontal rectangles, with lengths proportional to each country’s 2020 population, and no axes or labels. The visualization uses React with React hooks—`useState` and `useEffect`—to load a CSV from the United Nations World Population Prospects 2019 via `d3.csv`, then slices the first ten rows. Scaling relies on `d3.scaleBand` for vertical positioning and `d3.scaleLinear` for bar widths, with the SVG rendered declaratively through React’s JSX.

MMathieuSchaff

96% match