Reusable Scatter Plot

100%

Reusable Scatter Plot

✓ Published1🌍 Public

Last edited Oct 27, 2025

Created on Oct 27, 2025

This reusable scatter plot displays population versus area for geographic data, with points colored by continent. The visualization uses D3.js v7 to load data via `d3.tsv`, applying a custom chart module that defines scales, axes, and tooltips. It renders circles positioned with `scaleLinear` and colored via `scaleOrdinal`, while interactive mouseover events trigger tooltips showing the point's label and values.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Reusable Scatter Plot

This scatter plot visualizes population against area for countries, with each point colored by continent. The reusable chart module follows Mike Bostock’s `chart()` pattern, using `d3.scaleLinear` for both axes, `d3.scaleOrdinal` with `d3.schemeCategory10` for color encoding, and `d3.axisBottom`/`d3.axisLeft` with gridlines. Data loads via `d3.tsv` from a GitHub gist, and interactive tooltips appear on `mouseover` using D3 v7 selections.

Sshabanasyed2266@gmail.com

87% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This scatter plot compares the area and population density of world countries, with each point colored by continent and labeled with a tooltip showing population, area, and density. The visualization is built as a reusable D3 function, using `d3.csv` to load `world_population.csv`, `d3.scaleLinear` for axes, `d3.scaleOrdinal` for colors, and `d3.symbol` for point shapes. The chart includes axis caps, a legend, and hover tooltips, rendered as SVG with smooth transitions.

MMd Fahimul Kabir Chowdhury

84% match

Loading thumbnail…

Reusable D3 Scatter Plot

This example presents a population scatter plot, displaying the relationship between years and population size as individual steel-blue circles. The chart renders in full-screen SVG, with axes and labels for both dimensions. Built with D3 v7, the visualization uses `d3.csv` to load the population dataset, `d3.scaleLinear` for positioning, and `d3.axisBottom` and `d3.axisLeft` to draw the scales. The code is structured as a reusable `scatterPlot` function, which the main script configures via method chaining for dimensions, radius, color, and margins, then binds to the DOM with `d3.select('#chart').call(chart)`.

Aamalli7433@gmail.com

81% match

Loading thumbnail…

Scatter Plot

This scatter plot displays population figures for global regions, with each circle’s horizontal position encoding the population value and vertical position mapping to the region name. The chart uses D3 v5 APIs including `scaleLinear` for the x-axis, `scalePoint` for categorical y-axis placement, and `axisBottom`/`axisLeft` for grid lines. Data is loaded from a CSV file via `csv`, with population values multiplied by 1000. The visualization is rendered as SVG with light green circles, styled axes, and a title.

HHadi Boukdir

81% match

Loading thumbnail…

Scatter plot

This scatter plot shows population counts for several countries, with each country positioned along the y-axis and its population scaled along the x-axis. The visualization uses D3 v5 within a React framework, rendering to SVG. It employs `d3.csv` to load data, `d3.scaleLinear` for the x-axis, `d3.scalePoint` for the categorical y-axis, and `d3.axisLeft` and `d3.axisBottom` for labeled gridlines. A custom tick formatter abbreviates large numbers, and circles are appended with a fixed radius of 10.

VVPTomi

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

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

80% match

Loading thumbnail…

Scatter Plot Mothafockas

This scatter plot displays the population of each continent in 2018, with circles plotted along a linear population scale and a point-based categorical axis for continents. The visualization uses D3 v5 APIs including `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` to render SVG circles and axes. Population values from the CSV are formatted with abbreviations (e.g., “B” for billions), and grid lines extend across the plot. The chart also includes axis labels and a title, styled with custom CSS for fonts and circle transparency.

Vvsalas20

80% match