ScaterPlot

100%

✓ Published0🌍 Public

Last edited May 20, 2020

Created on May 20, 2020

This example visualizes the top 10 most populous countries in 2018, using a scatter plot where each circle’s vertical position encodes the country name and the horizontal position encodes population size. D3.js v5 APIs handle the entire rendering: `csv` loads the data, `scaleLinear` and `scalePoint` map values to coordinates, and `axisBottom` and `axisLeft` generate the axes with custom tick formatting using `format`. The data originates from the United Nations World Population Prospects 2017, with populations multiplied by 1000 for display.

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. It also demonstrates customization of D3 axes.

See also the first bar chart visualization that this one builds on: Making a Bar Chart.

MIT Licensed

Similar vizzes

Loading thumbnail…

scaterplot

This scatterplot-style bar chart displays the top 10 most populous countries using 2018 population estimates from the United Nations World Population Prospects. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear` for the x-axis and `scalePoint` for categorical country placement. Custom axes with `axisBottom` and `axisLeft` include tick formatting that converts values to billions, while circles mark each country’s population. The code loads data from `data.csv` and multiplies populations by 1000 to reflect actual numbers.

Jjmmoser7

92% match

Loading thumbnail…

Scattor Plot

A scatter plot displays the population of the top 10 most populous countries, sourced from the 2018 United Nations World Population Prospects estimate. Using D3 v5, the code loads a CSV file, scales the population data on a linear x-axis, and plots points on an ordinal point-scale y-axis with SVG circles. It applies axisBottom and axisLeft to render gridlines and tick labels, formatted with d3.format, while styling titles and labels through CSS.

NNita

91% match

Loading thumbnail…

Scatter Plot

A scatter plot displays the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects 2019. Each circle’s vertical position corresponds to a country, while its horizontal position reflects population size on a linear scale. The visualization uses D3 v5’s `csv` loader, `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` to render SVG circles and gridlines, with tick labels formatted in billions.

AAbhijit Roy

90% match

Loading thumbnail…

ScaterPlot

This scatterplot displays the population of the top 10 most populous countries in 2018, based on United Nations data. The code uses D3 v5 with an SVG rendering approach, employing `d3.scalePoint` for the categorical y-axis and `d3.scaleLinear` for the population x-axis. Customized axes with formatted tick labels (converting billions to B) and gridlines are generated via `d3.axisBottom` and `d3.axisLeft`. The title and axis label are added as SVG text elements.

Uumihito

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

90% match

Loading thumbnail…

ScatterPlot2

This scatterplot displays the populations of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. It uses D3 v5 to render circles on an SVG canvas, with a linear scale for population and a point scale for country names. The code employs `d3.csv` to load the data, `scaleLinear` and `scalePoint` for positioning, and `axisBottom` and `axisLeft` for customized axes with tick marks and labels.

Llerik03

90% match

Loading thumbnail…

Scattar Plot

This scatter plot displays the population of the top 10 most populous countries, with each country represented by a large circle. The plot uses D3.js v7, with a linear scale for population and a point scale for country names. Population values are loaded from a CSV file, converted to thousands, and rendered as SVG circles using the `select`, `csv`, `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` APIs. Data originates from the 2017 World Population Prospects.

Iilsan142

90% match

Loading thumbnail…

Scaterplot

This scatterplot shows the population of the top 10 most populous countries, using a linear scale for population and a point scale for country names from United Nations 2018 estimates. The chart uses D3 v5 APIs including `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` to render an SVG visualization with custom tick formatting that converts large numbers to abbreviations. Gridlines extend from both axes, and circles are positioned using the scales with a fixed radius, while axes are customized by removing domain paths and styling tick elements via CSS.

Aantoinecarto

90% match