Skip to main content
SimilarExport ZIP
100%

Top 3 Largest Cities

✓ Published0🌍 Public
Mmargaretgoode
Last edited May 13, 2019
Created on May 7, 2019
Forked from Making a Bar Chart

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.

AI-generated description

This bar chart shows population of the top 10 most populous countries. The data comes from the year 2018 estimate in United Nations: World Population Prospects 2017.

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 Example

This D3 example visualizes the populations of three cities—Shanghai, Buenos Aires, and Mumbai—as a horizontal bar chart. It shows population magnitudes through bar lengths along a linear x-axis, with city names on the ordinal y-axis. The visualization uses D3.js (v3) to load a CSV file, scale data, and render SVG elements. The code employs `d3.scale.linear`, `d3.scale.ordinal`, and `d3.svg.axis` to construct axes, while formatting tick labels with `d3.format("s")` for compact notation. Data comes from the included `geonames_cities_top3.csv` file.

CCurran Kelleher
83% 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
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…

Customizing Axes

This bar chart displays the populations of the top 2 most populous cities, Shanghai and Beijing, using estimated data from the United Nations World Population Prospects 2017. The visualization highlights customized D3 axes: the y-axis uses a band scale with ticks stripped of lines and domain, while the x-axis uses a linear scale with tick formatting that abbreviates numbers (e.g., converting billions to "B"). The SVG renderer applies distinct styling to ticks, labels, and the chart title via CSS.

Qqazwsxedcrfv12345
79% match
Loading thumbnail…

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 an SVG rendering, employing `scaleLinear` for the x-axis and `scaleBand` for the y-axis to create horizontal bars. The chart demonstrates custom axis customization through `axisLeft` and `axisBottom`. Population data is loaded from a CSV file and multiplied by 1000 to present the final values.

SShweta-tech
78% match
Loading thumbnail…

Making a 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. The chart renders as SVG, with a linear scale for population values and a band scale for country names. The code uses d3.csv to load the data, then applies d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom to construct the visualization. Bars are appended as rect elements, with China and India visibly dominating the population totals.

Ffbudwill
78% match
Loading thumbnail…

BAR CHART

This bar chart displays the population of the top 10 most populated countries in 2018, with China and India leading by a significant margin. The visualization uses d3.scaleLinear and d3.scaleBand to map population values to bar widths and country names to vertical positions, respectively. Data is loaded from a CSV file using d3.csv, and the population values are converted from thousands to actual numbers. The chart renders as an SVG with d3.axisLeft and d3.axisBottom providing the axes.

SShabani Muswamba
78% match
Loading thumbnail…

Making a bar chart

This bar chart displays the population of the top 10 most populous countries, with China and India leading by a significant margin. The visualization uses D3 v5’s `scaleLinear` for the x-axis and `scaleBand` for the y-axis, rendering SVG rectangles. Data comes from the World Population Prospect 2017, with raw values multiplied by 1000. The chart includes formatted tick labels via `axisBottom` with a custom `.3s` format, a population axis label, and a title, all styled with tomato-colored bars and a Ubuntu font.

JJenny
78% match