Scaterplot

100%

✓ Published0🌍 Public

Last edited Jul 5, 2019

Created on Jul 5, 2019

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.

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

93% match

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

91% match

Loading thumbnail…

Scatter Plot

This scatter plot depicts the populations of the top 10 most populous countries in 2018, based on United Nations data. It uses D3 v5 with an SVG rendering, employing `scaleLinear` for the population axis and `scalePoint` for the categorical country axis. Customized axes include formatted tick labels that convert large numbers to abbreviations, and grid lines extend through the plot area. Circles represent each country, and the visualization highlights axis customization techniques.

Yylzami40

90% match

Loading thumbnail…

ScaterPlot

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.

AAjayyy

90% match

Loading thumbnail…

Scatter Plot

This scatter plot displays the population of the top 10 most populous countries based on 2018 United Nations estimates, with each country positioned along a point scale and circles sized uniformly. It uses D3 v5’s `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` to render the axes, while `d3.csv` loads the data and `d3.format` customizes tick labels. The chart is drawn as an SVG, with grid lines extended from the axes and a title and axis label styled via CSS.

AAkshada Pradhan

90% match

Loading thumbnail…

Fork of Scatter Plot

This scatter plot visualizes the populations of the top 10 most populous countries, using a dataset from the 2017 United Nations World Population Prospects. The chart displays each country as a circle positioned along a linear population scale on the x-axis and a point scale for country names on the y-axis. The code uses D3 v5’s `scaleLinear`, `scalePoint`, and `axisBottom`/`axisLeft` to render the SVG, with custom tick formatting that abbreviates large numbers (e.g., replacing “G” with “B”). Axis labels and a title are added programmatically, while grid lines and tick styling come from D3’s axis API.

EElena Momtcheva

90% match

Loading thumbnail…

Scatter Plot

This scatter plot displays the population of the top 10 most populous countries based on 2018 estimates from the United Nations World Population Prospects. The visualization uses a linear scale for population on the x-axis and a point scale for country names on the y-axis, with circles sized at a fixed radius of 20 pixels. D3 v5 handles the data loading through `csv()`, while `scaleLinear`, `scalePoint`, `axisBottom`, and `axisLeft` construct the chart elements. The axes are customized with formatted tick labels that convert large numbers to abbreviations, such as “B” for billion, and grid lines extend across the plot area.

Llrakla

90% match

Loading thumbnail…

scatter plots

This scatter plot shows the top 10 most populous countries, with each country as a circle positioned along a linear population scale and a point scale for country names. The data comes from United Nations population estimates converted to thousands. Built with D3 v5, it uses `scaleLinear`, `scalePoint`, `axisBottom`, and `axisLeft` to render the SVG visualization, including custom tick formatting that abbreviates large numbers from G to B.

Sstefichim

90% match