Fork of UN Bar Chart

100%

Fork of UN Bar Chart

✓ Published0🌍 Public

Last edited Sep 11, 2022

Created on Sep 11, 2022

This example displays the top 10 most populous countries as horizontal bars, sized by their 2020 population estimates from the United Nations World Population Prospects 2019 dataset. The bars are rendered as SVG rectangles using React components, with d3.scaleLinear mapping population counts to bar widths and d3.scaleBand positioning each country along the vertical axis. Gridlines are drawn using d3’s scale ticks. The chart deliberately omits axes and labels, making it a minimal, self-deprecating visualization.

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 Fork of Stylized Bar Chart

This example shows the top 10 most populous countries as horizontal bars, ranked by their 2020 population estimates from the United Nations World Population Prospects 2019 dataset. Built with React and rendered as SVG, the chart uses d3.scaleBand for the categorical y-axis, d3.scaleLinear for the continuous x-axis, and custom React components (AxisBottom, AxisLeft, Marks) to draw the grid lines, tick labels, and rectangles. Hovering over a bar reveals the population value via an SVG <title> tooltip.

HHaileabGH

94% match

Loading thumbnail…

Fork of Stylized Bar Chart

This example displays the top 10 most populous countries as horizontal bars, using population data from the United Nations World Population Prospects 2019. The chart loads data via d3.csv and maps it with scaleBand and scaleLinear, rendering SVG rectangles for each bar. React components structure the visualization, while d3.format converts tick labels from billions to a compact "B" suffix. A native SVG <title> element provides hover tooltips showing the exact population value.

PPijush Barman

93% match

Loading thumbnail…

Fork of Bar Chart

This fork renders the top 10 most populous countries from the United Nations World Population Prospects 2019 dataset as a bare SVG bar chart with no axes or labels. The React app uses d3.csv to load the data, d3.scaleBand for the y-axis category positions, and d3.scaleLinear for the x-axis bar lengths based on the 2020 population column. The chart displays only the rectangles, omitting all chart furniture for a minimal presentation.

Rrmgoldberg24

93% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as a set of horizontal bars without axes or labels, emphasizing raw bar lengths. The visualization uses React with hooks to fetch and parse United Nations World Population Prospects 2019 data via d3.csv, slicing the first 10 records. It renders SVG rectangles, positioning them with d3.scaleBand for the categorical country axis and sizing widths with d3.scaleLinear for population values. The code includes grid lines with tick marks from xScale.ticks(), though tick text is positioned incorrectly, and the chart shows only the bars and gridlines.

UUtsav Khatu

93% match

Loading thumbnail…

Fork of Stylized Bar Chart

This example displays the top 10 most populous countries as horizontal bars, with country names on the y-axis and population counts on the x-axis. It uses React components and d3.scaleBand and d3.scaleLinear to map data from the United Nations World Population Prospects 2019 dataset. The SVG rendering includes d3.csv for data loading, custom tick formatting with d3.format, and tooltips via SVG title elements.

MMercPai

93% match

Loading thumbnail…

Fork of Stylized Bar Chart

This example shows the top 10 most populous countries as a horizontal bar chart, based on United Nations World Population Prospects 2019 data. React components render SVG axes and marks using d3.scaleBand and d3.scaleLinear, with d3.format for tick labels converting billions to “B” notation. The chart uses CSV data loaded via d3.csv, styled with a Poppins font and teal bars, and includes a tooltip via SVG `<title>` elements.

MMar-99

93% match

Loading thumbnail…

Fork of Pathetic Bar Chart

This example shows the top 10 most populous countries as a horizontal bar chart with labeled bars but no axes, using React to render SVG elements. The code loads United Nations World Population Prospects 2019 data via d3.csv, then applies d3.scaleLinear and d3.scaleBand to map population values and country names to pixel coordinates. It manually draws gridlines and tick labels using d3.scaleLinear ticks, while omitting axis components. Bars are rendered as SVG rectangles whose widths reflect each country’s 2020 population estimate, with country names positioned along the y-axis.

Nnikitaglt

93% match

Loading thumbnail…

Fork of Bar Chart

This example shows the ten most populous countries as horizontal bars, with population values scaled along the x-axis and country names labeled on the y-axis. The visualization uses React components to render SVG elements, with d3.scaleBand and d3.scaleLinear for positioning and sizing, and d3.format to abbreviate axis tick labels. Data comes from the United Nations World Population Prospects 2019 dataset, loaded via d3.csv, and the chart includes a "Population" axis label but omits a y-axis title.

Ffaik.binaj@gis-dev.com

93% match