Fork of Pathetic Bar Chart 2

100%

Fork of Pathetic Bar Chart 2

✓ Published0🌍 Public

Last edited Jan 10, 2025

Created on Jan 10, 2025

This example shows the top 10 most populous countries as a set of horizontal bars, with no axes, labels, or other chart furniture. Each bar’s length encodes the country’s 2020 population, drawn from the United Nations World Population Prospects 2019 dataset. The visualization is built with React, using D3 v5’s `scaleBand` for the y-axis positions and `scaleLinear` for the bar widths, and renders as an SVG. The data is fetched via D3’s `csv` loader and mapped to rectangles.

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 visualizes the top 10 most populous countries as a bar chart, using rectangle widths proportional to each country’s 2020 population estimate from the United Nations World Population Prospects 2019. The chart intentionally omits axes and labels, presenting only bare colored bars against a plain background. Built with React and D3 v5, the code uses `d3.csv` to load the data, `scaleBand` for the vertical positioning of countries, and `scaleLinear` for the horizontal bar lengths. All bars are rendered as SVG `<rect>` elements within a React component, with each bar’s width derived from the maximum population value.

GGeekboxer

97% 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 to render SVG rectangles. The bars are sized proportionally to each country’s 2020 population, with blue vertical gridlines drawn from the linear scale’s ticks. Data comes from the United Nations World Population Prospects 2019, loaded via d3.csv and processed with scaleBand and scaleLinear. The visualization relies on React hooks (useState, useEffect) to fetch and store the data, while d3.v5 provides the scales and max function.

SSabbir

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

97% 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 population data from the United Nations World Population Prospects 2019. The chart renders with React and D3 v5, where `scaleBand` maps countries to vertical positions and `scaleLinear` maps population values to bar widths. Each bar is drawn as an SVG rectangle within a React component, with data loaded asynchronously via `d3.csv`. The visualization intentionally omits scales, labels, and other chart furniture to present a minimal, data-only view.

TTushar Dangayach

97% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example visualizes the top 10 most populous countries as a "pathetic" bar chart, using horizontal bars with no axes or labels. The visualization loads data from the United Nations World Population Prospects 2019 dataset, which is fetched via the `csv` function in d3. The bars are rendered as SVG rectangles, with each bar’s width proportional to the country’s 2020 population. The layout uses `scaleBand` for the y-axis positioning and `scaleLinear` for the x-axis scaling, with React managing the component state and rendering the final SVG output.

AAllOneeeee

97% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example visualizes the top 10 most populous countries as a minimal bar chart with no axes, using rectangles sized by each country’s estimated 2020 population from the United Nations World Population Prospects 2019 dataset. The chart loads data via d3.csv, scales the bars with d3.scaleBand and d3.scaleLinear, and renders them as SVG elements within a React component using useState and useEffect. The visualization deliberately omits labels, gridlines, and scales, leaving only the raw bars to emphasize the relative magnitudes.

CCem Onal

96% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as a set of horizontal bars, lacking any axes or labels. The bar lengths encode each country’s 2020 population estimate from the United Nations World Population Prospects 2019 dataset. React manages the component state and rendering, while d3.csv loads and parses the data, and d3.scaleBand and d3.scaleLinear map the country names and population values to SVG rectangle positions and widths. The visualization updates asynchronously after the CSV file is fetched.

TTrevor McReynolds

96% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This visualization displays the top 10 most populous countries as a set of horizontal bars, with no axes or labels, emphasizing raw size comparisons. The chart loads population data from a CSV file sourced from the United Nations World Population Prospects 2019. Built with React and D3 v5, it uses `d3.csv` to parse the data, `d3.scaleBand` for the y-axis layout, and `d3.scaleLinear` for bar widths, rendering bars as SVG rectangles. The chart lacks any tick marks or value annotations, presenting a minimal, unadorned view.

MMengwei Li

96% match