Fork of Pathetic Bar Chart

100%

Fork of Pathetic Bar Chart

✓ Published0🌍 Public

Last edited May 12, 2021

Created on May 12, 2021

This visualization displays the ten most populous countries as horizontal bars, with no axes or labels, scaled proportionally to their 2020 population estimates from the United Nations World Population Prospects 2019 dataset. The React app fetches CSV data using d3.csv, then uses d3.scaleBand for the y-axis positioning and d3.scaleLinear with d3.max for the x-axis scaling. Each country is rendered as an SVG rectangle element within a fixed 960x500 canvas, with a simple loading message shown before data arrives.

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 ten most populous countries as a set of horizontal bars with no axes, labels, or other chart furniture. The bars are rendered as SVG rectangles using React, with their widths scaled linearly by each country’s 2020 population estimate from the United Nations World Population Prospects dataset. The code uses d3.csv to load the data, d3.scaleBand for the vertical positioning of each country, and d3.scaleLinear for mapping population to bar width. The chart updates once the data arrives, showing a "Loading..." state initially.

AAvonlea Fisher

96% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the ten most populous countries as a set of horizontal bars, with no axes or labels, using population data from the United Nations World Population Prospects 2019. The bars extend from the left edge of the SVG, with lengths proportional to each country’s 2020 projected population. The visualization is built with React and D3 v5, using `scaleBand` for the vertical country positions and `scaleLinear` for the bar widths. Data is loaded asynchronously via `d3.csv` and then sliced to the first ten entries.

Cchar0496

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

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

95% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as a set of horizontal bars, lacking any axes or labels. The bar lengths encode each country’s 2020 population estimate from the United Nations World Population Prospects 2019 dataset. React manages the component state and rendering, while d3.csv loads and parses the data, and d3.scaleBand and d3.scaleLinear map the country names and population values to SVG rectangle positions and widths. The visualization updates asynchronously after the CSV file is fetched.

TTrevor McReynolds

95% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This visualization displays a bar chart of the 10 most populous countries, with each bar’s length proportional to its 2020 population estimate from the United Nations World Population Prospects 2019 dataset. Rendering as SVG via React, the code uses `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. It loads CSV data with `d3.csv`, parses the population column, and maps each country to a `<rect>` element, notably omitting any axes or labels.

LLeandro Da Souza

95% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This visualization displays the top 10 most populous countries as horizontal bars, with bar width proportional to 2020 population estimates from the United Nations World Population Prospects 2019. React manages the component state while D3’s `csv` loads the data, `scaleBand` positions bars vertically, and `scaleLinear` maps population values to pixel widths. The SVG rectangles are rendered without axes or labels, creating a minimal, chart-like presentation where the lack of scales emphasizes raw data magnitude.

DDanier

95% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This fork of the Pathetic Bar Chart displays the ten most populous countries using population data from the United Nations World Population Prospects 2019. The visualization renders horizontal bars without axes or labels, using React for component structure and d3.scaleBand and d3.scaleLinear to map countries and populations to SVG rectangles. The data is loaded asynchronously via d3.csv and limited to the first ten rows. The chart updates from a loading state to the final graphic once the dataset is fetched and parsed.

Ccoltonjcox92

95% match