Fork of Pathetic Bar Chart

100%

Fork of Pathetic Bar Chart

✓ Published0🌍 Public

Last edited Oct 7, 2022

Created on Oct 6, 2022

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.

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

Zzyniax

96% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This chart displays the top 10 most populous countries as a set of bare, axis-free rectangles using SVG. Built with React and D3 v5, it loads United Nations 2019 population data via `d3.csv`, sorts by the 2020 estimate, and uses `d3.scaleBand` for vertical positioning and `d3.scaleLinear` for bar lengths. The minimal styling intentionally omits axes, labels, and other chart furniture, leaving only colored bars whose widths encode population values.

Llatifiss

96% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example presents the top 10 most populous countries as a bar chart with no axes, rendering bars as plain rectangles. Built with React and D3 v5, it loads population data from the United Nations World Population Prospects 2019 via `d3.csv`, scales the bar widths with `scaleLinear` and positions them with `scaleBand`. The SVG output uses React state and hooks to fetch and display the data, with a red grid line attempted inside the tick mapping.

EEdgar Alves

96% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example visualizes the top 10 most populous countries using a bar chart with no axes, rendered as SVG elements. It loads population data from the United Nations World Population Prospects 2019 dataset via `d3.csv`, then uses React’s `useState` and `useEffect` hooks to fetch and store the data. The chart maps each country to a rectangle, sizing bars with `scaleBand` and `scaleLinear` from d3.v5, while the overall layout is managed through React and ReactDOM.

TTchea JiaWei

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

96% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This fork of the "Pathetic Bar Chart" displays the top 10 most populous countries as rects with no axes, using their 2020 population values to set bar widths. It loads data from the United Nations World Population Prospects 2019 CSV, parsing it with the D3 `csv` function. The visualization uses React state to store the loaded data and D3’s `scaleBand` and `scaleLinear` to map country names to vertical positions and population to horizontal lengths. Rendered as SVG, the bars fill the canvas without any labeling or gridlines.

AAlan Vasconcelos

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

96% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as a horizontal bar chart with no axes, using React and D3.v5. Population values from the United Nations World Population Prospects 2019 dataset are loaded via `d3.csv` and rendered as SVG rectangles. The code uses `scaleBand` for the y-axis positioning of country names and `scaleLinear` for bar widths, with bars colored by the default fill. The chart updates asynchronously, showing a loading message until data arrives.

TToooooooT

96% match