Stylized Bar Chart

100%

Stylized Bar Chart

✓ Published1🌍 Public

Last edited Nov 2, 2021

Created on Nov 2, 2021

This stylized bar chart visualizes projected population figures for fifteen countries in 2060, sourced from UN population projection data. The chart uses a horizontal bar layout, making country names easy to read along the y-axis. Built with React and D3 v5, it employs `scaleBand` for the categorical y-axis, `scaleLinear` for the population x-axis, and custom components (`AxisBottom`, `AxisLeft`, `Marks`) to render SVG elements. Hovering over a bar reveals the precise value via a native SVG `<title>` tooltip.

AI-generated description

A program that loads data about UN Population projections from the years 2020 - 2060 and displays the data as a bar chart.

MIT Licensed

Similar vizzes

Loading thumbnail…

Stylized Bar chart (CSS)

A stylized horizontal bar chart displays the top 15 countries by projected 2020 population from the UN World Population Prospects 2019 dataset. The chart uses a teal fill for bars, with CSS-styled axes and gridlines, and labels populations in billions with an "B" suffix. Built with React and D3 v5, it employs `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and renders as SVG. Tooltips appear on hover via native SVG `title` elements, while axis components generate ticks and text elements programmatically.

JJean David

93% match

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

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

91% match

Loading thumbnail…

Stylized Bar Chart

A stylized bar chart displays population estimates for 80 countries in 2020, ordered along a vertical band scale with horizontal bar lengths proportional to values. The visualization uses React components for rendering SVG marks and axes, with D3 v5 utilities like `scaleBand`, `scaleLinear`, and `csv` for data loading. Each bar includes a native tooltip showing the country name and population formatted in billions. The clean design features a teal bar color, gray axis ticks, and the Poppins font, with population data sourced from a UN dataset hosted as a CSV.

HHaris Abdullah

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

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

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

90% match

Loading thumbnail…

Stylized Bar Chart

A stylized bar chart displays the populations of ten countries in 2020, using data from the United Nations population dataset. Horizontal bars are rendered as SVG rectangles, with country names on the y-axis and population values on the x-axis, formatted in billions. The chart uses React with D3 v7, leveraging `scaleBand` and `scaleLinear` to map data, and custom axis components to render ticks.

Ddanielscheeper@gmail.com

90% match