Fork of Pathetic Bar Chart

100%

Fork of Pathetic Bar Chart

✓ Published0🌍 Public

Last edited Jul 4, 2022

Created on Jul 4, 2022

This visualization displays the top 10 most populous countries as a set of horizontal bars, with no axes or labels, emphasizing raw size comparisons. The chart loads population data from a CSV file sourced from the United Nations World Population Prospects 2019. Built with React and D3 v5, it uses `d3.csv` to parse the data, `d3.scaleBand` for the y-axis layout, and `d3.scaleLinear` for bar widths, rendering bars as SVG rectangles. The chart lacks any tick marks or value annotations, presenting a minimal, unadorned view.

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 visualization displays the top 10 most populous countries as a series of horizontal bars with no axes, using data from the United Nations World Population Prospects 2019. Each rectangle’s width encodes the country’s 2020 population via `d3.scaleLinear`, while its vertical position relies on `d3.scaleBand`. The React component loads the CSV with `d3.csv`, slices the first ten rows, and renders SVG rectangles. The chart intentionally omits labels and scales, presenting a minimal, decontextualized view of population ranking.

FfaridTalmat

97% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This visualization displays the top 10 most populous countries as a series of horizontal bars without any axes, making it deliberately minimal or “pathetic.” The bar lengths encode each country’s 2020 population from the United Nations World Population Prospects 2019 dataset. Built with React and D3 v5, the code uses `d3.csv` to load the data, `d3.scaleBand` for the y-axis categories, and `d3.scaleLinear` for the x-axis values, rendering SVG rectangles via React’s `map` function.

AAndrew-Sem

96% match

Loading thumbnail…

Fork of Pathetic Bar Chart 2

This example shows the top 10 most populous countries as a set of horizontal bars, with no axes, labels, or other chart furniture. Each bar’s length encodes the country’s 2020 population, drawn from the United Nations World Population Prospects 2019 dataset. The visualization is built with React, using D3 v5’s `scaleBand` for the y-axis positions and `scaleLinear` for the bar widths, and renders as an SVG. The data is fetched via D3’s `csv` loader and mapped to rectangles.

Iiffath.namira@csedge.org

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 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 presents the top 10 most populous countries as a bare bar chart, intentionally omitting axes and labels. The chart renders bars using React components that call D3 scales, with `scaleBand` positioning the countries vertically and `scaleLinear` mapping population values to bar widths. The SVG is drawn with simple `rect` elements, while gridlines are attempted using D3’s tick values. Data comes from the United Nations World Population Prospects 2019, loaded as a CSV and filtered to the first ten rows. The code demonstrates a minimal, almost playful approach to chart construction.

AAndres Perdomo

96% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as a set of horizontal bars without axes or labels, emphasizing raw bar lengths. The visualization uses React with hooks to fetch and parse United Nations World Population Prospects 2019 data via d3.csv, slicing the first 10 records. It renders SVG rectangles, positioning them with d3.scaleBand for the categorical country axis and sizing widths with d3.scaleLinear for population values. The code includes grid lines with tick marks from xScale.ticks(), though tick text is positioned incorrectly, and the chart shows only the bars and gridlines.

UUtsav Khatu

96% match

Loading thumbnail…

Fork of Pathetic Bar Chart

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.

Mmuwu16

96% match