Stylized Bar Chart

Ddanielscheeper@gmail.com

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.

Stylized Bar Chart

A stylized bar chart displays population estimates for ten countries, with horizontal bars ranked by country name and labeled with formatted population values. The visualization uses React to manage component state and render SVG elements, while D3 v7 provides scales for positioning and axes. Data loads from a CSV file of UN population figures for 2020. The chart applies custom styling with Poppins typography, teal-colored marks, and formatted tick labels that abbreviate large numbers using D3's SI format.

JJenna Hamza

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

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

Stylized Bar chart

This stylized bar chart displays the populations of the ten most populous countries in 2020, using horizontal bars sorted by country name. The visualization encodes population values through bar width, with a linear scale mapping populations up to the maximum value and a band scale positioning each country. Built with React and D3 v6, the chart renders as SVG, using components for axes and marks. Population data comes from the UN Population 2019 CSV, with values formatted in billions and styled with the Poppins font.

BbeauMarko

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

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

Stylized Bar Chart

This example shows a horizontal bar chart ranking the ten most populous countries for 2020, based on UN population data loaded as a CSV. Each bar’s length encodes population, with country names on the y-axis and a formatted population scale on the x-axis. The React app uses d3.scaleBand and d3.scaleLinear for positioning, d3.format for tick labels, and renders bars as SVG rectangles via React components. Styling applies the Poppins font and a teal fill for the marks.

Ddaneslutzky