Fork of Pathetic Bar Chart

100%

Fork of Pathetic Bar Chart

✓ Published1🌍 Public

Last edited May 6, 2022

Created on May 6, 2022

This example displays the top 10 most populous countries as a pathetic bar chart with no axes, using React and D3 v5. It renders SVG rectangles positioned with `d3.scaleBand` and `d3.scaleLinear` to map population values to widths. The data is loaded asynchronously from a CSV file via `d3.csv`, sourced from the United Nations World Population Prospects 2019. The chart updates with a loading indicator until the dataset arrives, and bars fill the full browser viewport.

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 renders the top 10 most populous countries as a pathetic bar chart with no axes, using React to manage state and SVG for drawing. The code loads UN World Population Prospects 2019 data via `d3.csv`, then maps it with `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis. Each country appears as a plain `<rect>` element, with its width proportional to population, and a loading indicator displays until the data arrives.

Ddiegobrivo

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

97% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example renders the top 10 most populous countries as a pathetic bar chart with no axes, using React to manage state and D3 v5’s `scaleBand` and `scaleLinear` for positioning and sizing. Each country’s population from the United Nations World Population Prospects 2019 dataset is represented as a horizontal bar, loaded via `d3.csv`. The SVG rectangles are generated through React’s JSX, with height determined by `yScale.bandwidth()` and width scaled to the maximum population value.

SSam

97% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as a horizontal bar chart with no axes, using React and D3.v5. Population values from the United Nations World Population Prospects 2019 dataset are loaded via `d3.csv` and rendered as SVG rectangles. The code uses `scaleBand` for the y-axis positioning of country names and `scaleLinear` for bar widths, with bars colored by the default fill. The chart updates asynchronously, showing a loading message until data arrives.

TToooooooT

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

97% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as a bar chart without any axes, using a "pathetic" style where bars vary only in width. The visualization is built with React and D3 v5, employing `d3.csv` to load United Nations World Population Prospects 2019 data, then `scaleBand` for country positioning and `scaleLinear` for population-based bar widths. The chart renders as SVG rectangles, with data filtered to the first ten rows. The code runs entirely in the browser, initially showing a loading message before rendering the final chart.

Tthanhtrdang

97% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example presents the top 10 most populous countries as a bar chart with no axes, rendering bars as plain rectangles. Built with React and D3 v5, it loads population data from the United Nations World Population Prospects 2019 via `d3.csv`, scales the bar widths with `scaleLinear` and positions them with `scaleBand`. The SVG output uses React state and hooks to fetch and display the data, with a red grid line attempted inside the tick mapping.

EEdgar Alves

97% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example renders the top 10 most populous countries as a bar chart with no axes, labels, or scales visible, creating a deliberately minimal and “pathetic” visualization. Built with React and D3 v5, it uses `d3.csv` to load UN World Population Prospects 2019 data, then maps the population values to bar widths via `scaleLinear` and country names to vertical positions via `scaleBand`. Each country is drawn as an SVG `<rect>` element, with the chart filling the full width and height of the viewport.

AAsad Zaman

97% match