Fork of Pathetic Bar Chart2

100%

Fork of Pathetic Bar Chart2

✓ Published0🌍 Public

Last edited Jun 16, 2021

Created on Jun 16, 2021

This example displays the top 10 most populous countries as a horizontal bar chart, with no axes or labels, using country names as categorical bands and population counts mapped to bar widths. The code loads UN World Population Prospects 2019 data via `d3.csv`, parses the 2020 population column, and slices the first ten rows. It renders SVG rectangles using React components and D3 scales: `scaleBand` for the y-axis positioning and `scaleLinear` for the x-axis extent, with dimensions fixed at 960 by 500 pixels.

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 horizontal bars with no axes, making the ranking immediately visible through bar lengths. Built with React and D3 v5, it loads United Nations World Population Prospects 2019 data via `d3.csv`, parses the 2020 population column, and slices the first 10 rows. The SVG rendering uses `d3.scaleBand` for the y-axis country positions and `d3.scaleLinear` for the x-axis population widths, with each bar drawn as a `<rect>` element.

AAbin

97% match

Loading thumbnail…

Fork of Pathetic Bar Chart

AAbin

97% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries in 2020 as a bar chart stripped of axes and labels, arranged vertically with bar lengths proportional to population. It loads data from the United Nations World Population Prospects 2019 CSV via `d3.csv`, formats population values, and slices the first ten rows. React manages the loading state and renders SVG rectangles using `scaleBand` for the y-axis positions and `scaleLinear` for bar widths inside a margin-based group.

LLaura Brown

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

96% match

Loading thumbnail…

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

96% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as a minimalist bar chart with no axes, using horizontal bars whose lengths encode population values. Built with React and D3 v5, the code loads UN World Population Prospects 2019 data via `d3.csv`, then constructs scales with `scaleBand` and `scaleLinear` to map countries and populations to SVG rectangles. The chart renders purely through React state management and JSX, with each bar’s width derived from the population maximum.

MMarcusABR

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

96% match

Loading thumbnail…

Fork of Fork of Pathetic Bar Chart

This example shows the top 10 most populous countries as a horizontal bar chart with no visible axes, using React and D3 v5. It loads UN World Population Prospects 2019 data via `d3.csv`, sorts and slices the first ten rows, and renders SVG rectangles with `scaleBand` for the y-axis and `scaleLinear` for the x-axis. The code defines custom React components for the bottom axis and left axis labels, though the left axis is omitted from the final rendering. The chart displays population values encoded as bar widths, with red tick lines on the bottom axis.

Pplusbeauxjours

96% match