Fork of Pathetic Bar Chart

100%

Fork of Pathetic Bar Chart

✓ Published0🌍 Public

Last edited Mar 15, 2021

Created on Mar 15, 2021

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.

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

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

96% match

Loading thumbnail…

Fork of Pathetic Bar Chart

A pathetic bar chart displays the ten most populous countries from the United Nations World Population Prospects 2019 dataset, rendered as horizontal rectangles without any axes or labels. Using d3.csv to load the data, d3.scaleBand and d3.scaleLinear map country names and populations to SVG rectangle positions and widths within a React component. The visualization intentionally omits visual encoding cues like ticks or gridlines, leaving only the raw bars to compare population magnitudes.

KKonJoDot

96% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the ten most populous countries as a pathetic bar chart with no axes, using React to render SVG rectangles. The data comes from the United Nations World Population Prospects 2019, loaded via the `d3.csv` function. A `scaleBand` positions each country vertically, while a `scaleLinear` maps population values to rectangle widths. The chart uses `d3.v5` and React hooks like `useState` and `useEffect` to fetch and store the data, showing a simple loading message until the CSV is ready.

DDiego Mariano

96% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example renders the top 10 most populous countries as a pathetic bar chart with no axes, using React to manage state and SVG for drawing. The code loads UN World Population Prospects 2019 data via `d3.csv`, then maps it with `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis. Each country appears as a plain `<rect>` element, with its width proportional to population, and a loading indicator displays until the data arrives.

Ddiegobrivo

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

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 Pathetic Bar Chart

This example renders the top 10 most populous countries as a pathetic bar chart with no axes, using React to manage state and D3 v5’s `scaleBand` and `scaleLinear` for positioning and sizing. Each country’s population from the United Nations World Population Prospects 2019 dataset is represented as a horizontal bar, loaded via `d3.csv`. The SVG rectangles are generated through React’s JSX, with height determined by `yScale.bandwidth()` and width scaled to the maximum population value.

SSam

96% match