Scatterplot Tour
An animated tour of a three-cluster scatterplot cycles through zoomed-in views of each cluster’s bounding box before returning to the full overview. The visualization uses d3.zoom transitions to animate between predefined transforms, rendering points as zero-length SVG strokes with round caps for performance. Data is generated randomly with d3.randomNormal, and cluster colors are assigned via d3.scaleOrdinal with d3.schemeCategory10.
AI-generated descriptionScatterplot Tour
https://observablehq.com/@d3/scatterplot-tour@153
View this notebook in your browser by running a web server in this folder. For example:
python -m SimpleHTTPServer
Or, use the Observable Runtime to import this module directly into your application. To npm install:
npm install @observablehq/runtime@4
npm install https://api.observablehq.com/@d3/scatterplot-tour.tgz?v=3
Then, import your notebook and the runtime as:
import {Runtime, Inspector} from "@observablehq/runtime";
import define from "@d3/scatterplot-tour";
To log the value of the cell named “foo”:
const runtime = new Runtime();
const main = runtime.module(define);
main.value("foo").then(value => console.log(value));