Fork of Pathetic Bar Chart

100%

Fork of Pathetic Bar Chart

✓ Published0🌍 Public

Last edited May 12, 2021

Created on May 12, 2021

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.

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 chart displays the top 10 most populous countries as a set of bare, axis-free rectangles using SVG. Built with React and D3 v5, it loads United Nations 2019 population data via `d3.csv`, sorts by the 2020 estimate, and uses `d3.scaleBand` for vertical positioning and `d3.scaleLinear` for bar lengths. The minimal styling intentionally omits axes, labels, and other chart furniture, leaving only colored bars whose widths encode population values.

Llatifiss

96% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as horizontal bars without any axes, using raw SVG rectangles. The app loads United Nations population data from a CSV file, sorts it by 2020 figures, and maps country names to a d3.scaleBand for vertical positioning while a d3.scaleLinear scales bar widths. Built with React hooks (useState, useEffect), it fetches the dataset asynchronously via d3.csv. The chart intentionally lacks labels, ticks, or a scale, presenting only the relative lengths of bars to compare population sizes.

AAndres Perdomo

96% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This fork of the “Pathetic Bar Chart” renders the top 10 most populous countries from United Nations World Population Prospects 2019 data as a minimal SVG bar chart with no axes. The React app loads the CSV via the `d3.csv` function, filters the first ten rows by the 2020 population column, and maps each country to a rectangle using `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis width. The chart displays only the bars, with no labels or gridlines, leaving the visual comparison to the raw rectangle sizes.

Uuplusv

95% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as a rudimentary bar chart with no axes, using a React component and SVG rendering. It loads United Nations World Population Prospects 2019 data from a CSV via `d3.csv`, slices the first ten rows, and maps populations for 2020 to rectangle widths using `d3.scaleLinear`, while `d3.scaleBand` positions each country vertically. The chart omits axis labels and titles, presenting only the bars against a blank canvas.

KKuladeep

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

95% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as a minimalist set of horizontal bars, with no axes or labels, using React to manage state and render SVG rectangles. The code loads United Nations World Population Prospects 2019 data via `d3.csv`, then applies `d3.scaleBand` for the y-axis positioning and `d3.scaleLinear` for the bar widths. It uses `useState` and `useEffect` hooks to asynchronously fetch and slice the data, and `d3.max` to set the x-scale domain.

Kkoubaib ben yedder

95% match

Loading thumbnail…

Fork of Pathetic Bar Chart

A React application renders the top 10 most populous countries from the UN World Population Prospects 2019 dataset as a simple bar chart with no axes. The bars are drawn as SVG rectangles, with country names on the vertical scale and population values mapped to horizontal widths. Using `d3.csv` for data loading, `d3.scaleBand` for the categorical y-axis, and `d3.scaleLinear` with `d3.max` for the continuous x-axis, the visualization displays raw population data without additional chart furniture, keeping the presentation deliberately minimal.

Jjasonamey

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

95% match