Fork of Pathetic Bar Chart

100%

Fork of Pathetic Bar Chart

✓ Published0🌍 Public

Last edited Oct 22, 2022

Created on Oct 22, 2022

This example displays the ten most populous countries as horizontal bars, with bar length encoding population size and no axes or labels. It uses React hooks to fetch and manage data from the United Nations World Population Prospects 2019 CSV, then renders SVG rectangles with d3.scaleBand for vertical positioning and d3.scaleLinear for bar widths. The visualization updates asynchronously after loading, showing a loading state until the 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 example visualizes the ten most populous countries as horizontal bars, with bar length proportional to population. It uses React hooks (useState, useEffect) to load and manage data, and d3’s scaleBand and scaleLinear to position and size SVG rectangles. Population figures come from the United Nations World Population Prospects 2019 CSV, sourced via a gist. No axes or labels are drawn, keeping the chart intentionally bare.

IIlyas Filali

97% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example presents the top 10 most populous countries as a series of unlabeled, axis-less bars rendered as SVG rectangles. The bars stretch horizontally across the viewport based on each country’s 2020 population estimate, with no tick marks, scales, or other chart furniture. The visualization uses React hooks (useState, useEffect) to fetch and parse United Nations World Population Prospects 2019 data via d3.csv, then applies d3.scaleBand for vertical country positioning and d3.scaleLinear for bar widths. While loading, a large “Loading...” message appears in place of the chart.

Kkl7g

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

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 shows the top 10 most populous countries as a set of horizontal bars without axes, labels, or scales. It loads population data from the United Nations World Population Prospects 2019 CSV file. The code uses React hooks, including `useState` and `useEffect`, to fetch and store the data, then renders SVG rectangles with D3’s `scaleBand` and `scaleLinear` to position and size each bar based on the country name and 2020 population value.

EEthan Pierce

96% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the ten most populous countries as a pathetic bar chart with no axes, using React to render SVG rectangles. The data comes from the United Nations World Population Prospects 2019, loaded via the `d3.csv` function. A `scaleBand` positions each country vertically, while a `scaleLinear` maps population values to rectangle widths. The chart uses `d3.v5` and React hooks like `useState` and `useEffect` to fetch and store the data, showing a simple loading message until the CSV is ready.

DDiego Mariano

96% match

Loading thumbnail…

Fork of Pathetic Bar Chart

A pathetic bar chart displays the ten most populous countries from the United Nations World Population Prospects 2019 dataset, rendered as horizontal rectangles without any axes or labels. Using d3.csv to load the data, d3.scaleBand and d3.scaleLinear map country names and populations to SVG rectangle positions and widths within a React component. The visualization intentionally omits visual encoding cues like ticks or gridlines, leaving only the raw bars to compare population magnitudes.

KKonJoDot

96% match