Fork of Pathetic Bar Chart

Fork of Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as a bar chart with no axes, using React hooks and D3 v5. It loads population data from a CSV file hosted on GitHub, sourced from the United Nations World Population Prospects 2019. The visualization uses `d3.csv` to fetch and parse data, `d3.scaleBand` for the y-axis positioning, and `d3.scaleLinear` for the x-axis scaling. Rendered as SVG, it includes gridlines and tick labels from `xScale.ticks()`, with bars drawn as `<rect>` elements and country names as `<text>` labels.

MMohammed Banani | MbDev

Fork of Pathetic Bar Chart

This fork of the "Pathetic Bar Chart" displays the top 10 most populous countries as rects with no axes, using their 2020 population values to set bar widths. It loads data from the United Nations World Population Prospects 2019 CSV, parsing it with the D3 `csv` function. The visualization uses React state to store the loaded data and D3’s `scaleBand` and `scaleLinear` to map country names to vertical positions and population to horizontal lengths. Rendered as SVG, the bars fill the canvas without any labeling or gridlines.

AAlan Vasconcelos

Fork of Pathetic Bar Chart

This fork of the Pathetic Bar Chart renders the top 10 most populous countries as rectangles with no axes, using React and D3 v5. The chart shows population values for 2020 from the United Nations World Population Prospects 2019 dataset, loaded via `d3.csv`. The code uses `d3.scaleBand` for the y-axis country labels, `d3.scaleLinear` for the horizontal bar lengths, and renders the SVG output through ReactDOM, with a left margin for country names.

Llatifiss

Fork of Pathetic Bar Chart

A fork of the Pathetic Bar Chart displays the top 10 most populous countries as horizontal bars with no axes or labels, using population data from the United Nations World Population Prospects 2019. The chart renders SVG rectangles via React, with scales created using `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis, and loads the CSV data using `d3.csv`. Loading text appears while the data is fetched asynchronously.

AAshford

Fork of Pathetic Bar Chart

A fork of the Pathetic Bar Chart displays the top 10 most populous countries for 2020 as horizontal bars, using plain SVG rectangles with no axes. The chart renders React components that leverage D3 v5’s `scaleBand` for categorical positioning of countries and `scaleLinear` for population widths, while generating tick marks via `xScale.ticks()`. Data is loaded asynchronously from a United Nations World Population Prospects 2019 CSV, filtered to the first ten rows, and visualized with a left margin for country labels.

Zzyniax

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as horizontal bars with no axes, using a React component that loads data via `useData` and `d3.csv`. It renders an SVG with `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis, drawing tick lines, labels, and rectangles. The data comes from the United Nations World Population Prospects 2019, filtered to the first ten rows. Loading state is shown with a "Loading..." message.

Ssoo

Fork of Pathetic Bar Chart

This fork of a "pathetic bar chart" displays the top 10 most populous countries as horizontal bars with no axes or labels, ranked by population. The visualization uses React to manage state and render SVG rectangles, with D3 v5’s `csv` for data loading and `scaleBand`/`scaleLinear` for mapping country names and population values to pixel coordinates. Data comes from the United Nations World Population Prospects 2019 dataset.

VVahe Abovyan

Fork of Pathetic Bar Chart

This fork of the "Pathetic Bar Chart" displays the ten most populous countries as horizontal bars without any axes, using React to manage state and D3.js to load and scale the data. It fetches the 2019 UN World Population Prospects CSV, parses it with `d3.csv`, and renders the bars as SVG `rect` elements. The `scaleBand` maps country names to x-positions, while a reversed `scaleLinear` maps population values to bar heights, with the y-axis inverted for visual effect.

FFlorent Eeckeman