Skip to main content
SimilarExport ZIP
100%

20 Most Populous Cities

✓ Published0🌍 Public
Iinskoe@central.edu
Last edited May 20, 2025
Created on May 20, 2025

This horizontal bar chart ranks the world’s 20 most populous cities by population, using orange hover highlights to reveal precise figures in millions. Built with D3’s `d3-selection` module, the visualization binds an array of city objects to SVG `<rect>` and `<text>` elements via `selectAll().data().join()`. Each bar’s width is scaled linearly from population data, while city names anchor on the left. Population values come from Wikipedia.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

10 largest cities in the world

This bar chart displays the populations of the ten largest cities in the world in 2018, using data from World Atlas. The bars are sorted by country name, with population values formatted in billions using d3.format. Built with D3 v5, the visualization uses scaleLinear and scaleBand for axes, axisLeft and axisBottom for ticks, and SVG rendering. A horizontal gridline pattern is created via tickSize on the x-axis, while the chart’s title and axis label are added as SVG text elements.

Mmargaretgoode
81% match
Loading thumbnail…

Most Popular Cities In The World

This pie chart displays the top 10 most populated cities in the world based on 2022 population data. Each slice represents a city’s total population, with a color-coded legend showing city names and values in thousands. The visualization uses D3 v5’s `pie` and `arc` generators to compute angular segments, with `scaleOrdinal` mapping colors to population values. Data is loaded asynchronously from a CSV file via the `csv` function, and the SVG rendering includes custom legend text and percentage formatting using `format`.

Ssyedhaliz
81% match
Loading thumbnail…

Top Megacities Population

This horizontal bar chart visualizes the populations of the top 20 megacities worldwide, using bar length to encode millions of residents and color to distinguish continents, with Asia dominating the upper ranks. Each bar is labeled with the city and country, while a subtitle clarifies the metric. The visualization uses D3.js v4 with SVG rendering, employing `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the categorical y-axis, and inline data sourced from Wikipedia via a gist. Hover effects darken bars, and the chart is styled with custom fonts and a clean, margin-based layout.

663anp3ca
81% match
Loading thumbnail…

06_ menu with Largest Cities population in US 2020

This interactive bar chart displays the top ten largest U.S. cities by population in 2020, sourced from World Population Review data. Users can toggle the x-axis between population figures from 2020 or 2010, and the y-axis between city name, rank, state, or postal abbreviation. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` for positioning, with bars rendered as SVG rectangles and dropdown menus controlling the attribute selections.

AAbdul Salam Almadani
79% match
Loading thumbnail…

Making a Bar Chart

This bar chart displays the populations of the world’s most populous cities, based on 2018 United Nations World Population Prospects estimates. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear` and `scaleBand` to map population values to bar widths and city names to vertical positions. Axes are generated with `axisLeft` and `axisBottom`, while data is loaded asynchronously from a CSV file using `d3.csv`. Each bar’s width is proportional to its population value, with the chart ordered alphabetically by city name.

FFANN438
78% match
Loading thumbnail…

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.

AAbdul Salam Almadani
78% match
Loading thumbnail…

Fork of Making a Bar Chart

This bar chart displays the population of the top ten most populous U.S. cities, based on 2018 estimates from the United Nations World Population Prospects. The visualization uses D3 v5 with an SVG rendering approach, employing `d3.scaleLinear` for the x-axis (population) and `d3.scaleBand` for the y-axis (city names). Axes are generated via `d3.axisLeft` and `d3.axisBottom`, while data is loaded from a CSV file using `d3.csv`. Each rectangle’s width corresponds to the city’s population, with values multiplied by 1,000.

YYa7eng
78% match
Loading thumbnail…

D3 Example

This example presents a horizontal bar chart of the ten most populous cities, using D3.js to render SVG elements. It compares population figures sourced from Wikipedia’s list of cities proper by population, displayed via a linear x-scale and an ordinal y-scale with rounded band padding. The chart applies Google Fonts (Poiret One) to axis text and labels, while the D3 CSV loader (`d3.csv`) parses the local `top10cities.csv` file with a custom type function to convert population values to numbers. The code explicitly configures margins, axis ticks with SI formatting, and removes the y-axis line for a clean visual.

CCurran Kelleher
78% match