Stylized Bar Chart

Stylized Bar Chart

A stylized bar chart displays the populations of ten countries from a 2019 UN dataset, using horizontal bars sorted by country name. The visualization renders in SVG via React, with D3 v5 scales (`scaleBand` for the y-axis and `scaleLinear` for the x-axis) and includes axis components and tooltips showing formatted population values. Data is loaded asynchronously with `d3.csv`, with population values computed from the dataset’s “2020” column. The chart’s styling uses Poppins font and teal bars against a minimal, clean background.

EEvan Misshula

Stylized bar chart

A stylized bar chart displays the populations of ten countries from 2019 UN Population data, with horizontal bars ranked by country name. The visualization uses React to render SVG elements, including custom axis components and rectangular marks for each bar. D3 utilities like scaleBand, scaleLinear, and csv loading handle data processing and scales. The chart features a teal color scheme, Poppins font, and tooltips showing population values with abbreviated formatting, such as "1.23B".

Nnncis

Stylized Bar Chart

This stylized bar chart displays population data for ten countries from the UN’s 2019 World Population dataset. Using React with D3 v7, it builds a horizontal bar chart with a band scale for countries and a linear scale for population, rendering axes and marks as SVG elements. The chart applies a custom Poppins font, colored tick marks, and teal bars with hover tooltips via SVG `<title>` elements. The `csv` loader fetches the data, while `format` and `scaleBand` handle labeling and spacing.

GGabriel Dias Menezes

Stylized Bar Chart

This stylized bar chart visualizes the population of ten countries using horizontal bars, with a clean, modern aesthetic set against a Poppins font and teal color palette. The chart leverages React for state management and rendering, D3 utilities such as `scaleBand` and `scaleLinear` for axes, and SVG for output. Data is loaded via D3’s `csv` function from a UN population dataset, and the x-axis formats large numbers with a custom `format` function that abbreviates values as billions.

AAnthonyAl-Rifai

Stylized Bar Chart

This stylized bar chart displays the population of ten countries for 2020, drawing on United Nations World Population Prospects data loaded via `d3.csv`. The visualization uses SVG rendering through React, with `scaleBand` positioning horizontal bars and `scaleLinear` mapping population values to bar widths. D3’s `format` helper converts large numbers into abbreviated tick labels (e.g., “1.2B”), while custom axis components generate gridlines and text. The chart uses a muted teal fill for bars and the Poppins font.

TTousifAhamed

Stylized Bar Chart

This stylized bar chart displays the population of ten countries from the 2019 UN Population dataset. The horizontal bars use a teal color scheme with a clean grid and axis labels. Built with React and D3 v6, it uses `scaleBand` for the categorical y-axis and `scaleLinear` for the population x-axis, with SVG rendering. Axis components are modularized, and each bar includes a tooltip showing the population value using D3's `format` function.

HHeidi Stockton

Stylized Bar Chart

This stylized bar chart displays the populations of ten countries using data from the UN Population 2019 dataset. The visualization uses React components to render SVG elements, with d3.scaleBand and d3.scaleLinear mapping countries and population values to screen coordinates. Custom AxisBottom and AxisLeft components generate tick marks and labels, while the Marks component renders rectangles with tooltips. The chart features a clean design with Poppins typography, a teal color scheme, and formatted population labels using d3.format.

TThomas Cormican

Stylized Bar Chart

This bar chart displays the ten most populous countries, with each bar representing a country’s population. The visualization uses React to render SVG elements, leveraging d3-scale functions like `scaleBand` and `scaleLinear` to position bars and axes. Data comes from the United Nations World Population Prospects 2019, loaded via `d3.csv`. The chart applies a custom Poppins font, teal bar fills, and formatted tick labels that convert values from gigabytes to billions.

JJane Wang