Fork of Stylized Bar Chart

100%

Fork of Stylized Bar Chart

✓ Published0🌍 Public

Last edited Jul 17, 2021

Created on Jul 17, 2021

This interactive bar chart displays the 15 countries with the highest total COVID-19 cases, using data from Our World in Data. The visualization uses React components with D3.js scales (scaleBand and scaleLinear) to render horizontal bars in SVG, with axes generated by custom AxisBottom and AxisLeft components. A tooltip showing formatted population values appears when hovering over each bar, and the chart includes a Population axis label with data formatted using D3’s `format` function.

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

A horizontal bar chart displays the top 10 most populous countries, with each bar’s length proportional to population and a tooltip showing the formatted value. The visualization uses React to render SVG elements, with scales from d3.scaleBand and d3.scaleLinear, and axes constructed via custom components. Population data comes from the United Nations World Population Prospects 2019, loaded as CSV and formatted using d3.format.

NNita

86% match

Loading thumbnail…

Fork of Fork of Fork of Stylized Bar Chart

A stylized bar chart displays the top 10 most populous countries, with each bar's length proportional to its 2020 population estimate. The visualization uses React with D3 v5, employing `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. SVG renders the chart, with axes drawn manually via `AxisBottom` and `AxisLeft` components, while `Marks` renders rectangles with native tooltip titles. Population values are formatted using D3's `format` function to abbreviate numbers (e.g., 1.4B). Data comes from the United Nations World Population Prospects 2019 CSV, loaded asynchronously via `useData`.

HHaileabGH

85% match

Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This bar chart visualizes the top 20 countries by confirmed COVID-19 cases, using horizontal bars to compare population metrics. The visualization is built with React and D3 v5, leveraging `d3.csv` to load the dataset and `d3.scaleBand`/`d3.scaleLinear` for axis scaling. SVG elements are rendered declaratively through React, with `rect` marks for bars and text grids for tick labels, displaying both chart axes and data directly from the raw CSV file.

AArefa Patwary

85% match

Loading thumbnail…

Fork of Stylized Bar Chart

This example shows the population of the top 10 most populous countries as horizontal bars, sorted in descending order. The chart uses React to render SVG elements, with d3-scale for creating the linear x- and band y-scales, and d3-format to abbreviate tick labels (e.g., converting billions to “B”). Data is loaded asynchronously from a CSV file using d3.csv, and a tooltip appears on each bar via an SVG `<title>` element. The visualization demonstrates a clean, minimal styling with custom font and color choices.

MMatthew Talty Colvard

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

85% match

Loading thumbnail…

Fork of Stylized Bar Chart

This visualization displays the top 10 most populous countries using a stylized horizontal bar chart, where each country’s bar is split into two off-set rectangles to create a layered visual effect. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` for mapping, and renders SVG elements via custom components for axes and marks. Population data comes from the United Nations World Population Prospects 2019, loaded as CSV, with a tooltip showing formatted values.

FFlorent Eeckeman

85% match

Loading thumbnail…

Fork of Stylized Bar Chart

A stylized bar chart displays the populations of the world’s ten most populous countries, using data from the United Nations World Population Prospects 2019. The visualization is rendered as an SVG using React and D3 v5, with horizontal bars encoded using `scaleBand` and `scaleLinear`. Country labels appear on the left axis, and tooltips reveal exact population values formatted with D3’s `format` function, converting values like “G” to “B” for billions.

AAmandisen

85% match

Loading thumbnail…

Fork of Stylized Bar Chart

This chart displays the top 10 most populous countries as horizontal bars, ranked by population. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` to position bars and axes, rendering SVG elements via JSX components. Population values from the UN World Population Prospects 2019 are formatted using D3’s `format` function, with tooltips generated by native SVG `<title>` elements.

AAga Domanska

85% match