Fork of Pathetic Bar Chart

100%

Fork of Pathetic Bar Chart

✓ Published0🌍 Public

Last edited May 31, 2022

Created on May 31, 2022

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.

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 top 10 most populous countries as a set of horizontal bars without axes, using a deliberately plain styling. Data comes from the United Nations World Population Prospects 2019 CSV file. The React application loads the data with `d3.csv`, then renders SVG rectangles positioned by `d3.scaleBand` for country names and sized by `d3.scaleLinear` for population values. The chart updates once data arrives, with no interactive elements.

Zzrg19

96% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as a minimal bar chart with no axes, using rectangles positioned by a d3.scaleBand and scaled by d3.scaleLinear. The data comes from the United Nations World Population Prospects 2019 CSV, loaded via d3.csv. Built with React, it renders SVG elements that include vertical gridlines generated from d3.scaleLinear ticks, though no axis labels or tick text appear.

Ssimontoblad

96% 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 a React component that loads data from the United Nations World Population Prospects 2019. The app fetches CSV data via d3.csv, then uses d3.scaleBand for the y-axis country labels and d3.scaleLinear for the x-axis population values. It renders SVG rectangles for the bars and includes gridlines from d3's tick labels, though no axis titles or tick marks are drawn. The chart updates only after the data loads, showing a loading message initially.

Bbart

96% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as horizontal bars with no axes, using population data from the United Nations World Population Prospects 2019. The React app loads the CSV via d3.csv, slices the first 10 rows, and renders SVG rectangles scaled by d3.scaleBand for the y-axis and d3.scaleLinear for the x-axis. Gridlines and tick labels are drawn manually, while the chart intentionally omits axis lines and frames.

SSabbir

96% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as a rudimentary bar chart, using only rectangles with no axes or labels for context. The chart loads population data from the United Nations World Population Prospects 2019 dataset via a CSV URL. Built with React and D3 v5, it uses `csv` to fetch and parse the data, then `scaleBand` and `scaleLinear` to map country names and population values to the SVG canvas dimensions. The visualization updates the displayed bars once the data is loaded, initially showing a “Loading…” message.

Jjcar@vt.edu

96% match

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

96% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example shows the top 10 most populous countries as a bare bar chart with no axes or labels, using rectangles whose widths encode population. The visualization fetches data from the United Nations World Population Prospects 2019 CSV, then sorts and slices it to the first ten rows inside a React component. It uses d3.csv for loading, d3.scaleBand for the vertical country positioning, and d3.scaleLinear for the horizontal population values, rendering the output as SVG via React elements.

Aanandbabu-k

96% match