Ep24 Stylized Bar Chart

100%

Ep24 Stylized Bar Chart

✓ Published1🌍 Public

Last edited Aug 12, 2024

Created on Oct 30, 2021

This stylized bar chart displays the projected 2020 populations for ten countries from the United Nations World Population Prospects 2019 dataset. The visualization uses a horizontal layout with a clean, modern aesthetic, featuring teal bars and custom Poppins typography. Built with React and D3 v7, the chart employs `scaleBand` for the categorical country axis and `scaleLinear` for the population values. A formatted tooltip using D3’s `format` function shows precise population figures, while custom SVG axis components render labeled ticks for both axes.

AI-generated description

a program that loads in Cleaned Dataset derived from United Nations World Population Prospects 2019. Stylised and presented all pretty for your pleasure :)

MIT Licensed

Similar vizzes

Loading thumbnail…

Ep. 24 | Stylized Bar Chart

This stylized bar chart displays the top 10 countries by projected 2020 population from the United Nations World Population Prospects 2019 dataset. Horizontal bars, rendered as SVG rectangles via React components, encode population values on a linear scale with a band scale for country names. D3’s `scaleLinear`, `scaleBand`, `max`, and `format` utilities handle scales and axis tick formatting, converting gigabytes to billions. The code also uses `csv` for data loading, custom `AxisBottom` and `AxisLeft` components, and a `Marks` component with `<title>` tooltips.

YYee Han

93% match

Loading thumbnail…

Stylized Bar Chart

A stylized bar chart displays the populations of ten countries using data from the United Nations World Population Prospects for 2020. Horizontal bars are scaled with d3.scaleBand and d3.scaleLinear, with axes rendered through custom React components. The visualization is built with React and D3 v7, rendering to SVG, and includes formatted tick labels using d3.format and hover tooltips via the SVG title element.

RRedSorrel

92% match

Loading thumbnail…

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

92% match

Loading thumbnail…

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

91% match

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the population of ten countries from a UN 2019 dataset, rendered as horizontal bars with a custom Poppins font and teal color scheme. The visualization uses React to manage component state and D3 v5 utilities including `scaleBand`, `scaleLinear`, and `csv` for data loading. SVG elements are generated via React components for axes and marks, while the bottom axis formats population values in billions using D3's `format` function.

TtrwMK

91% match

Loading thumbnail…

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

91% match

Loading thumbnail…

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

91% match

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the top 10 countries by projected 2020 population from a United Nations dataset, using horizontal bars with a teal fill and a Poppins font. The example highlights labeled axes and a population label, with tooltips showing formatted values. Built with React and D3 v6, it uses scaleBand and scaleLinear for layout, and formats tick labels with a custom SI-formatting function that converts billions from “G” to “B”. The SVG rendering is driven by reusable AxisBottom, AxisLeft, and Marks components.

PPratik Gohil

91% match