Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

D3: A simple scatterplot with SVG

Public visualization

D3: A simple scatterplot with SVG

0 stars1🌍 Public
Nnikomc
Last edited Mar 31, 2020
Created on Mar 31, 2020

This example shows a simple scatterplot of ten data points, each rendered as an SVG circle and labeled with its coordinates. The chart uses the D3.js library (version 3) to programmatically build the visualization: first, the code creates an SVG canvas via `d3.select` and `.append("svg")`, then uses `.selectAll("circle").data(dataset).enter()` to map the 2D array of `[x, y]` values to circle positions and radius sizes. Red text labels are added in a similar declarative manner, with font styling applied through attribute setters. The raw coordinate pairs come from a hardcoded dataset, and the circle radius is computed from the data point’s height, creating a visual encoding of magnitude.

AI-generated description

Making a scatterplot with D3 (from Scott Murray's book).

Comments

Sign in to join the discussion.

MIT Licensed