Fork of Pathetic Bar Chart

100%

Fork of Pathetic Bar Chart

✓ Published0🌍 Public

Last edited Oct 12, 2023

Created on Oct 12, 2023

This visualization presents the top 10 most populous countries as a "pathetic" bar chart, intentionally omitting axes and labels to strip the data down to its raw visual form. Using D3's `scaleBand` and `scaleLinear`, the chart maps country names to vertical bands and population values to horizontal bar widths within an SVG. The data comes from the United Nations World Population Prospects 2019, loaded via D3's `csv` function. Built with React, the chart updates state asynchronously, rendering a `<pre>` loading message until the data arrives, then displaying the SVG with filled 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 "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 displays the top 10 most populous countries as a bar chart, deliberately omitting axes to create a "pathetic" minimalist aesthetic. The visualization uses React hooks to manage state and fetch data, while D3 v5’s `scaleBand` and `scaleLinear` handle positioning. Bars are drawn as SVG `<rect>` elements, with country labels and tick marks generated from the scales. The data comes from the United Nations World Population Prospects 2019, loaded via `d3.csv`. The chart intentionally lacks a functional x-axis, rendering only tick lines and values for a raw, unconventional look.

BBhavesh Choudhary

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

96% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This visualization presents the top 10 most populous countries as a bare bar chart, intentionally omitting axes and labels. The chart renders bars using React components that call D3 scales, with `scaleBand` positioning the countries vertically and `scaleLinear` mapping population values to bar widths. The SVG is drawn with simple `rect` elements, while gridlines are attempted using D3’s tick values. Data comes from the United Nations World Population Prospects 2019, loaded as a CSV and filtered to the first ten rows. The code demonstrates a minimal, almost playful approach to chart construction.

AAndres Perdomo

96% match

Loading thumbnail…

Fork of Pathetic Bar Chart

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.

MMohammed Banani | MbDev

96% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example visualizes the top 10 most populous countries as a "pathetic" bar chart, displaying horizontal bars without any axes or labels. The bar lengths encode each country’s 2020 population, taken from the United Nations World Population Prospects 2019 dataset, which is loaded via `d3.csv`. The visualization uses React’s `useState` and `useEffect` hooks to fetch and store the data, then renders SVG rectangles with `d3.scaleBand` for the y-axis positions and `d3.scaleLinear` for the x-axis widths. The chart intentionally omits tick marks, gridlines, and value text, leaving only unsorted, unadorned bars.

AArkadiusz Zabicki

96% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This visualization displays the top 10 most populous countries as a pathetic bar chart with no axes, using horizontal bars scaled by 2020 population data from the United Nations World Population Prospects 2019. The app is built with React hooks (useState, useEffect) and d3.v5’s scaleBand and scaleLinear for layout, rendering SVG rectangles. Data is loaded asynchronously via d3.csv, then sorted and sliced to the first ten rows. The chart intentionally omits axes, labels, or value marks, emphasizing raw bar lengths as the sole encoding of population magnitude.

IIan Goodman

96% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This visualization displays the top 10 most populous countries as a series of horizontal bars without any axes, making it deliberately minimal or “pathetic.” The bar lengths encode each country’s 2020 population from the United Nations World Population Prospects 2019 dataset. Built with React and D3 v5, the code uses `d3.csv` to load the data, `d3.scaleBand` for the y-axis categories, and `d3.scaleLinear` for the x-axis values, rendering SVG rectangles via React’s `map` function.

AAndrew-Sem

96% match