Top Megacities Population

100%

Top Megacities Population

✓ Published0🌍 Public

Last edited Sep 25, 2018

Created on Sep 25, 2018

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.

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.

forked from <a href='http://bl.ocks.org/anqi-lu/'>anqi-lu</a>'s block: <a href='http://bl.ocks.org/anqi-lu/bc73bc205ec19921c89fb2ce76ba703b'>Top Megacities Population</a>

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

80% match

Loading thumbnail…

Making a Bar Chart

This bar chart displays the population of the top 10 most populous countries, using 2019 estimates from the United Nations World Population Prospects 2020. The visualization uses D3 v6 with an SVG rendering approach, employing `scaleLinear` for the x-axis and `scaleBand` for the y-axis. Data is loaded from a CSV file, with populations multiplied by 1000 to represent actual figures. The chart includes axes generated via `axisLeft` and `axisBottom`, with dark blue bars against a light blue background.

SShokoLocoMocco

78% match

Loading thumbnail…

Top 3 Largest Cities

A horizontal bar chart displays the population of the top three largest cities—Shanghai, Mumbai, and Sao Paulo—based on 2018 data from the United Nations World Population Prospects. The visualization renders as SVG, using D3 v5’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to map population counts to bar widths and country names to vertical bands. Data is loaded from a CSV file via `d3.csv`, with values parsed as numbers. Green rectangles encode each city’s population, and axes are labeled with default text formatting.

Mmargaretgoode

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

78% match

Loading thumbnail…

BAR CHART

This bar chart displays the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects 2017. The visualization uses D3 v5 with SVG rendering, employing `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, and `d3.axisBottom`. Axes are customized with tick formatting that converts values to billions (e.g., replacing "G" with "B") and removed domain lines. Population data is loaded from a CSV file and multiplied by 1000.

Ccocktaildata

77% match

Loading thumbnail…

Making a Bar Chart

This bar chart displays the population of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and custom `axisBottom` and `axisLeft` configurations. Population values are formatted with `format('.3s')` and converted from thousands. A linked video tutorial accompanies the example, which also demonstrates axis customization techniques such as removing domain lines and adding axis labels.

MMegha Singhania

77% match

Loading thumbnail…

Top 10 Most Populous Countries Bar Chart

A horizontal bar chart displays the population of the top 10 most populous countries from Worldometers 2020 data, with countries on the y-axis and population scaled linearly on the x-axis using d3.scaleLinear and d3.scaleBand. The visualization renders as SVG, using d3.csv to load the data and d3.axisLeft and d3.axisBottom for labeled axes, with tick formatting converting billions to abbreviated values. Bars are drawn as SVG rect elements with a steelblue fill, and an axis label and title annotate the chart.

MMaciek Sitkowski

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