Fork of Pathetic Bar Chart

100%

Fork of Pathetic Bar Chart

✓ Published0🌍 Public

Last edited Aug 21, 2022

Created on Aug 21, 2022

This example visualizes the ten most populous countries as a set of plain rectangles, each with a width proportional to its population and no axes or labels. The bar chart is implemented using React and D3 v5, where D3’s `csv` function loads data from the United Nations World Population Prospects 2019, and `scaleBand` and `scaleLinear` map country names and population values to SVG coordinates. Each bar is drawn as an SVG `rect` element generated by React’s `map` function, with the chart rendered inside an `<svg>` component.

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

97% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the ten most populous countries as a pathetic bar chart with no axes, using React to render SVG rectangles. The data comes from the United Nations World Population Prospects 2019, loaded via the `d3.csv` function. A `scaleBand` positions each country vertically, while a `scaleLinear` maps population values to rectangle widths. The chart uses `d3.v5` and React hooks like `useState` and `useEffect` to fetch and store the data, showing a simple loading message until the CSV is ready.

DDiego Mariano

96% match

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

96% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the ten most populous countries using a bar chart that intentionally omits axes, result in a "pathetic" visualization. React component renders SVG rectangles, with bar lengths proportional to each country's 2020 population. Data comes from the United Nations World Population Prospects 2019, loaded via D3’s `csv`. The chart uses D3 scales: `scaleBand` for the categorical country labels and `scaleLinear` for the population values. D3’s `ticks()` generates vertical gridlines, though no axis labels or tick text appear.

KKonJoDot

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

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

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the ten most populous countries as a set of horizontal bars, with no axes or labels, using population data from the United Nations World Population Prospects 2019. The bars extend from the left edge of the SVG, with lengths proportional to each country’s 2020 projected population. The visualization is built with React and D3 v5, using `scaleBand` for the vertical country positions and `scaleLinear` for the bar widths. Data is loaded asynchronously via `d3.csv` and then sliced to the first ten entries.

Cchar0496

96% match