Fork of Pathetic Bar Chart

100%

Fork of Pathetic Bar Chart

✓ Published0🌍 Public

Last edited Aug 23, 2021

Created on Aug 23, 2021

This example shows the top 10 most populous countries as a set of horizontal bars with no axes, labels, or other chart furniture. Using React hooks like `useState` and `useEffect`, it loads United Nations population data from a CSV via `d3.csv`, then renders the bars as SVG `<rect>` elements. The bar widths are scaled with `d3.scaleLinear`, while the vertical positions use `d3.scaleBand`. The chart updates reactively once the data arrives, displaying a simple loading message beforehand.

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 presents the top 10 most populous countries as a bar chart stripped of axes and labels. Using React with hooks, it loads United Nations population data via `d3.csv` and maps it to SVG rectangles scaled by `d3.scaleLinear` for width and `d3.scaleBand` for vertical positioning. The code renders a sparse, bare visualization where bars appear directly in a canvas-like SVG container.

Oownerofthesoul0000@gmail.com

96% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example shows the top 10 most populous countries as a set of horizontal bars without axes, labels, or scales. It loads population data from the United Nations World Population Prospects 2019 CSV file. The code uses React hooks, including `useState` and `useEffect`, to fetch and store the data, then renders SVG rectangles with D3’s `scaleBand` and `scaleLinear` to position and size each bar based on the country name and 2020 population value.

EEthan Pierce

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

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, labels, or other visual encodings beyond the raw rectangle widths. It uses React with hooks (`useState`, `useEffect`) to fetch and load data from the United Nations World Population Prospects 2019 CSV, then renders SVG `<rect>` elements via `d3.scaleBand` for vertical positioning and `d3.scaleLinear` for bar widths. The chart omits all chart furniture, making the bars float against a blank background.

TTobbiedev

96% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as horizontal bars without any axes, using raw SVG rectangles. The app loads United Nations population data from a CSV file, sorts it by 2020 figures, and maps country names to a d3.scaleBand for vertical positioning while a d3.scaleLinear scales bar widths. Built with React hooks (useState, useEffect), it fetches the dataset asynchronously via d3.csv. The chart intentionally lacks labels, ticks, or a scale, presenting only the relative lengths of bars to compare population sizes.

AAndres Perdomo

96% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as a rudimentary bar chart with no axes, using a React component and SVG rendering. It loads United Nations World Population Prospects 2019 data from a CSV via `d3.csv`, slices the first ten rows, and maps populations for 2020 to rectangle widths using `d3.scaleLinear`, while `d3.scaleBand` positions each country vertically. The chart omits axis labels and titles, presenting only the bars against a blank canvas.

KKuladeep

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 or labels, leaving the bars visually raw and unadorned. It loads United Nations population data from a CSV file, parses the 2020 values, and sorts the dataset before rendering. The visualization is built with React, using the `useState` and `useEffect` hooks to manage data loading, while D3’s `scaleBand` and `scaleLinear` map country names and population counts to SVG rectangles. The bars fill the full width and height of the SVG canvas, with no styling or annotations.

Mmuwu16

96% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as a minimalist set of horizontal bars, with no axes or labels, using React to manage state and render SVG rectangles. The code loads United Nations World Population Prospects 2019 data via `d3.csv`, then applies `d3.scaleBand` for the y-axis positioning and `d3.scaleLinear` for the bar widths. It uses `useState` and `useEffect` hooks to asynchronously fetch and slice the data, and `d3.max` to set the x-scale domain.

Kkoubaib ben yedder

95% match