Fork of Pathetic Bar Chart

100%

Fork of Pathetic Bar Chart

✓ Published0🌍 Public

Last edited Mar 2, 2023

Created on Mar 2, 2023

A pathetic bar chart displays the top 10 most populous countries using horizontal bars without axes or labels. Implemented in React with SVG rendering, it maps each country's 2020 population to bar width via d3.scaleLinear and d3.max, while d3.scaleBand positions rows vertically. Data comes from the United Nations World Population Prospects 2019, loaded via d3.csv. The chart intentionally omits axis ticks, gridlines, and text, emphasizing raw bar lengths for a minimalist, data-only comparison.

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

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

96% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example visualizes the top 10 most populous countries as a "pathetic" bar chart, using horizontal bars with no axes or labels. The visualization loads data from the United Nations World Population Prospects 2019 dataset, which is fetched via the `csv` function in d3. The bars are rendered as SVG rectangles, with each bar’s width proportional to the country’s 2020 population. The layout uses `scaleBand` for the y-axis positioning and `scaleLinear` for the x-axis scaling, with React managing the component state and rendering the final SVG output.

AAllOneeeee

95% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This visualization displays the top 10 most populous countries as a pathetic bar chart with no axes, using horizontal bars scaled by 2020 population data from the United Nations World Population Prospects 2019. The app is built with React hooks (useState, useEffect) and d3.v5’s scaleBand and scaleLinear for layout, rendering SVG rectangles. Data is loaded asynchronously via d3.csv, then sorted and sliced to the first ten rows. The chart intentionally omits axes, labels, or value marks, emphasizing raw bar lengths as the sole encoding of population magnitude.

IIan Goodman

95% match

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

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 example displays the ten most populous countries using a bar chart that intentionally omits axes, result in a "pathetic" visualization. React component renders SVG rectangles, with bar lengths proportional to each country's 2020 population. Data comes from the United Nations World Population Prospects 2019, loaded via D3’s `csv`. The chart uses D3 scales: `scaleBand` for the categorical country labels and `scaleLinear` for the population values. D3’s `ticks()` generates vertical gridlines, though no axis labels or tick text appear.

KKonJoDot

95% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This chart visualizes the top 10 most populous countries using a "pathetic" bar chart—bars extend horizontally from a left baseline without axes or ticks, though gridlines and x-axis labels are drawn. Built in React with D3 v5, it loads UN World Population Prospects 2019 data via `d3.csv`, scales the x-axis with `d3.scaleLinear` and y-axis with `d3.scaleBand`, and renders each bar as an SVG `<rect>`.

SSan

95% match