Skip to main content
SimilarExport ZIP
100%

Fork of Pathetic Bar Chart

✓ Published0🌍 Public
Jjcar@vt.edu
Last edited Jun 13, 2024
Created on Jun 13, 2024
Forked from Pathetic Bar Chart

This example displays the top 10 most populous countries as a rudimentary bar chart, using only rectangles with no axes or labels for context. The chart loads population data from the United Nations World Population Prospects 2019 dataset via a CSV URL. Built with React and D3 v5, it uses `csv` to fetch and parse the data, then `scaleBand` and `scaleLinear` to map country names and population values to the SVG canvas dimensions. The visualization updates the displayed bars once the data is loaded, initially showing a “Loading…” message.

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 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
96% match
Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries in 2020 as a bar chart stripped of axes and labels, arranged vertically with bar lengths proportional to population. It loads data from the United Nations World Population Prospects 2019 CSV via `d3.csv`, formats population values, and slices the first ten rows. React manages the loading state and renders SVG rectangles using `scaleBand` for the y-axis positions and `scaleLinear` for bar widths inside a margin-based group.

LLaura Brown
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 a bar chart of the top 10 most populous countries, using raw rectangles with no axes or labels. Built with React and D3 v5, it loads population data from the United Nations World Population Prospects 2019 via `d3.csv`, sorts the first ten rows, and maps values using `scaleBand` and `scaleLinear`. The visualization renders as SVG, with bar widths proportional to 2020 population estimates, though the geometric primitives are intentionally left bare.

JJean David
96% match
Loading thumbnail…

Fork of Pathetic Bar Chart

This example visualizes the top 10 most populous countries as a bar chart without axes or labels, rendering each country as a horizontal rectangle scaled by its 2020 population. Built with React and D3 v5, it uses `d3.csv` to load United Nations World Population Prospects 2019 data, then applies `scaleBand` and `scaleLinear` to map countries and population values to screen coordinates. The visualization displays rectangles in an SVG container, with the loading state shown as plain text until data arrives.

RReymond Mesuga
96% match
Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as a horizontal bar chart with no axes, using React and D3.v5. Population values from the United Nations World Population Prospects 2019 dataset are loaded via `d3.csv` and rendered as SVG rectangles. The code uses `scaleBand` for the y-axis positioning of country names and `scaleLinear` for bar widths, with bars colored by the default fill. The chart updates asynchronously, showing a loading message until data arrives.

TToooooooT
96% match
Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as a series of rectangles that scale horizontally with population size, using no axes or labels. The chart is built with React and D3.js (d3.scaleBand and d3.scaleLinear) and renders as SVG. Data comes from the United Nations World Population Prospects 2019, loaded via d3.csv. Initially, the app shows a loading message until the CSV is fetched.

Bbradpickering
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 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
96% match