scatter plot Forked

100%

scatter plot Forked

✓ Published1🌍 Public

Last edited Oct 20, 2022

Created on Oct 1, 2022

This scatter plot displays the population of the top 10 most populous countries, with each circle positioned by country on the y-axis and population on the x-axis. The code uses D3 v5’s `scaleLinear` and `scalePoint` for axes, `axisBottom` and `axisLeft` for tick marks, and `format` to abbreviate large numbers like “B” for billions. It loads data from a local CSV file converted from the 2018 UN World Population Prospects estimate. SVG circles are rendered with a steelblue fill, and custom styling is applied via CSS for tick text, labels, and the title.

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…

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

93% match

Loading thumbnail…

scatter plot

This scatter plot displays the population of the ten most populous countries from the 2018 United Nations World Population Prospects estimate. Each circle’s horizontal position encodes population on a linear scale, while the vertical position uses a point scale for country names. The code uses D3 v7 APIs including `scaleLinear`, `scalePoint`, `axisBottom`, and `axisLeft`, with SVG rendering via data joins. The population values are converted from the CSV’s raw numbers into actual estimates by multiplying by 1,000. Custom tick formatting replaces “G” with “B” to show billions.

Gginnyching

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

92% match

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the population of the top 10 most populous countries, with circles positioned along a linear population scale and a point scale for country names. The code uses d3.scaleLinear, d3.scalePoint, d3.axisLeft, and d3.axisBottom to render the axes and plot, while custom tick formatting converts large numbers to abbreviated units. Data comes from the 2018 United Nations World Population Prospects estimate, loaded via d3.csv from a local CSV file, and rendered as SVG circles with a fixed radius.

Sshanmango

92% match

Loading thumbnail…

Scatter plot

This scatter plot displays the top 10 most populous countries, with circles positioned along a linear population scale and a point scale for country names. It uses D3 v6’s `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` to render SVG axes and marks. Population values from the 2018 UN World Population Prospects are loaded via `csv`, formatted with `format('.3s')`, and drawn as steelblue circles.

SShuyu Zheng

91% match

Loading thumbnail…

Fork of Making a Scatter Plot

This scatter plot displays the populations of the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects. Each circle represents a country, with its horizontal position encoding population size and vertical position indicating country name. The visualization uses d3.csv to load data, d3.scaleLinear and d3.scalePoint for positioning, and d3.axisLeft with d3.axisBottom for labeled axes. Population values are formatted with d3.format, and the SVG rendering includes grid lines and a title.

Rraphman100

91% match

Loading thumbnail…

Scatter Plot

This scatter plot displays the top 10 most populous countries, using a circle for each nation positioned along a linear population scale and a point scale for country names. The visualization reads population data from a CSV file sourced from the UN World Population Prospects, multiplying values by 1000 to reflect actual figures. Built with D3 v6, it uses `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` to render SVG elements, with custom tick formatting converting billions to "Md" and dashed grid lines for readability.

Aalobry

90% match

Loading thumbnail…

Scatter Plot, single js file

This scatter plot visualizes the populations of the top 10 most populous countries, with each circle’s x-position corresponding to population (in thousands) and y-position to country name. It uses D3 v5’s `scaleLinear`, `scalePoint`, `axisLeft`, `axisBottom`, and `format` to create and label the axes, while a linear scale maps population values. Data comes from the 2018 United Nations World Population Prospects. The SVG rendering applies custom tick styling, removes axis domains, and adds a title and axis label.

JJacob Potvin

90% match