Fork of Pathetic Bar Chart

100%

Fork of Pathetic Bar Chart

✓ Published0🌍 Public

Last edited Aug 9, 2021

Created on Aug 9, 2021

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.

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

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

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 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 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 bar chart with no axes, using raw rectangle widths to encode population values. The bars render via React components inside an SVG, with scales created using d3.scaleBand and d3.scaleLinear. Data loads asynchronously from a CSV of United Nations World Population Prospects 2019, filtered to the first ten rows after fetching with d3.csv. The chart intentionally omits axes and labels, presenting only the bar lengths as a minimal, "pathetic" representation of population distribution.

HHAORAN CHEN

96% match

Loading thumbnail…

Fork of Pathetic Bar Chart

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.

Kkrandslam

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

96% match