Scatter Plot

Scatter Plot

This scatter plot displays the population of the top 10 most populous countries using data from the 2017 World Population Prospects, with circles positioned on a linear x-axis and a point scale on the y-axis. The visualization loads data via d3.csv, applies a population multiplier, and renders an SVG using d3.scaleLinear, d3.scalePoint, d3.axisLeft, and d3.axisBottom. Gridlines extend across the chart, while tick labels use custom formatting to abbreviate large numbers.

DDaniel García

Scatter Plot

This scatter plot displays the populations of the top 10 most populous countries in 2018. Each circle is positioned along the x-axis by population and along the y-axis by country name. The chart uses d3.scaleLinear for the population axis and d3.scalePoint for the categorical country axis, with axes rendered via d3.axisLeft and d3.axisBottom. SVG circles, styled with a steelblue fill, are appended through D3's selection API. The data is loaded from a CSV file using d3.csv, with population values multiplied by 1000 to reflect actual counts.

Sslipperyd

Scatter Plot

This scatter plot displays the population of the top 10 most populous countries, with each country positioned along a point scale on the y-axis and its population on a linear x-axis. The visualization uses D3 v5 (d3.scaleLinear, d3.scalePoint, d3.axisLeft, d3.axisBottom) to render SVG circles. Population values, loaded from a CSV, are formatted with d3.format (e.g., “1.43B”), and grid lines are created using tickSize on the axes.

CCaleb

Scatter Plot

This scatter plot displays the populations of the top 10 most populous countries in 2018, using a categorical vertical axis for country names and a linear horizontal axis for population counts. Each circle’s position encodes the country’s population value, with a uniform radius for all points. The visualization is built with D3 v5, using `scaleLinear` and `scalePoint` for axes, and `axisBottom` and `axisLeft` to render ticks and grid lines. Data is loaded from a local CSV file and rendered as SVG circles.

Hhamza.miftah@gmail.com

Scatter Plot

This scatter plot displays the top 10 most populous countries, using circles positioned along a linear population scale and a point-based country axis. The visualization encodes each nation’s population with a circle’s horizontal placement, while vertical positioning separates countries for readability. The code leverages d3.csv for data loading, d3.scaleLinear and d3.scalePoint for scaling, and d3.axisLeft and d3.axisBottom to render labeled axes. Population values from the data file are multiplied by 1,000 and formatted with d3.format, with the SVG output styled using CSS.

Iisaachowen

Scatter Plot

This scatter plot displays the top 10 most populous countries as circles positioned along a linear population scale and a categorical country scale. The data, sourced from the 2018 United Nations World Population Prospects, is loaded via d3.csv and rendered as SVG. The visualization uses d3.scaleLinear, d3.scalePoint, d3.axisLeft, and d3.axisBottom with custom tick formatting and grid lines. Circle styling and axis labels are controlled through external CSS, demonstrating customization of D3 axes and scales.

Nnoelmiranda

Scatter Plot

This scatter plot shows 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 data comes from the 2017 World Population Prospects, multiplied by 1000 in the loader. The visualization uses D3 v7 with `scaleLinear`, `scalePoint`, `axisBottom`, and `axisLeft` to render the SVG chart, including gridlines and formatted tick labels that convert billions to the letter "B".

Aantoniojl@gmail.com

Scatter plot

This scatter plot displays the population of the top 10 most populous countries, with each circle positioned along a linear population scale on the x-axis and a point scale for country names on the y-axis. The visualization uses d3.csv to load data from a CSV file, d3.scaleLinear and d3.scalePoint for scaling, and d3.axisLeft and d3.axisBottom to render axes with grid lines. The SVG rendering applies a custom tick format to abbreviate large numbers, converting billions to "B".

JJason-Manbodh