Skip to main content
100%

D3: A simple scatterplot with SVG

✓ Published1🌍 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).

MIT Licensed

Similar vizzes