Fork of Pathetic Bar Chart

100%

Fork of Pathetic Bar Chart

✓ Published0🌍 Public

Last edited Sep 18, 2023

Created on Sep 18, 2023

This fork of the “Pathetic Bar Chart” renders the top 10 most populous countries from United Nations World Population Prospects 2019 data as a minimal SVG bar chart with no axes. The React app loads the CSV via the `d3.csv` function, filters the first ten rows by the 2020 population column, and maps each country to a rectangle using `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis width. The chart displays only the bars, with no labels or gridlines, leaving the visual comparison to the raw rectangle sizes.

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 fork displays the top 10 most populous countries as a minimal, axis-free bar chart using SVG rectangles. The React app loads United Nations population data from a CSV, sorts by 2020 figures, and maps country names to vertical bands while bar widths correspond to population via d3’s scaleBand and scaleLinear. The code, using d3.v5 and React 16.9, computes maximum population with d3.max and renders each bar as a <rect> element. The chart intentionally omits axes, labels, or other decoration, creating a “pathetic” visual that highlights only the raw ranking.

RRahel Gunaratne

95% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as a rudimentary bar chart with no axes, using a React component and SVG rendering. It loads United Nations World Population Prospects 2019 data from a CSV via `d3.csv`, slices the first ten rows, and maps populations for 2020 to rectangle widths using `d3.scaleLinear`, while `d3.scaleBand` positions each country vertically. The chart omits axis labels and titles, presenting only the bars against a blank canvas.

KKuladeep

95% match

Loading thumbnail…

Fork of Pathetic Bar Chart

A React application renders the top 10 most populous countries from the UN World Population Prospects 2019 dataset as a simple bar chart with no axes. The bars are drawn as SVG rectangles, with country names on the vertical scale and population values mapped to horizontal widths. Using `d3.csv` for data loading, `d3.scaleBand` for the categorical y-axis, and `d3.scaleLinear` with `d3.max` for the continuous x-axis, the visualization displays raw population data without additional chart furniture, keeping the presentation deliberately minimal.

Jjasonamey

95% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This fork of the Pathetic Bar Chart renders the top 10 most populous countries as rectangles with no axes, using React and D3 v5. The chart shows population values for 2020 from the United Nations World Population Prospects 2019 dataset, loaded via `d3.csv`. The code uses `d3.scaleBand` for the y-axis country labels, `d3.scaleLinear` for the horizontal bar lengths, and renders the SVG output through ReactDOM, with a left margin for country names.

Llatifiss

95% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This fork of the "Pathetic Bar Chart" displays the top 10 most populous countries as rects with no axes, using their 2020 population values to set bar widths. It loads data from the United Nations World Population Prospects 2019 CSV, parsing it with the D3 `csv` function. The visualization uses React state to store the loaded data and D3’s `scaleBand` and `scaleLinear` to map country names to vertical positions and population to horizontal lengths. Rendered as SVG, the bars fill the canvas without any labeling or gridlines.

AAlan Vasconcelos

95% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example presents the top 10 most populous countries as a minimal bar chart, entirely devoid of axes, labels, or scale indicators. The visualization, rendered as SVG, computes bar lengths from population values using D3’s `scaleLinear` for the width and `scaleBand` for vertical placement. Data loads asynchronously from a United Nations World Population Prospects 2019 CSV via D3’s `csv` function, then is sliced to the top ten rows. The React `App` component manages state changes, while bars are drawn as simple `<rect>` elements within an SVG canvas.

DDamian Grzanka

95% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as a simple bar chart, with no axes, rendered using SVG in a React application. The code fetches the United Nations World Population Prospects 2019 dataset via the `csv` function from d3.v5, then builds the bars with `scaleBand` and `scaleLinear`. It also draws tick marks and labels using d3’s `ticks()` and scale domains, though no axis components are created, keeping the visualization deliberately minimal.

Jjasonamey

94% match

Loading thumbnail…

Fork of Pathetic Bar Chart

A React-based bar chart displays the top 10 most populous countries from the United Nations World Population Prospects 2019 dataset, with no axes or labels. The chart uses `d3.scaleBand` for vertical country positioning and `d3.scaleLinear` for horizontal bar widths based on 2020 population values. Data is loaded asynchronously via `d3.csv`. The SVG renders each country as a simple `<rect>` element, creating a deliberately minimal, pathetic visualization.

RRennan Henrique Marques de Almeida

94% match