Skip to main content
SimilarExport ZIP
100%

Ep. 24 | Stylized Bar Chart

✓ Published1🌍 Public
YYee Han
Last edited Aug 13, 2021
Created on Dec 24, 2020

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.

AI-generated description

A program that loads in some United Nations World Population Prospects 2019.

MIT Licensed

Similar vizzes

Loading thumbnail…

Stylised Bar Chart

This stylised bar chart displays the top 10 countries by projected 2020 population, sourced from UN population data. Built with React and rendered as SVG using D3 v6 utilities, the chart uses a horizontal bar layout with a linear scale for population and a band scale for countries. The code imports `scaleBand`, `scaleLinear`, and `format` from D3, while custom React components handle axis and bar rendering. Population values are formatted with SI prefixes, converting gigabytes to billions for tick labels and tooltips.

SSabin Bhandari
94% 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
93% match
Loading thumbnail…

Stylized Bar chart

This stylized bar chart displays the top 10 countries by projected 2020 population, using horizontal bars whose lengths encode the population values. The visualization pairs a D3.js v5 linear scale for the x-axis with a band scale for categorical country labels, while React renders each bar as an SVG rectangle. The design features custom fonts (Pacifico and Open Sans Condensed) and a distinct color palette for axis ticks and marks. Data originates from a CSV file of UN Population 2019 estimates, loaded via D3's `csv` function, and includes tooltips formatted in billions using `d3.format`.

CChira Cezara Victoria
93% match
Loading thumbnail…

Ep24 Stylized Bar Chart

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.

SStoo Sepp
93% match
Loading thumbnail…

Stylized Bar Chart

This stylized bar chart visualizes the top ten countries by population according to the United Nations World Population Prospects 2019. It presents categorical data horizontally, with countries along the y-axis and population values along the x-axis. The visualization uses D3 v7 within a React framework, rendering SVG marks and axes. D3’s `scaleBand` and `scaleLinear` position the bars, while `format(".2s")` converts tick labels from gigabytes to billions. A Poppins font and muted custom color scheme define the stylized aesthetic.

BBen Seebeck
92% match
Loading thumbnail…

Stylized Bar Chart

A stylized bar chart displays the top 10 most populous countries for 2020, using horizontal bars ordered by population. The visualization is built with React and rendered as an SVG, leveraging D3 v5’s `scaleBand` and `scaleLinear` for axis scaling and `format` for tick labels. Data comes from the United Nations World Population Prospects 2019, loaded via `d3.csv`. Custom components (`AxisBottom`, `AxisLeft`, `Marks`) structure the chart, with tooltips showing formatted population values on hover.

AAriana
92% match
Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the top 10 most populous countries for 2020, sourced from the United Nations World Population Prospects 2019 dataset. Rendered as an SVG using React and D3 v5, the chart maps population values horizontally with a linear scale, while countries are positioned vertically using a band scale. The bars are styled with a distinctive teal fill, and the chart includes custom axes, tick formatting that abbreviates large numbers (e.g., "1.4B"), and interactive tooltips showing exact values. The code leverages `scaleBand`, `scaleLinear`, `max`, and `format` from D3 to build the visualization.

Mmarksampras
92% match
Loading thumbnail…

Stylized Bar Chart

A stylized bar chart displays the top 10 most populous countries using United Nations World Population Prospects 2019 data, with horizontal bars ordered by country name. The visualization leverages React for component structure and D3 v5's `scaleBand`, `scaleLinear`, `csv`, and `format` APIs for data loading and scaling. SVG rectangles render the marks with native tooltips, while custom `AxisBottom` and `AxisLeft` components generate tick lines and labels. The chart includes an "Population" axis label and formats large values using SI notation converted from billions to the "B" suffix.

AAliaksandr
92% match