Skip to main content
SimilarExport ZIP
100%

Scatter Plot with D3.js!

✓ Published1🌍 Public
LLidiamir
Last edited Mar 12, 2021
Created on Mar 12, 2021

This example shows a scatter plot of population data for five countries, with country names on the y-axis and population on the x-axis. It uses D3 v6 with the `select`, `csv`, `scaleLinear`, `scalePoint`, `axisLeft`, `axisBottom`, and `format` APIs to load data from a CSV file and render SVG circles. The chart includes custom tick formatting that converts abbreviations like “G” to “B” and displays gridlines generated by `tickSize`.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter plots

This scatter plot displays population figures for five countries, with each circle positioned along a y-axis of country names and an x-axis of population values. The visualization uses d3.csv to load the data, converts population strings to numbers, and renders SVG circles scaled with d3.scaleLinear and d3.scalePoint. Axis creation relies on d3.axisLeft and d3.axisBottom, with tick formatting that replaces "G" with "B" for billion. The chart includes gridlines, axis labels, and a title, with styling applied via external CSS.

TTimothy sit
88% match
Loading thumbnail…

d3 Scatter Plot

This example visualizes the population of the ten most populous countries as a scatter plot. It uses D3 v5 to load a CSV file and scales, with `scaleLinear` mapping population to the x-axis and `scalePoint` mapping country names along the y-axis. Circles represent each country, with tick marks and labels styled via CSS. The SVG-based chart renders axes with `axisBottom` and `axisLeft`, and uses text elements to label the chart and its population axis.

JJohnPaulPagelerJr
88% match
Loading thumbnail…

Scatter Plot

A scatter plot displays population figures for the five most populous countries, with circles positioned along a linear scale for population size and a point scale for country names. The chart includes labeled axes, gridlines, and a title, with data loaded from a CSV file using `d3.csv`. The visualization is rendered as an SVG using D3 v5, utilizing `scaleLinear`, `scalePoint`, `axisLeft`, `axisBottom`, and `selectAll` to bind data to circle elements.

PPulkit Rohilla
87% match
Loading thumbnail…

ScatterPlot

A scatter plot displays population totals for ten countries, with each circle positioned along a linear population axis and a point scale for country names. The chart uses D3 v5, loading data from a CSV file and rendering to SVG. It applies `scaleLinear`, `scalePoint`, `axisBottom`, and `axisLeft`, with formatted tick labels that convert billions to abbreviated notation and grid lines via tick sizes.

KKyllVis
87% match
Loading thumbnail…

Scatter Plot

This scatter plot visualizes population data for five countries, with each circle’s horizontal position encoding population size and vertical position encoding country name. Built with React and D3 v5, the visualization uses `scaleLinear` for the x-axis, `scalePoint` for the y-axis, and `axisBottom`/`axisLeft` for tick marks and grid lines. Data is loaded from a CSV file and rendered as SVG circles, with formatting applied to abbreviate large population numbers.

DdeafMother
87% match
Loading thumbnail…

scatter plot

A scatter plot displays population figures for ten countries, with each circle positioned along a linear population axis and a point scale for country names. The visualization uses D3 v5 APIs including `scaleLinear`, `scalePoint`, `axisBottom`, and `axisLeft`, rendering SVG circles with a steelblue fill. Data comes from a CSV file, with populations multiplied by 1000 and formatted using `format('.3s')` to show billions. Gridlines extend across the plot, and axis labels are added via appended SVG text elements.

Llinkshady
86% match
Loading thumbnail…

Scatter Plot Test

This scatter plot displays the ten most populous countries, with population on the x-axis and country names on the y-axis. Using D3 v5, the code loads CSV data, scales the population values, and renders circles via SVG. It employs `scaleLinear` and `scalePoint` for axes, `axisBottom` and `axisLeft` for ticks, and custom formatting to abbreviate numbers. The chart includes axis labels and a titled heading, with margins and styles applied through separate CSS.

JJefferson Abreu
86% match
Loading thumbnail…

Scatter Plot of Country Populations from CSV file

This example displays a scatter plot of country populations from a CSV file, with each circle positioned along a point scale for countries and a linear scale for population values. The visualization includes labeled axes, grid lines, and a formatted x-axis that abbreviates large numbers. Using D3 v5, the code loads data with `d3.csv`, scales it with `d3.scaleLinear` and `d3.scalePoint`, and renders the chart as SVG elements including axes and circles.

Fframptonb
86% match