Fork of Pathetic Bar Chart

100%

Fork of Pathetic Bar Chart

✓ Published0🌍 Public

Last edited Jan 28, 2022

Created on Jan 22, 2022

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.

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

Loading thumbnail…

Fork of Pathetic Bar Chart

This example visualizes the top 10 most populous countries as a "pathetic" bar chart with no axes, labels, or gridlines—just raw rectangles scaled by population. The code uses React hooks (`useState`, `useEffect`) to load and manage data, while importing `csv`, `scaleBand`, `scaleLinear`, and `max` from D3 v5 to parse the United Nations World Population Prospects 2019 dataset and compute bar widths. Bars are rendered as SVG `<rect>` elements, with the x-scale mapping population values to pixel widths and the y-scale positioning each country’s bar vertically. The chart intentionally omits all chart furniture, leaving only the visual proportions of the data.

Bbencooper6851

97% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as a lamentably bare bar chart, with no axes or labels, using React for rendering and SVG for output. The chart pulls data from the United Nations World Population Prospects 2019 via a CSV, loading it with `d3.csv` and processing it in a `useEffect` hook. The bar lengths are scaled using `d3.scaleLinear`, while the vertical positions come from `d3.scaleBand`, which also provides the bar heights. The visualization is intentionally minimal, showing only the raw rectangles of varied widths.

SSpuddy2884

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

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 or labels. Using React hooks (useState, useEffect, useCallback) the component loads United Nations World Population Prospects 2019 data via d3.csv, slices the first ten rows, and displays them as SVG rectangles. The chart uses d3.scaleBand for the y-axis positioning and d3.scaleLinear for the x-axis widths, with bars drawn directly in JSX. The visualization intentionally omits axes, ticks, and text to present the data in a minimal, "pathetic" style that emphasizes raw bar lengths without supporting context.

AAnthony Le

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

97% match