Fork of Pathetic Bar Chart

100%

Fork of Pathetic Bar Chart

✓ Published1🌍 Public

Last edited Nov 25, 2021

Created on Nov 25, 2021

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.

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 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.

GGeekboxer

97% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example visualizes the top 10 most populous countries as a "pathetic" bar chart, displaying horizontal bars without any axes or labels. The bar lengths encode each country’s 2020 population, taken from the United Nations World Population Prospects 2019 dataset, which is loaded via `d3.csv`. The visualization uses React’s `useState` and `useEffect` hooks to fetch and store the data, then renders SVG rectangles with `d3.scaleBand` for the y-axis positions and `d3.scaleLinear` for the x-axis widths. The chart intentionally omits tick marks, gridlines, and value text, leaving only unsorted, unadorned bars.

AArkadiusz Zabicki

97% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example visualizes the top 10 most populous countries as a "pathetic" bar chart, using horizontal bars with no axes or labels. The visualization loads data from the United Nations World Population Prospects 2019 dataset, which is fetched via the `csv` function in d3. The bars are rendered as SVG rectangles, with each bar’s width proportional to the country’s 2020 population. The layout uses `scaleBand` for the y-axis positioning and `scaleLinear` for the x-axis scaling, with React managing the component state and rendering the final SVG output.

AAllOneeeee

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

Loading thumbnail…

Fork of Pathetic Bar Chart

This example visualizes the top 10 most populous countries as a "pathetic" bar chart with no axes, labels, or gridlines—just raw rectangles scaled by population. The code uses React hooks (`useState`, `useEffect`) to load and manage data, while importing `csv`, `scaleBand`, `scaleLinear`, and `max` from D3 v5 to parse the United Nations World Population Prospects 2019 dataset and compute bar widths. Bars are rendered as SVG `<rect>` elements, with the x-scale mapping population values to pixel widths and the y-scale positioning each country’s bar vertically. The chart intentionally omits all chart furniture, leaving only the visual proportions of the data.

Bbencooper6851

96% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example visualizes the top 10 most populous countries as a pathetic bar chart, with no axes or labels, using rectangles sized by population values from the United Nations World Population Prospects 2019 dataset. The chart uses React hooks to fetch and parse CSV data via `d3.csv`, then renders SVG bars with `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis. The bars are drawn as SVG `<rect>` elements, with widths proportional to each country’s 2020 population estimate.

KKaiWhatmore

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

96% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This chart displays the top 10 most populous countries in 2020 as horizontal bars, sorted by population, without any axes or labels to indicate values. It uses React’s `useState` and `useEffect` hooks to fetch and process data from the United Nations World Population Prospects 2019 CSV file, then loads it with `d3.csv`. The SVG rendering maps each country’s population to a bar width using `d3.scaleLinear`, while `d3.scaleBand` positions the bars vertically. The visualization intentionally omits axes, making it a “pathetic” bar chart that prioritizes raw shape over quantitative precision.

LLainu Kuruvilla

96% match