Skip to main content
SimilarExport ZIP
100%

Fork of Pathetic Bar Chart

✓ Published0🌍 Public
Ssultanmirzapydev
Last edited Aug 11, 2021
Created on Aug 11, 2021
Forked from Pathetic Bar Chart

This example visualizes the ten most populous countries as horizontal bars, using the United Nations World Population Prospects 2019 dataset. The chart intentionally omits axes, scales, or labels, relying solely on bar lengths to convey relative population sizes. Built with React and D3 v5, the code uses `d3.scaleBand` for the vertical country positions and `d3.scaleLinear` for the bar widths, rendering each bar as an SVG `rect` element. The data is loaded via `d3.csv` and filtered to the top ten entries.

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 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
97% 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 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 horizontal bars without axes, using the United Nations World Population Prospects 2019 dataset. The visualization loads CSV data with `d3.csv`, filters it to the first ten rows, and renders the bars as SVG `<rect>` elements. It employs `d3.scaleBand` for the y-axis country positions and `d3.scaleLinear` for the x-axis population values. The app is built with React, managing loading state via hooks `useState` and `useEffect`.

KKuladeep
96% 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
96% match
Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the ten most populous countries as horizontal bars of varying length, with no axes or labels. The chart uses React to manage state and render SVG rectangles, while D3’s `scaleBand` and `scaleLinear` position and size the bars based on population values. Data comes from the United Nations World Population Prospects 2019, loaded as CSV via `d3.csv` and filtered to the first ten rows. The visualization updates once the data is fetched, showing a simple loading message before the bars appear.

SSampras Dsouza
96% match
Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as horizontal bars with no axes, making the ranking immediately visible through bar lengths. Built with React and D3 v5, it loads United Nations World Population Prospects 2019 data via `d3.csv`, parses the 2020 population column, and slices the first 10 rows. The SVG rendering uses `d3.scaleBand` for the y-axis country positions and `d3.scaleLinear` for the x-axis population widths, with each bar drawn as a `<rect>` element.

AAbin
96% match
Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as horizontal bars with no axes, making the ranking immediately visible through bar lengths. Built with React and D3 v5, it loads United Nations World Population Prospects 2019 data via `d3.csv`, parses the 2020 population column, and slices the first 10 rows. The SVG rendering uses `d3.scaleBand` for the y-axis country positions and `d3.scaleLinear` for the x-axis population widths, with each bar drawn as a `<rect>` element.

AAbin
96% match