Fork of Pathetic Bar Chart

100%

Fork of Pathetic Bar Chart

✓ Published0🌍 Public

Last edited Dec 18, 2021

Created on Dec 17, 2021

This example displays the top five most populous countries as a rudimentary bar chart with no axes or labels. The visualization uses React to render an SVG, with React hooks managing state and data loading. The code leverages D3 v5's `scaleBand` for the categorical y-axis positioning and `scaleLinear` for the quantitative x-axis scaling, pulling data from the United Nations World Population Prospects 2019 dataset. Bars are drawn as SVG `<rect>` elements, positioned using the computed scales.

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 five most populous countries as a set of bare rectangular bars, with no axes or labels, loaded from the United Nations World Population Prospects 2019 dataset. Using React state and effects, it fetches the CSV data with `d3.csv`, truncates it to five rows, and renders the bars as SVG `<rect>` elements. The bar widths are scaled by population via `scaleLinear`, while the vertical positions use `scaleBand`, producing a minimal, unadorned chart.

LLucas Fiorini

95% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This visualization displays the top 10 most populous countries as a simple bar chart with no axes or labels. The bars are rendered as SVG rectangles using React, with heights determined by a d3.scaleBand and widths by a d3.scaleLinear. Data comes from the United Nations World Population Prospects 2019 dataset, loaded via d3.csv. The code uses React hooks like useEffect and useState to fetch and store the data, then maps each country to a colored rectangle in the SVG.

Aamiteshwarr

94% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as a bar chart, deliberately omitting axes to create a "pathetic" minimalist aesthetic. The visualization uses React hooks to manage state and fetch data, while D3 v5’s `scaleBand` and `scaleLinear` handle positioning. Bars are drawn as SVG `<rect>` elements, with country labels and tick marks generated from the scales. The data comes from the United Nations World Population Prospects 2019, loaded via `d3.csv`. The chart intentionally lacks a functional x-axis, rendering only tick lines and values for a raw, unconventional look.

BBhavesh Choudhary

94% 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 to render SVG rectangles. The bars are sized proportionally to each country’s 2020 population, with blue vertical gridlines drawn from the linear scale’s ticks. Data comes from the United Nations World Population Prospects 2019, loaded via d3.csv and processed with scaleBand and scaleLinear. The visualization relies on React hooks (useState, useEffect) to fetch and store the data, while d3.v5 provides the scales and max function.

SSabbir

94% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as a bare bar chart with no axes or labels, rendered as SVG rectangles. The React component fetches United Nations World Population Prospects 2019 data via d3.csv, then uses d3.scaleBand for the y-axis positioning and d3.scaleLinear with d3.max to map population values to bar widths. The visualization relies on React hooks—useState and useEffect—to load and slice the data, while d3.v5 and React 16.9 render the chart through ReactDOM.

JJean David

94% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example presents the top 10 most populous countries as a bar chart with no axes, rendering bars as plain rectangles. Built with React and D3 v5, it loads population data from the United Nations World Population Prospects 2019 via `d3.csv`, scales the bar widths with `scaleLinear` and positions them with `scaleBand`. The SVG output uses React state and hooks to fetch and display the data, with a red grid line attempted inside the tick mapping.

EEdgar Alves

94% match

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 or labels, creating a starkly minimal "pathetic" chart. Using React and d3.v5, it loads population data from the United Nations World Population Prospects 2019, then applies `scaleBand` for the y-axis and `scaleLinear` for the x-axis to size each rectangle. The SVG rendering shows bar lengths proportional to 2020 population values, with React managing the state and rendering.

BBjørnar Dalsnes

94% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 20 most populous countries as a bar chart, with horizontal bars rendered as SVG rectangles. It deliberately omits axes, instead using gridlines and tick labels from `scaleLinear` and `scaleBand` to convey values. The chart is built with React functional components and hooks, while D3 v5 handles data loading via `csv`, scaling, and tick generation. Population figures come from the United Nations World Population Prospects 2019 dataset.

Wweny1109

94% match