Fork of Pathetic Bar Chart

100%

Fork of Pathetic Bar Chart

✓ Published0🌍 Public

Last edited May 30, 2022

Created on May 30, 2022

This example displays the ten most populous countries as a bar chart with no axes, using only styled text and variable-width bars to represent each nation’s population. The visualization is built with React hooks and D3 v5, fetching data from the United Nations World Population Prospects 2019 via d3.csv, then scaling bar widths with d3.scaleLinear and d3.max. React manages the UI state, while D3 handles data loading and layout calculations, rendering directly into the DOM.

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 with no axes, using React hooks to manage state and effects. The code loads UN World Population Prospects 2019 data via `d3.csv`, parses the 2020 population column, and renders SVG rectangles scaled by `d3.scaleLinear` for width and `d3.scaleBand` for vertical positioning. React handles rendering updates, while D3 v5 provides data loading and scaling utilities.

CCYBERFENRIR

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

95% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example visualizes the ten most populous countries as horizontal bars, with bar length proportional to population. It uses React hooks (useState, useEffect) to load and manage data, and d3’s scaleBand and scaleLinear to position and size SVG rectangles. Population figures come from the United Nations World Population Prospects 2019 CSV, sourced via a gist. No axes or labels are drawn, keeping the chart intentionally bare.

IIlyas Filali

95% match

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

95% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as a bar chart with no axes, using React to render SVG rectangles. The bars are sized proportionally to each country’s 2020 population, with blue vertical gridlines drawn from the linear scale’s ticks. Data comes from the United Nations World Population Prospects 2019, loaded via d3.csv and processed with scaleBand and scaleLinear. The visualization relies on React hooks (useState, useEffect) to fetch and store the data, while d3.v5 provides the scales and max function.

SSabbir

95% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as a bar chart with no axes, using population data from the United Nations World Population Prospects 2019. The chart renders with React and D3 v5, where `scaleBand` maps countries to vertical positions and `scaleLinear` maps population values to bar widths. Each bar is drawn as an SVG rectangle within a React component, with data loaded asynchronously via `d3.csv`. The visualization intentionally omits scales, labels, and other chart furniture to present a minimal, data-only view.

TTushar Dangayach

95% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the ten most populous countries as horizontal bars, with bar length encoding population size and no axes or labels. It uses React hooks to fetch and manage data from the United Nations World Population Prospects 2019 CSV, then renders SVG rectangles with d3.scaleBand for vertical positioning and d3.scaleLinear for bar widths. The visualization updates asynchronously after loading, showing a loading state until the data arrives.

KKonJoDot

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

95% match