Fork of Pathetic Bar Chart

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

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

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

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

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

Fork of Pathetic Bar Chart

This example presents the top 10 most populous countries as a bar chart with no axes, rendering bars as plain rectangles. Built with React and D3 v5, it loads population data from the United Nations World Population Prospects 2019 via `d3.csv`, scales the bar widths with `scaleLinear` and positions them with `scaleBand`. The SVG output uses React state and hooks to fetch and display the data, with a red grid line attempted inside the tick mapping.

EEdgar Alves

Fork of Pathetic Bar Chart

This example displays a bar chart of the top 10 most populous countries, using raw rectangles with no axes or labels. Built with React and D3 v5, it loads population data from the United Nations World Population Prospects 2019 via `d3.csv`, sorts the first ten rows, and maps values using `scaleBand` and `scaleLinear`. The visualization renders as SVG, with bar widths proportional to 2020 population estimates, though the geometric primitives are intentionally left bare.

JJean David

Fork of Fork of Pathetic Bar Chart

This chart displays the top 10 most populous countries as horizontal bars, with bar lengths proportional to each country’s 2020 population. The visualization omits axes, labels, or tick marks, making it deliberately minimal. Built with React and D3 v5, the code uses `scaleBand` for vertical positioning and `scaleLinear` for bar widths, rendering SVG rectangles. Data loads from a United Nations World Population Prospects 2019 CSV via D3’s `csv` function, and the view is updated through React state.

AAbin