Fork of Steve's stylized barchart

100%

Fork of Steve's stylized barchart

✓ Published0🌍 Public

Last edited Jun 25, 2022

Created on Jun 25, 2022

A horizontal bar chart ranks the ten most populous countries by their 2020 population estimates from the UN World Population Prospects 2019 dataset. Each bar’s length encodes the population value, with a tooltip showing the exact figure in full numbers. The visualization is rendered as SVG using React components and D3’s `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and axis components that generate ticks with SI-formatted labels. Stylized with the Poppins font and teal marks, it omits gridlines beyond the axis ticks.

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

A stylized horizontal bar chart displays the ten most populous countries, using data from the United Nations World Population Prospects 2019. The visualization employs React and D3 v5, with SVG rendering. `d3.scaleBand` positions the bars vertically, while `d3.scaleLinear` and `d3.max` scale the population values. A custom `tooltipFormat` shows the population on hover. The chart uses a Poppins font, a teal fill for the marks, and includes a customized axis with `d3.format` to abbreviate large numbers.

Vvivekananth-code

92% match

Loading thumbnail…

Fork of Fork of Stylized Bar Chart

This bar chart displays the top 10 most populous countries in 2020 using data from the UN World Population Prospects 2019, presented as horizontal bars labeled with country names and population values. The React-based visualization uses D3 v5 scales (`scaleBand` and `scaleLinear`) to position bars and axes, with population formatted in billions via D3’s `format` function. Styled with the Poppins font and turquoise bars, the SVG rendering includes axis tick lines, labels, and hover tooltips through native SVG `<title>` elements.

Bblueyjuice

92% match

Loading thumbnail…

Fork of Stylized Bar Chart

This example visualizes the ten most populous countries using horizontal bars, with the underlying data from the United Nations World Population Prospects 2019. Rendered in SVG via React, the chart’s axes and rectangles are built from D3 scale components (`scaleBand`, `scaleLinear`) and custom components (`AxisBottom`, `AxisLeft`, `Marks`) that generate tick lines and labels. Population values are formatted with D3’s `format('.2s')` to display abbreviations like “B” for billions, while a `<title>` element provides tooltips. The visualization uses the Poppins font and a muted color scheme for the marks and axes.

HHaileabGH

92% match

Loading thumbnail…

Fork of Stylized Bar Chart

HHaileabGH

92% match

Loading thumbnail…

Fork of Stylized Bar Chart

This stylized bar chart displays the ten most populous countries according to the UN’s 2019 World Population Prospects, using a horizontal layout with a reversed y-axis. Built with React and rendered as SVG, it uses `scaleBand` for the categorical country axis and `scaleLinear` for the population values, with bars styled in a teal color. The chart includes formatted tick labels (e.g., “1.4B”) via a custom `format` function, and hover tooltips show the precise population. The code is structured into separate components for axes and marks, demonstrating a modular React approach to D3 visualization.

Ggopuma

92% match

Loading thumbnail…

Fork of Stylized Bar Chart

This bar chart displays the ten most populous countries in 2020, with horizontal bars ranked by population size. Built with React and rendered as SVG, the visualization uses d3.scaleBand for the country axis and d3.scaleLinear for the population values. Data comes from the United Nations World Population Prospects 2019, formatted with d3.format to abbreviate large numbers. The chart includes a formatted x-axis, country labels on the y-axis, and tooltips showing exact values.

GGuruprasad

92% match

Loading thumbnail…

Fork of Stylized Bar Chart

This horizontal bar chart displays the ten most populous countries for 2020, using data derived from the United Nations World Population Prospects 2019. The visualization leverages React with SVG rendering, employing D3’s `scaleBand`, `scaleLinear`, `max`, and `format` APIs to map countries to bars and population values to lengths. A `csv` loader fetches and processes the dataset, while custom SVG components for axes and marks generate the chart. The Poppins font and specific color styling for ticks and marks create a clean, stylized presentation.

Rrahool001

92% match

Loading thumbnail…

Fork of Stylized Bar Chart

This chart displays the top 10 most populous countries as horizontal bars, ranked by population with country names on the y-axis. Bars are rendered as SVG rectangles using React components, with data loaded from the UN World Population Prospects 2019 via d3.csv. The visualization employs d3.scaleBand for categorical positioning and d3.scaleLinear for quantitative values, while d3.format abbreviates tick labels (e.g., "1.3B"). Axes and marks are generated through React’s component pattern, and a native SVG `<title>` element provides hover tooltips showing the exact population.

JJohn Robison

92% match