Fork of Pathetic Bar Chart

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as a bare bar chart with no axes, using rectangular bars whose widths encode each country’s 2020 population. It loads data from the UN World Population Prospects 2019 via `d3.csv` and sorts the first ten rows. The visualization uses React’s `useState` and `useEffect` to fetch and store data, then renders SVG rectangles positioned with `d3.scaleBand` on the y-axis and scaled with `d3.scaleLinear` based on the maximum population. The chart lacks labels, tick marks, or any annotation, emphasizing its intentionally minimal design.

KKNJour

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as a bare bar chart with no axes or labels, rendered as SVG rectangles. The React component fetches United Nations World Population Prospects 2019 data via d3.csv, then uses d3.scaleBand for the y-axis positioning and d3.scaleLinear with d3.max to map population values to bar widths. The visualization relies on React hooks—useState and useEffect—to load and slice the data, while d3.v5 and React 16.9 render the chart through ReactDOM.

JJean David

Fork of Pathetic Bar Chart

This chart displays the top 10 most populous countries in 2020 as horizontal bars, sorted by population, without any axes or labels to indicate values. It uses React’s `useState` and `useEffect` hooks to fetch and process data from the United Nations World Population Prospects 2019 CSV file, then loads it with `d3.csv`. The SVG rendering maps each country’s population to a bar width using `d3.scaleLinear`, while `d3.scaleBand` positions the bars vertically. The visualization intentionally omits axes, making it a “pathetic” bar chart that prioritizes raw shape over quantitative precision.

LLainu Kuruvilla

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as a bar chart with no axes, using React hooks to manage state and effects. The code loads UN World Population Prospects 2019 data via `d3.csv`, parses the 2020 population column, and renders SVG rectangles scaled by `d3.scaleLinear` for width and `d3.scaleBand` for vertical positioning. React handles rendering updates, while D3 v5 provides data loading and scaling utilities.

CCYBERFENRIR

Fork of Pathetic Bar Chart

This visualization displays the top 10 most populous countries as a bare bar chart with no axes, using rectangular bars proportional to each country’s 2020 population. The chart loads data from the United Nations World Population Prospects 2019 CSV, then uses `d3.csv`, `scaleBand`, `scaleLinear`, and `max` to map country names and population values to SVG rectangles. React manages the component state and rendering, while D3 handles the data processing and scales. The bars render in an SVG canvas with no labels or gridlines, focusing purely on the relative population sizes.

Aavneet12284

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries in 2020 as a bare bar chart without any axes, labels, or scales shown. The data comes from the United Nations World Population Prospects 2019 dataset, loaded via `d3.csv`. The visualization uses React with `useState` and `useEffect` hooks to fetch and store the data, then renders SVG rectangles positioned with `d3.scaleBand` and sized by `d3.scaleLinear`. Red gridlines are drawn at each tick of the x-axis using D3’s `ticks()`, though no tick labels appear.

Eeleshaky

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

Fork of Pathetic Bar Chart

This visualization displays the top 10 most populous countries from the United Nations World Population Prospects 2019 dataset as a horizontal bar chart. Each country is represented by a rectangle whose width corresponds to its 2020 population. The code uses React hooks (useState, useEffect, useCallback) to fetch and process the CSV data, while d3's scaleBand and scaleLinear handle the positioning and scaling. The chart renders as SVG, with React generating the rectangle elements directly from the mapped data.

HHarsh Vijay