Skip to main content
SimilarExport ZIP
100%

scatter plot top 30 Countries Population with CSV Final

✓ Published0🌍 Public
CChawin Sungwalngern
Last edited Dec 28, 2022
Created on Dec 27, 2022

A scatter plot displays the top 30 countries by population in 2020, with each dot positioned along the x-axis by population count and along the y-axis by country name. The visualization, built with D3 v5, uses `csv()` to load data from a CSV file, `scaleLinear` and `scalePoint` for axes, and `axisLeft`/`axisBottom` for ticks. Hovering a circle triggers a mouseover event that changes its fill to orange, with a mouseout transition returning it to black. Data originates from the Kaggle World Population Prospects 2020 dataset.

AI-generated description

This scatter plots show population of the top 30 countries. The data comes from the year 2020 Kaggle: World Population Prospects 2020.

The Data is twisked by excel and import to JS file as CSV file. The scatter plots of 30 countries was created based on population data and animated when hover with D3 and CSS

MIT Licensed

Similar vizzes

Loading thumbnail…

scatter plot top 30 Countries Population with CSV

This scatter plot displays the populations of the top 30 countries in 2020, with countries on the y-axis and population counts on the x-axis. The visualization uses D3 v5’s `scaleLinear` and `scalePoint` to map data, `axisLeft` and `axisBottom` for axes with custom tick formatting, and SVG circles that change color on mouseover. Population data comes from the Kaggle World Population Prospects 2020 dataset, loaded via `d3.csv` from a local CSV file.

CChawin Sungwalngern
97% match
Loading thumbnail…

Bar Chart top 30 Countries Population (vertical) with CSV Final

This bar chart displays the population of the top 30 countries in 2020, using a vertical layout. The data is sourced from the Kaggle World Population Prospects 2020 dataset, which was processed externally before being imported as a CSV. The visualization is rendered in SVG using D3 v5, with bars that change color from black to orange upon mouse hover, and smoothly transition back. It utilizes D3's `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`, and `format` functions to construct the chart, with a custom tick formatter.

CChawin Sungwalngern
87% match
Loading thumbnail…

Scatter Plot

A scatter plot displays the population of the top ten most populous countries, with each circle positioned along a linear population axis and a point scale for country names. The visualization uses D3 v6 with SVG rendering, employing `scaleLinear`, `scalePoint`, `axisBottom`, and `axisLeft` to construct the chart. Data is loaded from a CSV file via `d3.csv`, with population values converted from thousands to absolute numbers. Grid lines extend through the plot area, and axis labels are formatted using `format('.3s')` to abbreviate large numbers.

GGordon Yang
86% match
Loading thumbnail…

Scatter Plot

This scatter plot displays the population of the top 10 most populous countries, based on 2020 estimates from the United Nations World Population Prospects. Each circle represents a country, positioned along the y-axis by name and the x-axis by population count. The visualization utilizes D3 v6 APIs including `scaleLinear`, `scalePoint`, `axisBottom`, and `axisLeft`, rendering as SVG. Population data from a CSV file is loaded and scaled, with grid lines and axis labels formatted using D3’s `format` function.

AAnthony Ynami
86% match
Loading thumbnail…

Scatter Plot

This scatter plot visualizes the top 10 most populous countries using circles positioned along a point scale for country names and a linear scale for population values from the 2018 UN World Population Prospects estimate. The code uses D3 v5 APIs including `csv`, `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` to render SVG elements, with tick formatting converting values to billions. Circle radii are fixed at 18 pixels, and gridlines extend across the plot area. The visualization features a title and axis labels, with data loaded from a local CSV file.

Ddtdenver
86% match
Loading thumbnail…

Scatter Plot

A scatter plot displays the population of the top 10 most populous countries, with each country represented as a circle positioned along a linear population scale and a point scale for country names. The visualization uses D3 v5 with SVG rendering, loading data from a CSV file via `d3.csv` and converting population values to numbers. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, including grid lines and a custom tick format that abbreviates large numbers, while the title and axis label are added as text elements.

PPedro Ernesto Tramontina
86% match
Loading thumbnail…

Scatter Plot

This scatter plot displays the population of the top 10 most populous countries. Each circle represents a country, positioned along a linear x-axis for population and a categorical y-axis for country name. The chart uses D3 v5, rendering as SVG, and employs `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` APIs. The data from `data.csv` is loaded via D3's `csv` function, with population values multiplied by 1000. The chart includes a title and axis labels, with a clean, margin-based layout.

Yyoghurtx
86% match
Loading thumbnail…

Scatter Plot w/ D3

This scatter plot displays the top 10 most populous countries in 2018 using data from World Population Prospects, with each point’s x-position representing population and y-position representing country. The visualization uses D3 v7 with `scaleLinear` for population and `scalePoint` for country categories, rendering circles as SVG elements. The code applies `axisBottom` and `axisLeft` with custom tick formatting via `format('.3s')` to abbreviate population values. Axis lines are removed, and gridlines extend across the plot. Population data is loaded from a CSV file and multiplied by 1000 to reflect actual values.

GGabe Nascimento
86% match