Fork of Pathetic Bar Chart

100%

Fork of Pathetic Bar Chart

✓ Published0🌍 Public

Last edited May 23, 2022

Created on May 23, 2022

This example renders the top 10 most populous countries as a bar chart with no axes, labels, or scales visible, creating a deliberately minimal and “pathetic” visualization. Built with React and D3 v5, it uses `d3.csv` to load UN World Population Prospects 2019 data, then maps the population values to bar widths via `scaleLinear` and country names to vertical positions via `scaleBand`. Each country is drawn as an SVG `<rect>` element, with the chart filling the full width and height of the viewport.

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 displays the top 10 most populous countries as a bar chart, deliberately omitting axes to create a "pathetic" minimalist aesthetic. The visualization uses React hooks to manage state and fetch data, while D3 v5’s `scaleBand` and `scaleLinear` handle positioning. Bars are drawn as SVG `<rect>` elements, with country labels and tick marks generated from the scales. The data comes from the United Nations World Population Prospects 2019, loaded via `d3.csv`. The chart intentionally lacks a functional x-axis, rendering only tick lines and values for a raw, unconventional look.

BBhavesh Choudhary

97% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as a pathetic bar chart with no axes, using React and D3 v5. It renders SVG rectangles positioned with `d3.scaleBand` and `d3.scaleLinear` to map population values to widths. The data is loaded asynchronously from a CSV file via `d3.csv`, sourced from the United Nations World Population Prospects 2019. The chart updates with a loading indicator until the dataset arrives, and bars fill the full browser viewport.

MMohammed Banani | MbDev

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

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 displays the top 10 most populous countries as a bar chart without any axes, using a "pathetic" style where bars vary only in width. The visualization is built with React and D3 v5, employing `d3.csv` to load United Nations World Population Prospects 2019 data, then `scaleBand` for country positioning and `scaleLinear` for population-based bar widths. The chart renders as SVG rectangles, with data filtered to the first ten rows. The code runs entirely in the browser, initially showing a loading message before rendering the final chart.

Tthanhtrdang

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

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

96% match