Skip to main content
SimilarExport ZIP
100%

Ep. 21-22 | Pathetic Bar Chart

✓ Published1🌍 Public
YYee Han
Last edited Dec 24, 2020
Created on Dec 23, 2020

The example displays a horizontal bar chart of the top 10 countries by 2020 population, rendered as SVG rectangles. It uses React with hooks to fetch and store the data, while D3’s `scaleBand` and `scaleLinear` map country names to y-positions and population values to bar widths. The data comes from the United Nations World Population Prospects 2019 CSV, loaded via D3’s `csv` method. A loading state is shown until the asynchronous fetch completes.

AI-generated description

A program that loads in some United Nations World Population Prospects 2019.

MIT Licensed

Similar vizzes

Loading thumbnail…

Pathetic Bar Chart

This example shows a horizontal bar chart of the top 10 countries by 2020 population, rendered with React and SVG. It loads UN population data from a CSV using the `d3.csv` utility, then maps each country to a `rect` element. The chart uses `d3.scaleBand` for the y-axis country categories and `d3.scaleLinear` for the x-axis population values. The data is fetched inside a `useEffect` hook and stored in state via `useState`, with a loading message displayed before the data arrives.

Wwindwaver
93% match
Loading thumbnail…

Pathetic Bar Chart with React and D3 - 01

This example visualizes the top 10 countries by 2020 population from a United Nations dataset, represented as horizontal bars whose widths scale with population values. The chart uses a D3 scaleBand for categorical y-axis positioning and a scaleLinear for quantitative x-axis scaling within an SVG rendered by React. Data is fetched as CSV from a GitHub gist, parsed with d3.csvParse, and state management is handled through React hooks (useState, useEffect). React 16.13.1 and D3 v5.11.0 are loaded via CDN.

EEhtisham UL Hassan
92% match
Loading thumbnail…

Pathetic Bar Chart

This bar chart displays the top 10 countries by 2020 population from a CSV file loaded with d3.csv. Horizontal bars are positioned using d3.scaleBand for the y-axis and scaled with d3.scaleLinear for the x-axis. Rendered as SVG rectangles within a React component, the chart initializes with a “Loading…” message until the asynchronous data arrives. The example demonstrates combining React state management via useEffect and useState with D3’s data-loading and scaling utilities.

SSong Tao Chen
91% match
Loading thumbnail…

Pathetic Bar Chart

This example displays a horizontal bar chart of the top 10 countries by 2020 UN population estimates. Using React with hooks, it loads CSV data via `d3.csv` and renders SVG rectangles scaled by `d3.scaleLinear` and positioned with `d3.scaleBand`. The chart updates from an initial "Loading..." state once data arrives.

BbeauMarko
91% match
Loading thumbnail…

Pathetic Bar Chart

This example displays a horizontal bar chart of the top ten countries by 2020 population, loading data from a CSV via `d3.csv`. React manages the component state and renders SVG `<rect>` elements, while D3’s `scaleBand` and `scaleLinear` map country names and population values to screen coordinates. The chart updates once the asynchronous data fetch completes, with a "Loading..." fallback displayed until then.

11godfrey
91% match
Loading thumbnail…

Fork of Pathetic Bar Chart

This example visualizes the top 10 most populous countries as horizontal bars with no axes, using React and D3 v5 to fetch and render the data. It displays United Nations World Population Prospects 2019 data by mapping country names to a `d3.scaleBand` y-axis and population values to a `d3.scaleLinear` x-axis. The SVG rectangles are rendered directly in JSX, with bar widths proportional to each country’s 2020 population estimate. The code uses `d3.csv` to load the dataset and React hooks (`useState`, `useEffect`) to manage the asynchronous data loading.

Mmrthnkwn
91% match
Loading thumbnail…

Pathetic Bar Chart

This example shows a bar chart of the top 10 countries by 2020 population, with bars extending horizontally from a shared left edge. The chart initially displays a loading message, then renders the data using React and D3’s `scaleBand` and `scaleLinear` to map country names to y-positions and population values to bar widths. Data is loaded asynchronously from a CSV file using `d3.csv`, and the visualization is drawn as SVG rectangles within a fixed-size viewport.

Ccheruvatheryvishnu@gmail.com
91% 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
91% match