Fork of Pathetic Bar Chart

100%

Fork of Pathetic Bar Chart

✓ Published0🌍 Public

Last edited Jul 3, 2021

Created on Jul 3, 2021

This example displays the top 10 most populous countries as colored rectangles with no axes, using React hooks (useState, useEffect) to load and transform CSV data. The d3.csv method fetches United Nations World Population Prospects 2019 data, while d3.scaleBand and d3.scaleLinear position and size the rectangles based on country names and 2020 population estimates. The chart renders as an SVG with React components, mapping each data row to a <rect> element.

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 shows the top 10 most populous countries as a set of horizontal rectangles, with lengths proportional to each country’s 2020 population, and no axes or labels. The visualization uses React with React hooks—`useState` and `useEffect`—to load a CSV from the United Nations World Population Prospects 2019 via `d3.csv`, then slices the first ten rows. Scaling relies on `d3.scaleBand` for vertical positioning and `d3.scaleLinear` for bar widths, with the SVG rendered declaratively through React’s JSX.

MMathieuSchaff

96% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as a series of horizontal rectangles, with no axes or labels, using a “pathetic” bar chart style. The chart loads UN World Population Prospects 2019 data via `d3.csv`, then uses React hooks (`useState`, `useEffect`) to manage state and fetch the data. It renders SVG rectangles scaled with `d3.scaleBand` for the y-axis positioning and `d3.scaleLinear` for the x-axis widths, based on the 2020 population values.

SSayyed Arib Hussain

95% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as a series of rectangles that scale horizontally with population size, using no axes or labels. The chart is built with React and D3.js (d3.scaleBand and d3.scaleLinear) and renders as SVG. Data comes from the United Nations World Population Prospects 2019, loaded via d3.csv. Initially, the app shows a loading message until the CSV is fetched.

Bbradpickering

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 hooks to manage state and effects. The code loads UN World Population Prospects 2019 data via `d3.csv`, parses the 2020 population column, and renders SVG rectangles scaled by `d3.scaleLinear` for width and `d3.scaleBand` for vertical positioning. React handles rendering updates, while D3 v5 provides data loading and scaling utilities.

CCYBERFENRIR

95% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as rectangles extending from the left edge, with country names omitted and no axes, creating a deliberately bare "pathetic" bar chart. Data from the United Nations World Population Prospects 2019 is loaded via d3.csv, then sorted and sliced to the first 10 rows. React hooks (useState, useEffect) manage the asynchronous data fetch, while d3.scaleBand and d3.scaleLinear map country names and population values to SVG rectangle positions and widths, rendered directly to the DOM.

AAna Sofia Pinto

95% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as a rudimentary bar chart with no axes, using a React component and SVG rendering. It loads United Nations World Population Prospects 2019 data from a CSV via `d3.csv`, slices the first ten rows, and maps populations for 2020 to rectangle widths using `d3.scaleLinear`, while `d3.scaleBand` positions each country vertically. The chart omits axis labels and titles, presenting only the bars against a blank canvas.

KKuladeep

95% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as a set of horizontal bars, with no axes or labels, using color intensity to encode population size. The visualization loads data from the United Nations World Population Prospects 2019 CSV file, filtering for countries with over 100,000 people. It uses React hooks (`useState`, `useEffect`, `useCallback`) to manage asynchronous data loading, and renders SVG rectangles via React. The chart employs `d3.csv` for parsing, `scaleBand` for vertical positioning, `scaleLinear` for bar widths, and `scaleSequential` with `interpolateOranges` for the color scale.

KKoundinya

95% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as colored rectangles, with bar width proportional to population and no axes or labels. Built with React and D3 v5, it uses `d3.csv` to load UN World Population Prospects 2019 data, then `scaleBand` for the vertical country positions and `scaleLinear` for horizontal bar lengths. The visualization renders as SVG, updating from a loading state to the final chart once data arrives.

Ffaizalmunna

95% match