Top Megacities Population

100%

Top Megacities Population

✓ Published0🌍 Public

Last edited Sep 15, 2017

Created on Sep 8, 2017

This bar chart displays the populations of the world’s top 20 megacities, with each bar colored by continent—red for Asia, blue for North America, green for South America, and yellow for Africa—revealing that most megacities are in Asia. Using D3 v4 with SVG, the code applies `d3.scaleLinear` for the value axis, `d3.scaleBand` for the categorical city labels, and binds data to grouped `<g>` elements with rectangles and text labels. The dataset originates from Wikipedia’s Megacity page, and hover effects darken bars via CSS.

AI-generated description

This bar chart was inspired by my humanity seminar- Urban Studies. Data from Wikipedia: Megacity.

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/curran/'>curran</a>'s block: <a href='http://bl.ocks.org/curran/5cb71249dcbfd635c794520aff45b89d'>Extremist Murders in the US</a>

This simple block shows the population of top 20 megacities in the world (in millions) - data from Wikipedia. Megacity is generally defined as a metropolitan area with a total population in excess of ten million people.

I color coded the continent: Red for Asia, Blue for North America, Green for South America, and Yellow for Africa.

From this color code, we can see a majority of the megacities are in Asia.

mit Licensed

Similar vizzes

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

93% match

Loading thumbnail…

20 Most Populous Cities

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.

Iinskoe@central.edu

80% match

Loading thumbnail…

Making a Bar Chart

This visualization animates a bar chart race showing the population of the world's top 10 most populous cities from 1500 to 2019. D3.js renders the bars with SVG, using a dynamic year label and animated transitions to reorder the bars as populations shift over time. The data is loaded from a CSV file. A halo effect highlights text by temporarily stroking cloned text elements. The code uses D3's `scaleLinear`, `scaleBand`, axis helpers, and `topojson` for an inset world map, although the primary chart is the animated bar chart.

Sshaishavsood

79% match

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

79% match

Loading thumbnail…

bar chart

This horizontal bar chart displays the populations of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. Using D3 v5, it employs `scaleLinear` and `scaleBand` to map population values and country names, respectively, while `axisBottom` and `axisLeft` generate the labeled axes. The SVG bars are colored steelblue via CSS, with tick formatting converting numbers to abbreviated units like “B” for billions. Data is loaded from a CSV file using D3’s `csv` parser.

Ttkreglhn

78% match

Loading thumbnail…

Making a Bar Chart

This bar chart displays the populations of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. The D3 v5 code loads data from a CSV file and uses `scaleLinear` for the x-axis and `scaleBand` for the categorical y-axis, with `axisLeft` and `axisBottom` for rendering tick marks. Population values are multiplied by 1,000, and rectangular bars are appended to an SVG, styled with steelblue fill.

Hhirokat

78% match

Loading thumbnail…

Bar Charts

This bar chart displays the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. The bars are rendered in SVG with a steelblue fill, while D3’s axis generator provides customized tick labels and lines in muted grays. The chart uses `d3.csv` to load the data and `d3.scaleBand` and `d3.scaleLinear` for positioning and scaling. An axis label and a title are added as text elements, with font sizes and colors styled via CSS.

Tthebeef5

77% match

Loading thumbnail…

D3 Bar Chart

This bar chart displays the populations of the top 10 most populous countries, using a horizontal layout with country names on the y-axis and population values on the x-axis. The visualization is built with D3 v5, specifically using `scaleLinear` for the x-axis, `scaleBand` for the categorical y-axis, and `axisLeft`/`axisBottom` for the axes. Data is loaded from a CSV file and multiplied by 1000 to reflect actual population figures. The SVG rendering uses steelblue rectangles, with margins and padding handled through D3’s scale and transform methods.

Rrdeichert

77% match