Skip to main content
SimilarExport ZIP
100%

Fork of Stylized Bar Chart

✓ Published0🌍 Public
Jjwadh
Last edited Feb 21, 2022
Created on Feb 21, 2022
Forked from Stylized Bar Chart

This fork of a stylized bar chart displays the populations of the top 10 most populous countries as horizontal bars, using a Poppins font and a teal color scheme. Data comes from the UN World Population Prospects 2019, loaded via D3's `csv` function. Built with React and rendered as SVG, the chart uses D3's `scaleBand` for the y-axis and `scaleLinear` for the x-axis, with tooltips powered 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 shows a horizontal bar chart of the top 10 most populous countries, using a stylized teal color scheme and Poppins font. The chart is rendered as an SVG via React, with D3 v5 utilities for data loading and scaling. Axes are drawn using `scaleBand` for the categorical country names and `scaleLinear` for population, formatted with D3's `format` function to abbreviate billions as "B". Data comes from the UN World Population Prospects 2019 CSV.

MMarcelo
95% match
Loading thumbnail…

Fork 999 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 values on the x-axis. The chart uses a teal color for the bars, gray for the axes and labels, and the Poppins font, with a hover tooltip showing the exact population format. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` to map data from the UN World Population Prospects 2019, loaded via `csv`. The SVG rendering separates axes and marks into modular components for clarity.

Ssucotton9
95% match
Loading thumbnail…

Fork of Stylized Bar Chart

This fork of the Stylized Bar Chart example visualizes the top 10 most populous countries for 2020 using horizontal bars. It renders a React SVG chart with D3 v5 scales (`scaleBand`, `scaleLinear`) to position bars and axes, and formats population values in billions via `d3.format`. The data comes from the United Nations World Population Prospects 2019 CSV. Each bar includes a native SVG `<title>` element as a hover tooltip, styled with the Poppins font.

NNicky@vin.com
95% match
Loading thumbnail…

Fork of Fork of Stylized Bar Chart

A stylized horizontal bar chart displays the top 10 most populous countries, with bars representing population values. The visualization uses React with D3.js (v5) APIs such as `scaleBand`, `scaleLinear`, and `format` to compute scales and tick labels. SVGs are rendered through React components, with data loaded from the UN World Population Prospects 2019 CSV. The chart includes labeled axes, a Poppins font, and tooltips showing formatted population values.

Ssnehareddygurram
95% match
Loading thumbnail…

Fork of Stylized Bar Chart

This bar chart visualizes the top 10 most populous countries using United Nations World Population Prospects 2019 data, loaded via d3.csv. Built with React and rendered as SVG, the chart uses d3.scaleBand and d3.scaleLinear for axes, with a customized Poppins font and a teal color scheme. Each bar’s tooltip displays the population value formatted using d3.format. The code reuses modular components for axes and marks, and displays a loading state before the data arrives.

BBenoit Mouly
95% match
Loading thumbnail…

Fork of Stylized Bar Chart

This bar chart visualizes the top 10 most populous countries using data from the United Nations World Population Prospects 2019. It uses React with D3 v5 to construct the SVG, with `scaleBand` for the categorical y-axis and `scaleLinear` for the numerical x-axis. The chart renders horizontal bars with a teal fill, Poppins font, and custom axes from `AxisBottom` and `AxisLeft`, with CSV data fetched via D3's `csv` helper. A tooltip displays the formatted population value using D3's `format` function.

CClara Hu
95% match
Loading thumbnail…

Fork of Stylized Bar Chart

This bar chart displays the population of the top 10 most populous countries using React and D3 v5, rendering as SVG. It uses `d3.scaleBand` for the vertical axis and `d3.scaleLinear` for the horizontal axis, with data from the United Nations World Population Prospects 2019. The chart includes formatted axis ticks and tooltips, styled with the Poppins font and a teal color scheme.

Cceresfin
95% match
Loading thumbnail…

Fork of Stylized Bar Chart

This chart displays the top 10 most populous countries in 2020 as horizontal bars, sorted by population with a labeled x-axis and country names on the y-axis. It uses React with D3’s `scaleBand`, `scaleLinear`, `max`, and `format` to position and style SVG rectangles, with hover tooltips via SVG `<title>`. Data comes from the United Nations World Population Prospects 2019 CSV, loaded using `d3.csv`. The design features a teal color scheme and Poppins font, with axis ticks and labels styled through CSS.

JJONATHAN SIMON
95% match