Fork of Pathetic Bar Chart

100%

Fork of Pathetic Bar Chart

✓ Published0🌍 Public

Last edited Jan 22, 2022

Created on Jan 21, 2022

This example presents the top 30 most-checked-out items from a Seattle Public Library dataset as a set of horizontal bars, with each rectangle’s width mapping to a numeric checkout month and its vertical position mapping to the checkout count. The chart deliberately omits axes, labels, and scales, emphasizing raw data shapes over readability. Built with React and D3 v5, the code loads CSV data via `d3.csv`, computes scales using `scaleBand` and `scaleLinear`, and renders SVG `<rect>` elements inside a React component, with loading state handled through React hooks.

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 displays the top 10 most populous countries as a set of horizontal bars with no axes, using React hooks to manage state and load data. The visualization fetches a CSV file from a GitHub gist and renders SVG rectangles scaled by age values, which stand in for population. It implements scales with d3.scaleBand for the y-axis positioning and d3.scaleLinear for the x-axis widths. The chart updates asynchronously, showing a loading message before the bars appear once the data arrives via d3.csv.

Ccatalingdiaconu

80% match

Loading thumbnail…

Pathetic bar chart fork

This example renders a horizontal bar chart of the top 10 most populated countries for 2020, using data loaded from a CSV file via D3’s `csv()` utility. React state and the `useEffect` hook manage the asynchronous data fetch, while D3’s `scaleBand` and `scaleLinear` define the y- and x-axes. Each country is represented as an SVG `<rect>` element, with its width proportional to population, and the chart updates reactively once the data arrives.

Ssurikmeetr

80% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example visualizes the top 10 most populous countries as a primitive bar chart with no axes or labels, using horizontal rectangles whose widths encode each country’s 2020 population. The chart focuses solely on raw bar lengths, omitting scales or ticks for a deliberately minimal aesthetic. Built with React (using `useState` and `useEffect`) and D3 v5, it loads CSV data from a GitHub Gist via `d3.csv`, transforms the population column to a number, and slices the first 10 rows. D3’s `scaleBand` positions the bars vertically, while `scaleLinear` maps population values to pixel widths, and React renders each bar as an SVG `<rect>`.

HHaris Abdullah

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

79% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example renders a bar chart of the top 10 most populous countries using React and D3 v5, with bars drawn as SVG rectangles via the `scaleBand` and `scaleLinear` scales. The chart intentionally omits axes and labels, presenting only the raw data values loaded from a CSV file sourced from the United Nations World Population Prospects 2019. Data is fetched asynchronously with `d3.csv` and stored in React state, triggering a re-render once loaded. The bars are positioned using the band scale’s `yScale` and sized with the linear scale’s `xScale`, with no interactive elements or transitions.

Bbencooper6851

79% match

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

79% match

Loading thumbnail…

Fork of Pathetic Bar Chart

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.

Ssultanmirzapydev

79% match

Loading thumbnail…

Fork of Fork of Fork of ICE-6: Rendering Marks and Channels with React & D3

This visualization presents a horizontal bar chart of bestselling books information, ranking eleven items by population metrics from an external CSV dataset. Built with React and D3 v5, the chart uses `scaleBand` and `scaleLinear` to map categorical labels and numeric values to SVG rectangles. The code leverages React hooks (`useState`, `useEffect`) for data loading and rendering, while D3 utilities handle CSV parsing, scales, axes, and tick generation. The SVG output includes orange gridlines and labeled axes, with steelblue bars sized proportionally to each entry's population value.

AArefa Patwary

79% match