Fork of Pathetic Bar Chart

Fork of Pathetic Bar Chart

This example visualizes the top 10 most populous countries as a bar chart, using rectangle widths proportional to each country’s 2020 population estimate from the United Nations World Population Prospects 2019. The chart intentionally omits axes and labels, presenting only bare colored bars against a plain background. Built with React and D3 v5, the code uses `d3.csv` to load the data, `scaleBand` for the vertical positioning of countries, and `scaleLinear` for the horizontal bar lengths. All bars are rendered as SVG `<rect>` elements within a React component, with each bar’s width derived from the maximum population value.

GGeekboxer

Fork of Pathetic Bar Chart

This example visualizes the top 10 most populous countries as a bar chart, with each bar’s length representing the 2020 population estimate. Drawn using React and D3 v5, the SVG renders rectangles positioned via `scaleBand` along the y-axis and scaled by `scaleLinear` on the x-axis. No axes are drawn; the chart intentionally appears minimal. Data comes from the United Nations World Population Prospects 2019, loaded as CSV and sliced to the first ten rows.

Hharika-1929

Fork of Pathetic Bar Chart

This example visualizes the top 10 most populous countries as a bar chart with no axes, using raw rectangle widths to encode population values. The bars render via React components inside an SVG, with scales created using d3.scaleBand and d3.scaleLinear. Data loads asynchronously from a CSV of United Nations World Population Prospects 2019, filtered to the first ten rows after fetching with d3.csv. The chart intentionally omits axes and labels, presenting only the bar lengths as a minimal, "pathetic" representation of population distribution.

HHAORAN CHEN

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as a minimal bar chart with no axes, using rectangles positioned by a d3.scaleBand and scaled by d3.scaleLinear. The data comes from the United Nations World Population Prospects 2019 CSV, loaded via d3.csv. Built with React, it renders SVG elements that include vertical gridlines generated from d3.scaleLinear ticks, though no axis labels or tick text appear.

Ssimontoblad

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 example displays the top 10 most populous countries as a bar chart with no axes, using React to render SVG rectangles. The bars are sized proportionally to each country’s 2020 population, with blue vertical gridlines drawn from the linear scale’s ticks. Data comes from the United Nations World Population Prospects 2019, loaded via d3.csv and processed with scaleBand and scaleLinear. The visualization relies on React hooks (useState, useEffect) to fetch and store the data, while d3.v5 provides the scales and max function.

SSabbir

Fork of Pathetic Bar Chart

This visualization presents the top 10 most populous countries as horizontal bars without any axes, making the chart intentionally minimal. The bars are drawn using SVG rectangles whose lengths correspond to each country's 2020 population from the United Nations World Population Prospects 2019 dataset. The code uses React for state management and rendering, alongside D3 v5 functions like `scaleBand` for y-axis positioning and `scaleLinear` for width scaling, loading data via `d3.csv`.

Yyingzhe-z

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