Fork of Pathetic Bar Chart

100%

Fork of Pathetic Bar Chart

✓ Published0🌍 Public

Last edited Aug 18, 2021

Created on Aug 1, 2021

This example displays the top 10 most populous countries as a simple bar chart with no axes or labels, leaving the bars visually raw and unadorned. It loads United Nations population data from a CSV file, parses the 2020 values, and sorts the dataset before rendering. The visualization is built with React, using the `useState` and `useEffect` hooks to manage data loading, while D3’s `scaleBand` and `scaleLinear` map country names and population counts to SVG rectangles. The bars fill the full width and height of the SVG canvas, with no styling or annotations.

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 bare bar chart with no axes, using rectangular bars whose widths encode each country’s 2020 population. It loads data from the UN World Population Prospects 2019 via `d3.csv` and sorts the first ten rows. The visualization uses React’s `useState` and `useEffect` to fetch and store data, then renders SVG rectangles positioned with `d3.scaleBand` on the y-axis and scaled with `d3.scaleLinear` based on the maximum population. The chart lacks labels, tick marks, or any annotation, emphasizing its intentionally minimal design.

KKNJour

97% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as ranked bars, with no axes or labels, using a minimal bar chart layout. It loads United Nations World Population Prospects 2019 data via `d3.csv`, then sorts and slices the first ten rows. React state management (`useState`, `useEffect`) handles the asynchronous data fetch, while `d3.scaleBand` and `d3.scaleLinear` map countries and population values to SVG rectangles. The visualization renders in SVG, with bar widths proportional to 2020 population estimates.

Aanindyamehta@gmail.com

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 chart displays the top 10 most populous countries in 2020 as horizontal bars, sorted by population, without any axes or labels to indicate values. It uses React’s `useState` and `useEffect` hooks to fetch and process data from the United Nations World Population Prospects 2019 CSV file, then loads it with `d3.csv`. The SVG rendering maps each country’s population to a bar width using `d3.scaleLinear`, while `d3.scaleBand` positions the bars vertically. The visualization intentionally omits axes, making it a “pathetic” bar chart that prioritizes raw shape over quantitative precision.

LLainu Kuruvilla

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

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

96% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This visualization displays the top 10 most populous countries as a bare bar chart with no axes, using rectangular bars proportional to each country’s 2020 population. The chart loads data from the United Nations World Population Prospects 2019 CSV, then uses `d3.csv`, `scaleBand`, `scaleLinear`, and `max` to map country names and population values to SVG rectangles. React manages the component state and rendering, while D3 handles the data processing and scales. The bars render in an SVG canvas with no labels or gridlines, focusing purely on the relative population sizes.

Aavneet12284

96% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as a bar chart stripped of all axes and labels, emphasizing raw bar lengths over context. Built with React and D3, it loads United Nations World Population Prospects 2019 data via `d3.csv`, converts the “2020” population field to numbers, and slices the dataset to the first ten rows. Each bar is an SVG rectangle positioned with `d3.scaleBand` for the y-axis and sized using `d3.scaleLinear` and `d3.max` for the x-axis, all within a fixed 960×500 viewport.

YYing-Liu21

96% match