Skip to main content
SimilarExport ZIP
100%

Fork of Pathetic Bar Chart

✓ Published0🌍 Public
MMarcusABR
Last edited Nov 2, 2022
Created on Nov 2, 2022
Forked from Pathetic Bar Chart

This example displays the top 10 most populous countries as a minimalist bar chart with no axes, using horizontal bars whose lengths encode population values. Built with React and D3 v5, the code loads UN World Population Prospects 2019 data via `d3.csv`, then constructs scales with `scaleBand` and `scaleLinear` to map countries and populations to SVG rectangles. The chart renders purely through React state management and JSX, with each bar’s width derived from the population maximum.

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 set of horizontal bars, with no axes or labels, creating a starkly minimal "pathetic" chart. Using React and d3.v5, it loads population data from the United Nations World Population Prospects 2019, then applies `scaleBand` for the y-axis and `scaleLinear` for the x-axis to size each rectangle. The SVG rendering shows bar lengths proportional to 2020 population values, with React managing the state and rendering.

BBjørnar Dalsnes
97% 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
97% match
Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as a horizontal bar chart with no axes, using React and D3.v5. Population values from the United Nations World Population Prospects 2019 dataset are loaded via `d3.csv` and rendered as SVG rectangles. The code uses `scaleBand` for the y-axis positioning of country names and `scaleLinear` for bar widths, with bars colored by the default fill. The chart updates asynchronously, showing a loading message until data arrives.

TToooooooT
96% 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 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
96% 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 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
96% match
Loading thumbnail…

Fork of Pathetic Bar Chart2

This example displays the top 10 most populous countries as a horizontal bar chart, with no axes or labels, using country names as categorical bands and population counts mapped to bar widths. The code loads UN World Population Prospects 2019 data via `d3.csv`, parses the 2020 population column, and slices the first ten rows. It renders SVG rectangles using React components and D3 scales: `scaleBand` for the y-axis positioning and `scaleLinear` for the x-axis extent, with dimensions fixed at 960 by 500 pixels.

Bbart
96% match
Loading thumbnail…

Fork of Pathetic Bar Chart

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.

AAsad Zaman
96% match