Top 5 U.S. Cities by Population in 2023

test

This visualization presents the top 5 U.S. cities by population in 2023, with each city represented as a white circle that fades in sequentially within a vertically centered panel. The circles are positioned using D3.js transitions, and users can hover over them to trigger a color change from white to a gold-brown, providing interactive feedback. The data is sourced from Wikipedia's list of United States cities by population, and the visualization is rendered as an animated SVG.

Ssamozarif@gmail.com

88% match

05_02_ Stylized, Largest Cities population in US 2020

This visualization displays the top ten largest U.S. cities by 2020 population as horizontal bars, with city names on the y-axis and population values on the x-axis. The chart uses React to render SVG elements, while D3 utilities (`scaleBand`, `scaleLinear`, `csv`, `format`) handle data loading, scaling, and axis formatting. Population data comes from World Population Review, loaded via `d3.csv` from a gist. Each bar includes a tooltip showing the population value and state abbreviation. The visualization emphasizes the relationship between city name and population, with bars colored in a consistent blue tone.

79% match

Top 5 Countries with Highest Population

The visualization displays the top five most populous countries with circles scaled by population, using color-coded labels beneath each. It animates circle growth and text fading in sequentially using d3.transition, with data from the World Bank Group. The SVG rendering uses d3.select and joins to create and update circle and text elements, applying staggered delays for a polished effect.

BBashir Gulistani

78% match

Oomniaabouhassan@gmail.com

Top 10 Most Populated Cities

Ten dark circles grow from zero to their full size in a horizontal row, representing the world's ten most populous cities in 2023. Circle area corresponds to population, scaled by square root to improve readability, with population labels above and city names below. The visualization uses d3-transition chains with staggered delays to animate circle radius, labels, and text opacity, drawing data from Jagran Josh's 2023 population listings. D3's selection join pattern handles enter, update, and exit states across all elements.

77% match

Largest Cities by population in 2020

This chart displays the 100 largest U.S. cities by population in 2020, with blue circles sized using a square-root scale and colored by population. It uses D3’s `geoAlbers` projection to render state boundaries via `geoPath`, then overlays city locations as `circle` elements positioned through the same projection. City population data comes from a CSV hosted on GitHub, and the underlying map uses the `us-atlas` states-10m GeoJSON. The visualization is built with React and SVG.

05_01_Visualization Refactoring, Largest Cities population in US 2020

This bar chart displays the population of the top ten largest US cities in 2020, using a horizontal bar layout where the city name appears on the y-axis and the population count on the x-axis. The visualization uses d3.v5 utilities to load and scale the data, with React components rendering the SVG marks and axes. The chart helps viewers compare population sizes across the ten most populous cities, sourced from World Population Review data.

Largest cities in the USA

This visualization displays the largest cities in the USA by 2020 population, with each city represented as a semi-transparent circle scaled by population size on a world map. The map includes land boundaries, country interiors, and graticules, all rendered as SVG paths using `d3.geoPath` with a `geoNaturalEarth1` projection. Cities are plotted by latitude and longitude coordinates using `d3.scaleSqrt` for circle radii. Data comes from a CSV of city populations, while country shapes use TopoJSON from World Atlas, with React managing the component state and D3 fetching the data.

Largest cities in the USA