Fork of Pathetic Bar Chart

100%

Fork of Pathetic Bar Chart

✓ Published0🌍 Public

Last edited Mar 11, 2021

Created on Mar 6, 2021

This fork of the pathetic bar chart displays the top 10 most populous countries as green landmasses on a black globe, with white graticule lines and country borders. It uses React with D3 v5 to load world topology data via `d3.json` and `topojson.feature` and `topojson.mesh`. The map is rendered as SVG using `d3.geoEqualEarth`, `d3.geoPath`, and `d3.geoGraticule`. Population data comes from the United Nations World Population Prospects 2019, though no bars or axes are shown.

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 fork of the Pathetic Bar Chart renders the top 10 most populous countries as rectangles with no axes, using React and D3 v5. The chart shows population values for 2020 from the United Nations World Population Prospects 2019 dataset, loaded via `d3.csv`. The code uses `d3.scaleBand` for the y-axis country labels, `d3.scaleLinear` for the horizontal bar lengths, and renders the SVG output through ReactDOM, with a left margin for country names.

Llatifiss

90% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This fork displays the top 10 most populous countries as a minimal, axis-free bar chart using SVG rectangles. The React app loads United Nations population data from a CSV, sorts by 2020 figures, and maps country names to vertical bands while bar widths correspond to population via d3’s scaleBand and scaleLinear. The code, using d3.v5 and React 16.9, computes maximum population with d3.max and renders each bar as a <rect> element. The chart intentionally omits axes, labels, or other decoration, creating a “pathetic” visual that highlights only the raw ranking.

RRahel Gunaratne

90% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This fork of a "pathetic bar chart" displays the top 10 most populous countries as horizontal bars with no axes or labels, ranked by population. The visualization uses React to manage state and render SVG rectangles, with D3 v5’s `csv` for data loading and `scaleBand`/`scaleLinear` for mapping country names and population values to pixel coordinates. Data comes from the United Nations World Population Prospects 2019 dataset.

VVahe Abovyan

89% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This fork of the "Pathetic Bar Chart" displays the top 10 most populous countries as rects with no axes, using their 2020 population values to set bar widths. It loads data from the United Nations World Population Prospects 2019 CSV, parsing it with the D3 `csv` function. The visualization uses React state to store the loaded data and D3’s `scaleBand` and `scaleLinear` to map country names to vertical positions and population to horizontal lengths. Rendered as SVG, the bars fill the canvas without any labeling or gridlines.

AAlan Vasconcelos

89% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example visualizes the top 10 most populous countries as a bar chart using React for component structure and D3 v5 scales for data mapping. The application fetches UN World Population Prospects 2019 data via d3.csv, then renders SVG rectangles whose widths correspond to each nation’s 2020 population estimate. The chart deliberately omits axis labels or tick styling, presenting only raw red tick lines and country names through custom React components like AxisBottom, AxisLeft, and Marks, with y-axis positioning using scaleBand and x-values scaled via scaleLinear.

Pplusbeauxjours

89% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example visualizes the top 10 most populous countries using a bar chart with no axes, rendered as SVG elements. It loads population data from the United Nations World Population Prospects 2019 dataset via `d3.csv`, then uses React’s `useState` and `useEffect` hooks to fetch and store the data. The chart maps each country to a rectangle, sizing bars with `scaleBand` and `scaleLinear` from d3.v5, while the overall layout is managed through React and ReactDOM.

TTchea JiaWei

89% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example renders the top 10 most populous countries as a pathetic bar chart with no axes, using React to manage state and SVG for drawing. The code loads UN World Population Prospects 2019 data via `d3.csv`, then maps it with `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis. Each country appears as a plain `<rect>` element, with its width proportional to population, and a loading indicator displays until the data arrives.

Ddiegobrivo

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

89% match