Skip to main content
SimilarExport ZIP
100%

Pathetic Bar Chart

✓ Published1🌍 Public
SSonja Ek
Last edited Jun 1, 2021
Created on May 31, 2021

This example displays a horizontal bar chart of the top ten countries by population for 2020, sourced from a UN population CSV. The chart is bare, containing only colored rectangles with no axes, labels, or annotations. Built with React and D3, the code uses D3’s `csv` loader, `scaleBand`, `scaleLinear`, and `max` functions to map data to SVG rectangles, with React managing the data state and rendering.

AI-generated description

A program that loads in some data and creates a bar chart with no info text.

MIT Licensed

Similar vizzes

Loading thumbnail…

Pathetic Bar Chart

This visualization displays a bar chart of the top ten countries by population for 2020, drawn from a UN population dataset. The chart uses horizontal bars, with each rectangle’s length proportional to the country’s population. Built with React and D3 v7, it fetches the CSV data via `d3.csv`, then uses `d3.scaleBand` for the y-axis (country labels) and `d3.scaleLinear` for the x-axis (population values) to generate the SVG rectangles.

JJakub
96% match
Loading thumbnail…

Pathetic Bar Chart

This example, titled "Pathetic Bar Chart," displays the top ten countries by population from a 2021 UN dataset, loaded via `d3.csv`. It renders a simple horizontal bar chart where each bar's width is proportional to population, using React components to create SVG rectangles. The code employs D3’s `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis, with data mapping handled directly in the React render. The visualization is intentionally minimal, showing raw population values without labels or axes, highlighting the contrast between the data’s significance and the stark presentation.

TTakashi-KK
95% match
Loading thumbnail…

Pathetic Bar Chart

This example displays a horizontal bar chart of the top ten countries by 2020 population from a UN dataset. The bars are rendered as SVG rectangles without labels or axes, appearing intentionally minimal. The code loads data with `d3.csv`, scales it using `scaleBand` and `scaleLinear`, and renders the chart through React components. The visualization relies on React’s `useState` and `useEffect` hooks to asynchronously fetch and update the data, with D3 version 5 handling the scaling logic.

CChira Cezara Victoria
95% match
Loading thumbnail…

Pathetic Bar Chart

This example presents the top 10 most populous countries as a bare bar chart with no axes or labels, rendering each bar as a simple visual proportion. It loads data from a CSV file of the United Nations World Population Prospects 2019 via `d3.csv`, extracts the 2020 population values, and slices the first 10 rows for display. Built with React and D3 v5, the chart uses `d3.csv` and React state management to fetch and store the data, while the lack of axes emphasizes the raw magnitude of population differences.

MMarta
95% match
Loading thumbnail…

Pathetic Bar Chart

This example shows a horizontal bar chart of the top 10 countries by 2020 population, rendered with React and SVG. It loads UN population data from a CSV using the `d3.csv` utility, then maps each country to a `rect` element. The chart uses `d3.scaleBand` for the y-axis country categories and `d3.scaleLinear` for the x-axis population values. The data is fetched inside a `useEffect` hook and stored in state via `useState`, with a loading message displayed before the data arrives.

Wwindwaver
95% match
Loading thumbnail…

Pathetic bar chart

This example shows a horizontal bar chart displaying the populations of the ten most populous countries, using data from the UN Population 2019 CSV file. The bars are rendered as SVG rectangles via React, with the d3.csv function loading the data and d3.scaleBand and d3.scaleLinear mapping country names to vertical positions and population values to horizontal bar widths, respectively. The chart appears sparse, with only bars and no axes or labels, which highlights the raw data in a minimal layout.

TTsaikkari
95% match
Loading thumbnail…

Pathetic Bar Chart

This example visualizes the top 10 most populous countries as a bare-bones bar chart with no axes or labels, using only rectangles scaled by population. It loads data from the United Nations World Population Prospects 2019 via d3.csv, then applies d3.scaleBand for the vertical country bands and d3.scaleLinear for horizontal bar widths. The chart is rendered as SVG within a React component using react and react-dom, with bars drawn for each country in the dataset.

MMuhammet Taha GÖÇER
95% match
Loading thumbnail…

Pathetic Bar Chart

This example presents the top 10 most populous countries as a rudimentary bar chart with no axes or labels, using only filled rectangles scaled by population. Built with React and D3 v5, it loads CSV data from the United Nations World Population Prospects 2019 via `d3.csv`, then maps population values to bar widths using `scaleLinear` and countries to vertical positions with `scaleBand`. Rendered as an SVG, the visualization intentionally omits all chart furniture, emphasizing raw data relationships in a minimal, "pathetic" aesthetic.

AArookie-2020
95% match