Public
Edited
Nov 7, 2024
8 stars
Insert cell
Insert cell
umap-001.parquet
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
multiple = 1
Insert cell
mapSize = width * multiple
Insert cell
pointSize = 1 * multiple
Insert cell
pointOpacity = 0.5
Insert cell
points = scope.filter(d => d.x > -.5 && d.y > -.5)
Insert cell
xExtent = d3.extent(points, d => d.x)
Insert cell
yExtent = d3.extent(points, d => d.y)
Insert cell
rgb = 100
Insert cell
canvas = {
const width = mapSize
const height = mapSize
const margin = 20
const ctx = DOM.context2d(width, height);
ctx.fillStyle = "#111";
ctx.fillRect(0, 0, width, height);

const x = d3.scaleLinear()
.domain(xExtent)
.range([margin, width - margin])

const y = d3.scaleLinear()
.domain(yExtent)
.range([height - margin, margin])

// const opacity = animation
const opacity = pointOpacity
ctx.fillStyle = `rgb(${rgb},${rgb},${rgb},${opacity})`
ctx.globalCompositeOperation = "screen" // overlay
let i, s, len;
const rw = pointSize
len = points.length;
for(i = 0; i < len; i++) {
s = points[i]
// ctx.fillRect(x(s.x), y(s.y), rw, rw)
ctx.beginPath()
ctx.arc(x(s.x), y(s.y), rw, 0, 2*Math.PI)
ctx.fill()
}
return ctx.canvas;
}
Insert cell
duration = 10000
Insert cell
animation = {
let start = Date.now();
while (true) {
let elapsed = Date.now() - start;
if (elapsed > duration) start = Date.now();
yield elapsed / duration;
}
}
Insert cell
d3.groups(scope, d => d.cluster).sort((a,b) => b[1].length - a[1].length)
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more