Skip to main content
SimilarExport ZIP
100%

Stylized Bar Chart

✓ Published0🌍 Public
Ssubburaj16061927
Last edited Jul 20, 2020
Created on Jul 20, 2020
Forked from Stylized Bar Chart

A stylized bar chart displays the ten most populous countries using data from the United Nations World Population Prospects 2019. Horizontal bars, colored teal, show population values with formatted tick labels abbreviating billions as “B”. Built with React and D3 v5, the visualization uses `scaleBand` for the categorical y-axis, `scaleLinear` for the x-axis, and SVG rectangles for rendering. Axis components and marks are modularized, with tooltips providing exact population figures on hover.

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…

Stylized Bar Chart

This stylized bar chart displays the ten most populous countries using data from the United Nations World Population Prospects 2019. The visualization ranks each nation horizontally by population, with a teal fill color and custom Poppins typography. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, rendering SVG rectangles through a custom `Marks` component. The chart includes formatted axis ticks that abbreviate large numbers (e.g., "1.4B") and provides tooltips on hover via SVG `<title>` elements.

OOla Skoczylas
95% match
Loading thumbnail…

Stylized Bar Chart

This stylized bar chart visualizes the top 10 most populous countries using data from the United Nations World Population Prospects 2019. Horizontal bars extend from the left axis, colored teal with a clean, minimal design. The React-based implementation uses D3’s `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and the `format` function to abbreviate population values (e.g., “1.4B”). SVG rendering includes custom React components for axes and marks, with simple tooltips provided via SVG `<title>` elements.

Hhafsa2020
95% match
Loading thumbnail…

Stylized Bar Chart

This stylized bar chart visualizes the top 10 most populous countries using data from the United Nations World Population Prospects 2019. Horizontal bars extend from the left axis, colored teal with a clean, minimal design. The React-based implementation uses D3’s `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and the `format` function to abbreviate population values (e.g., “1.4B”). SVG rendering includes custom React components for axes and marks, with simple tooltips provided via SVG `<title>` elements.

Hhafsa2020
95% match
Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the ten most populous countries based on 2019 United Nations World Population Prospects data. The visualization uses React with SVG rendering, employing d3.scaleBand and d3.scaleLinear to position bars and axes. Population values are formatted using d3.format with a custom tick formatter that converts values to billions. The chart features a clean design with Poppins typography, teal-colored bars, and tooltips that appear on hover showing each country's population.

0007ebey
95% match
Loading thumbnail…

Stylized Bar Chart

This bar chart visualizes the ten most populous countries using United Nations World Population Prospects 2019 data. The chart uses horizontal bars, with country names on the y-axis and a formatted population scale (in billions) on the x-axis. Built with React and D3 v5, the visualization separates axes and marks into reusable components—`AxisBottom`, `AxisLeft`, and `Marks`—which render SVG elements. The linear scale maps population values, while the band scale handles categorical country labels with built-in padding. Tooltips display the population value when hovering over each bar.

Yyogichoudhary
95% match
Loading thumbnail…

Stylized Bar Chart

A stylized bar chart displays the top 10 most populous countries using data from the United Nations World Population Prospects 2019, with population values formatted in billions. The visualization is built with React and D3 v5, using `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and SVG `<rect>` elements for the bars. Custom axis components render tick marks and labels, while the Poppins font and teal color scheme give the chart its stylized appearance.

Mmanalhilali
95% match
Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the ten most populous countries using data from the United Nations World Population Prospects 2019. The visualization uses d3.scaleBand and d3.scaleLinear to map country names and population values to SVG rectangles, with axis components rendered as React components. The chart includes a formatted population axis using d3.format with a "G" to "B" replacement, and native SVG tooltips show exact values on hover.

Uusersnamebeentaken
95% match
Loading thumbnail…

Stylized Bar Chart

A stylized bar chart displays the top 10 most populous countries using data from the United Nations World Population Prospects 2019. The visualization uses React with D3 v5, leveraging `scaleBand` and `scaleLinear` for positioning and sizing, while custom axis components render SVG ticks and labels. Population values are formatted with D3's `format` API, converting gigabytes to billions. Teal bars with light gray gridlines sit on a clean background with the Poppins font, and tooltips appear via SVG `<title>` elements on hover.

Mmanalhilali
95% match