Fork of Pathetic Bar Chart

100%

Fork of Pathetic Bar Chart

✓ Published0🌍 Public

Last edited Jul 17, 2021

Created on Jul 17, 2021

This example visualizes the top 10 most populous countries as a pathetic bar chart, displaying horizontal bars without any axes or labels. Using React with hooks, the code loads UN World Population Prospects 2019 data via `d3.csv`, then renders SVG rectangles scaled with `scaleBand` and `scaleLinear`. The chart computes bar widths from each country’s 2020 population and positions them vertically with `yScale`. React’s `useState` and `useEffect` manage the asynchronous data loading, while `ReactDOM.render` mounts the visualization.

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 example renders the top 10 most populous countries as a pathetic bar chart with no axes, using React to manage state and SVG for drawing. The code loads UN World Population Prospects 2019 data via `d3.csv`, then maps it with `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis. Each country appears as a plain `<rect>` element, with its width proportional to population, and a loading indicator displays until the data arrives.

Ddiegobrivo

97% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example visualizes the top 10 most populous countries as a "pathetic" bar chart with no axes, labels, or gridlines—just raw rectangles scaled by population. The code uses React hooks (`useState`, `useEffect`) to load and manage data, while importing `csv`, `scaleBand`, `scaleLinear`, and `max` from D3 v5 to parse the United Nations World Population Prospects 2019 dataset and compute bar widths. Bars are rendered as SVG `<rect>` elements, with the x-scale mapping population values to pixel widths and the y-scale positioning each country’s bar vertically. The chart intentionally omits all chart furniture, leaving only the visual proportions of the data.

Bbencooper6851

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

97% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the ten most populous countries as a pathetic bar chart with no axes, using React to render SVG rectangles. The data comes from the United Nations World Population Prospects 2019, loaded via the `d3.csv` function. A `scaleBand` positions each country vertically, while a `scaleLinear` maps population values to rectangle widths. The chart uses `d3.v5` and React hooks like `useState` and `useEffect` to fetch and store the data, showing a simple loading message until the CSV is ready.

DDiego Mariano

97% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as a series of horizontal rectangles, with no axes or labels, using a “pathetic” bar chart style. The chart loads UN World Population Prospects 2019 data via `d3.csv`, then uses React hooks (`useState`, `useEffect`) to manage state and fetch the data. It renders SVG rectangles scaled with `d3.scaleBand` for the y-axis positioning and `d3.scaleLinear` for the x-axis widths, based on the 2020 population values.

SSayyed Arib Hussain

97% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example visualizes the top 10 most populous countries as horizontal bars with no axes, using React and D3 v5 to fetch and render the data. It displays United Nations World Population Prospects 2019 data by mapping country names to a `d3.scaleBand` y-axis and population values to a `d3.scaleLinear` x-axis. The SVG rectangles are rendered directly in JSX, with bar widths proportional to each country’s 2020 population estimate. The code uses `d3.csv` to load the dataset and React hooks (`useState`, `useEffect`) to manage the asynchronous data loading.

Mmrthnkwn

97% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example renders the top 10 most populous countries as a pathetic bar chart with no axes, using React to manage state and D3 v5’s `scaleBand` and `scaleLinear` for positioning and sizing. Each country’s population from the United Nations World Population Prospects 2019 dataset is represented as a horizontal bar, loaded via `d3.csv`. The SVG rectangles are generated through React’s JSX, with height determined by `yScale.bandwidth()` and width scaled to the maximum population value.

SSam

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

97% match