Fork of Pathetic Bar Chart

100%

Fork of Pathetic Bar Chart

✓ Published0🌍 Public

Last edited Feb 11, 2025

Created on Feb 11, 2025

This is a bar chart visualization of the top 10 most populous countries, displayed without axes and using a deliberately simple design. It is built with React and D3 v5, rendering SVG elements through React components. The chart pulls data from the UN World Population Prospects 2019 dataset, scales the x-axis linearly with `d3.scaleLinear` and the y-axis with `d3.scaleBand`, and constructs the bars and axis labels using custom React functions.

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 chart visualizes the top 10 most populous countries using a "pathetic" bar chart—bars extend horizontally from a left baseline without axes or ticks, though gridlines and x-axis labels are drawn. Built in React with D3 v5, it loads UN World Population Prospects 2019 data via `d3.csv`, scales the x-axis with `d3.scaleLinear` and y-axis with `d3.scaleBand`, and renders each bar as an SVG `<rect>`.

SSan

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

96% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as a bar chart, deliberately omitting axes to create a "pathetic" minimalist aesthetic. The visualization uses React hooks to manage state and fetch data, while D3 v5’s `scaleBand` and `scaleLinear` handle positioning. Bars are drawn as SVG `<rect>` elements, with country labels and tick marks generated from the scales. The data comes from the United Nations World Population Prospects 2019, loaded via `d3.csv`. The chart intentionally lacks a functional x-axis, rendering only tick lines and values for a raw, unconventional look.

BBhavesh Choudhary

96% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as a bar chart with no axes, using population data from the United Nations World Population Prospects 2019. The chart renders with React and D3 v5, where `scaleBand` maps countries to vertical positions and `scaleLinear` maps population values to bar widths. Each bar is drawn as an SVG rectangle within a React component, with data loaded asynchronously via `d3.csv`. The visualization intentionally omits scales, labels, and other chart furniture to present a minimal, data-only view.

TTushar Dangayach

96% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This visualization displays the top 10 most populous countries as a simple bar chart with no axes or labels. The bars are rendered as SVG rectangles using React, with heights determined by a d3.scaleBand and widths by a d3.scaleLinear. Data comes from the United Nations World Population Prospects 2019 dataset, loaded via d3.csv. The code uses React hooks like useEffect and useState to fetch and store the data, then maps each country to a colored rectangle in the SVG.

Aamiteshwarr

96% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as a static, axis-less bar chart, using React for the user interface and D3.js for data loading and scaling. It fetches population data from the United Nations World Population Prospects 2019 via D3’s `csv` function, then maps the values using `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. The SVG rendering omits the axes, leaving only the bars and tick labels, which are generated from `xScale.ticks()`.

AAliaksandr

96% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example visualizes the top 10 most populous countries as a bar chart using React for component structure and D3 v5 scales for data mapping. The application fetches UN World Population Prospects 2019 data via d3.csv, then renders SVG rectangles whose widths correspond to each nation’s 2020 population estimate. The chart deliberately omits axis labels or tick styling, presenting only raw red tick lines and country names through custom React components like AxisBottom, AxisLeft, and Marks, with y-axis positioning using scaleBand and x-values scaled via scaleLinear.

Pplusbeauxjours

96% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example visualizes the top 10 most populous countries using a bar chart with no axes, rendered as SVG elements. It loads population data from the United Nations World Population Prospects 2019 dataset via `d3.csv`, then uses React’s `useState` and `useEffect` hooks to fetch and store the data. The chart maps each country to a rectangle, sizing bars with `scaleBand` and `scaleLinear` from d3.v5, while the overall layout is managed through React and ReactDOM.

TTchea JiaWei

96% match