Fork of Pathetic Bar Chart

100%

Fork of Pathetic Bar Chart

✓ Published0🌍 Public

Last edited Jul 26, 2023

Created on Jul 26, 2023

This example displays the top 20 most populous countries as a bar chart, with horizontal bars rendered as SVG rectangles. It deliberately omits axes, instead using gridlines and tick labels from `scaleLinear` and `scaleBand` to convey values. The chart is built with React functional components and hooks, while D3 v5 handles data loading via `csv`, scaling, and tick generation. Population figures come from the United Nations World Population Prospects 2019 dataset.

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 bars spanning the full width of the SVG, with no axes or labels. Data comes from the United Nations World Population Prospects 2019, loaded via `d3.csv` and sorted by 2020 population. React hooks (`useState`, `useEffect`) manage the asynchronous data fetch, while `d3.scaleBand` and `d3.scaleLinear` position the rectangles. The rendering uses SVG generated from React components, with bars sized proportionally to population values.

KKunkgg

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

95% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as horizontal bars without axes, using a simple SVG rendering. The chart fetches population data from the United Nations World Population Prospects 2019 CSV, extracting the 2020 population values for each country. Built with React, it leverages d3.scaleBand for the y-axis categories and d3.scaleLinear for the x-axis values, mapping each country’s population to bar widths. The bars are drawn as SVG rectangles, with a loading state shown while data loads asynchronously via d3.csv.

SSunbinSong

95% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example shows the top 10 most populous countries as a horizontal bar chart with labeled bars but no axes, using React to render SVG elements. The code loads United Nations World Population Prospects 2019 data via d3.csv, then applies d3.scaleLinear and d3.scaleBand to map population values and country names to pixel coordinates. It manually draws gridlines and tick labels using d3.scaleLinear ticks, while omitting axis components. Bars are rendered as SVG rectangles whose widths reflect each country’s 2020 population estimate, with country names positioned along the y-axis.

Nnikitaglt

95% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example visualizes the top 10 most populous countries as a bar chart, with each bar’s length representing the 2020 population estimate. Drawn using React and D3 v5, the SVG renders rectangles positioned via `scaleBand` along the y-axis and scaled by `scaleLinear` on the x-axis. No axes are drawn; the chart intentionally appears minimal. Data comes from the United Nations World Population Prospects 2019, loaded as CSV and sliced to the first ten rows.

Hharika-1929

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

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, creating a starkly minimal "pathetic" chart. Using React and d3.v5, it loads population data from the United Nations World Population Prospects 2019, then applies `scaleBand` for the y-axis and `scaleLinear` for the x-axis to size each rectangle. The SVG rendering shows bar lengths proportional to 2020 population values, with React managing the state and rendering.

BBjørnar Dalsnes

95% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as a bare bar chart with no axes or labels, rendered as SVG rectangles. The React component fetches United Nations World Population Prospects 2019 data via d3.csv, then uses d3.scaleBand for the y-axis positioning and d3.scaleLinear with d3.max to map population values to bar widths. The visualization relies on React hooks—useState and useEffect—to load and slice the data, while d3.v5 and React 16.9 render the chart through ReactDOM.

JJean David

95% match