Skip to main content
SimilarExport ZIP
100%

D3 Scatter Plot Basic

✓ Published1🌍 Public
Ssathishkottravel
Last edited Apr 25, 2020
Created on Apr 25, 2020

This example shows the world’s ten most populous countries as circles in a horizontally-oriented scatter plot, with each circle’s x-position mapped to population via `d3.scaleLinear` and its y-position to country name via `d3.scaleBand`. The SVG chart uses `d3.csv` to load population data, then applies a transition that animates the circles sliding rightward from the left edge. Axis labels and a title are added using `d3.axisBottom`, `d3.axisLeft`, and manual text elements, with tick formatting through `d3.format` to abbreviate large numbers. The chart is built in React with D3 v5.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot

This scatter plot displays the population of the world's ten most populous countries, with each circle positioned along the x-axis by population value and along the y-axis by country name. The visualization is rendered as an SVG using React and D3 v5, with the data loaded from a CSV file. The code implements scales and axes through `d3.scaleLinear`, `d3.scalePoint`, `d3.axisBottom`, and `d3.axisLeft`. Population tick labels are formatted using `d3.format` with the custom `.replace('G','B')` transformation.

Jjeelong
92% match
Loading thumbnail…

Scatter Plot

This scatter plot displays the population of the top 10 most populous countries, with circles positioned along a linear x-axis for population and a point scale y-axis for country names. The visualization uses D3 v5 APIs including `scaleLinear`, `scalePoint`, `axisBottom`, and `axisLeft` within an SVG rendered in React. Population values are loaded from a CSV file and formatted in billions, with gridlines extending across the plot. The chart includes a title and axis label, styled via CSS.

AAndy Zhang
91% match
Loading thumbnail…

Scatter Plot

This D3 v5 scatter plot displays the top ten most populous countries, using a linear scale for population on the x-axis and a point scale for country names on the y-axis. Each circle represents a country, with a tooltip showing the exact population on hover. The chart reads data from a CSV file, formats axis ticks using the `format` function, and renders axes via `axisBottom` and `axisLeft`. Circles are appended as SVG elements within a React-based visualization.

Eezzep66
90% match
Loading thumbnail…

Scatterplot

This scatterplot displays the population of the ten most populous countries along a horizontal axis, with country names on the vertical axis. It uses d3.scaleLinear for the population scale and d3.scalePoint for categorical country placement, rendering SVG circles via d3.select and data joins. The code leverages d3.axisBottom and d3.axisLeft with tick sizing to create gridlines, and d3.format abbreviates population values. Data is loaded asynchronously from a CSV file using d3.csv, with strings parsed to numbers before rendering.

Ssherryyx
90% match
Loading thumbnail…

Scatter Plot

This scatter plot displays the population of the top 10 most populous countries, with countries on the y-axis and population on the x-axis using circular markers. The code uses D3 v5’s `csv` to load data, `scaleLinear` and `scalePoint` for positioning, and `axisBottom` with a custom tick formatter to abbreviate numbers. SVG rendering occurs within a React starter template, with axes drawn using `axisLeft` and gridlines via tick sizes.

Ggilbster
90% 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
90% match
Loading thumbnail…

Scatter Plot

This scatter plot displays the population of the ten most populous countries, with each circle positioned along a horizontal population axis and a vertical categorical country axis. The visualization uses d3.csv to load the data, d3.scaleLinear for the population scale, and d3.scalePoint for the country positions. Axes are rendered with d3.axisLeft and d3.axisBottom, while d3.format applies compact tick labels. The SVG output styles circles with a steelblue fill and includes labeled axes and a title.

CConnor Trump
90% match
Loading thumbnail…

Scatterplot

This scatterplot displays the ten most populous countries with population on the x-axis and country names on the y-axis. Using D3’s `scaleLinear` and `scalePoint`, it maps the data from a CSV file into an SVG rendering. Axes are drawn with `axisBottom` and `axisLeft`, with formatted tick labels converting large numbers to billions. The chart is built within a React framework, using D3 v5’s selection and CSV parsing methods.

Ddamankwah
90% match