Fork of Pathetic Bar Chart

100%

Fork of Pathetic Bar Chart

✓ Published0🌍 Public

Last edited Apr 8, 2021

Created on Apr 7, 2021

A fork of the Pathetic Bar Chart displays the top 10 most populous countries for 2020 as horizontal bars, using plain SVG rectangles with no axes. The chart renders React components that leverage D3 v5’s `scaleBand` for categorical positioning of countries and `scaleLinear` for population widths, while generating tick marks via `xScale.ticks()`. Data is loaded asynchronously from a United Nations World Population Prospects 2019 CSV, filtered to the first ten rows, and visualized with a left margin for country labels.

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 fork of the Pathetic Bar Chart renders the top 10 most populous countries as rectangles with no axes, using React and D3 v5. The chart shows population values for 2020 from the United Nations World Population Prospects 2019 dataset, loaded via `d3.csv`. The code uses `d3.scaleBand` for the y-axis country labels, `d3.scaleLinear` for the horizontal bar lengths, and renders the SVG output through ReactDOM, with a left margin for country names.

Llatifiss

96% match

Loading thumbnail…

Fork of Pathetic Bar Chart

A fork of the Pathetic Bar Chart displays the top 10 most populous countries as horizontal bars with no axes or labels, using population data from the United Nations World Population Prospects 2019. The chart renders SVG rectangles via React, with scales created using `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis, and loads the CSV data using `d3.csv`. Loading text appears while the data is fetched asynchronously.

AAshford

96% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This fork of the Pathetic Bar Chart displays the top 10 most populous countries as horizontal bars without axes. It uses React with a `useEffect` hook to load CSV data from the United Nations World Population Prospects 2019 via `d3.csv`. The visualization employs `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis, rendering SVG rectangles and text labels. The code also generates tick marks and labels for the x-axis, though they lack visible axis lines.

Aalitemel89

95% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as horizontal bars without axes, using a simple SVG rendering. The chart fetches population data from the United Nations World Population Prospects 2019 CSV, extracting the 2020 population values for each country. Built with React, it leverages d3.scaleBand for the y-axis categories and d3.scaleLinear for the x-axis values, mapping each country’s population to bar widths. The bars are drawn as SVG rectangles, with a loading state shown while data loads asynchronously via d3.csv.

SSunbinSong

95% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This fork of a "pathetic bar chart" displays the top 10 most populous countries as horizontal bars with no axes or labels, ranked by population. The visualization uses React to manage state and render SVG rectangles, with D3 v5’s `csv` for data loading and `scaleBand`/`scaleLinear` for mapping country names and population values to pixel coordinates. Data comes from the United Nations World Population Prospects 2019 dataset.

VVahe Abovyan

95% 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, using a deliberately plain styling. Data comes from the United Nations World Population Prospects 2019 CSV file. The React application loads the data with `d3.csv`, then renders SVG rectangles positioned by `d3.scaleBand` for country names and sized by `d3.scaleLinear` for population values. The chart updates once data arrives, with no interactive elements.

Zzrg19

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

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

95% match