Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Refracted bar chart

Public visualization

Refracted bar chart

0 stars0🌍 Public
LLainu Kuruvilla
Last edited Jan 14, 2022
Created on Jan 14, 2022

This example visualizes the top 10 most populous countries as horizontal bars, using population data from the United Nations World Population Prospects 2019, loaded via d3.csv. It renders an SVG chart in React, positioning rectangles with d3.scaleBand for the y-axis countries and d3.scaleLinear for the x-axis population values. The code manually draws tick marks and labels using d3’s scale.ticks, while omitting axes entirely, creating a stripped-down, unfinished aesthetic. The chart updates reactively through React’s useState and useEffect 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.

Comments

Sign in to join the discussion.

MIT Licensed