Fork of Fork of Stylized Bar Chart

100%

Fork of Fork of Stylized Bar Chart

✓ Published0🌍 Public

Last edited Jun 22, 2021

Created on Jun 22, 2021

This example shows the ten most populous countries in 2020 as a horizontal bar chart, with country names on the y-axis and population counts (in billions) on the x-axis. Built with React and D3 v5, it uses `d3.scaleBand` and `d3.scaleLinear` to map data from the United Nations World Population Prospects 2019 dataset. SVG rectangles render each bar, with axes generated via `xScale.ticks()` and tooltips provided by SVG `<title>` elements.

AI-generated description

A program that shows the top 10 most populous countries as a bar chart.

Data: United Nations World Population Prospects 2019.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Stylized Bar Chart

This example displays the ten most populous countries as a horizontal bar chart, with country names on the y-axis and population on the x-axis. The code uses React and d3.scaleBand and d3.scaleLinear to position the bars, with SVG rectangles rendered from the United Nations World Population Prospects 2019 dataset. The axis components use d3.ticks for tick values, and tooltips reveal formatted population values via the d3.format function.

JJeff Yeung

97% match

Loading thumbnail…

Fork of Stylized Bar Chart

This example shows the ten most populous countries in 2020 as a horizontal bar chart, with country names on the y-axis and population in billions on the x-axis. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` for positioning and `format('.2s')` to abbreviate tick labels. Data comes from the United Nations World Population Prospects 2019, loaded via `d3.csv`. Rects render as SVG marks, with axis components drawing tick lines and labels, and a tooltip showing the formatted population value on hover.

TTrashBoatDora

97% match

Loading thumbnail…

Fork of Stylized Bar Chart

This example presents a horizontal bar chart of the ten most populous countries, using data from the United Nations World Population Prospects 2019. The chart encodes each country’s 2020 population as a teal bar, with country names on the y-axis and population values on the x-axis. Built with React and d3.scaleBand and d3.scaleLinear, it renders SVG rectangles for each bar and includes a tooltip showing the exact population value. The axes are composed of lightweight components that map scales to tick lines and labels.

Aashershah

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

96% match

Loading thumbnail…

Fork of Stylized Bar Chart

This example shows the ten most populous countries in 2020 as horizontal bars, sorted by population, with a labeled x-axis formatting values in billions. The chart is built with React and D3 v5, using a `scaleBand` for the y-axis and a `scaleLinear` for the x-axis. Data comes from the United Nations World Population Prospects 2019, loaded via `d3.csv`. Each `<rect>` mark includes an SVG `<title>` element for tooltips. Styling uses Poppins font and custom colors for bars and axes.

SSofi

96% match

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

96% match

Loading thumbnail…

Fork of Fork of Stylized Bar Chart

This example displays the ten most populous countries as horizontal bars, with country names on the y-axis and population totals on the x-axis, formatted in billions. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` to position bars and axes, rendered as SVG rectangles with native tooltips. The data comes from the United Nations World Population Prospects 2019 CSV, loaded via `d3.csv` and sliced to the top ten entries.

Ssudeepmathew

96% match

Loading thumbnail…

Fork of Stylized Bar Chart

A horizontal bar chart displays the top 10 most populous countries, using data from the United Nations World Population Prospects 2019. The chart presents population values formatted in billions, with country names on the y-axis and a labeled x-axis. Built with React and D3 v5, the visualization uses `scaleBand` and `scaleLinear` for positioning, and SVG `rect` elements from the `Marks` component to render bars with tooltips.

EEmma kim

96% match