The avatar for @flekschas
Fritz Lekschas
👋 I am computer scientist researching intelligent and scalable visualization systems for biomedical data exploration. Harvard CS PhD '21.
Published
Edited
May 6, 2020
Fork of 👋 regl-scatterplot
Insert cell
md`# regl-scatterplot with a background image`
Insert cell
canvas = html`<canvas width="${width}" height="${height}"></canvas>`
Insert cell
width = 240
Insert cell
Insert cell
regl = createScatterplot.createRegl(canvas);
Insert cell
backgroundImage = await createScatterplot.createTextureFromUrl(
regl,
`https://picsum.photos/${Math.min(640, width)}/${Math.min(640, height)}/?random`,
true
);
Insert cell
scatterplot = createScatterplot.default({
regl: regl,
canvas: canvas,
width: width,
height: height,
pointSize: 4,
colors: ['#ff0000', '#00ff00', '#0000ff'],
backgroundImage
})
Insert cell
points = new Array(1000)
.fill()
.map(() => [-1 + Math.random() * 2, -1 + Math.random() * 2, '#ff33aa'])
Insert cell
scatterplot.draw(points)
Insert cell
Insert cell
Insert cell
Insert cell
require('regl@1.3.13/dist/regl.min.js');
Insert cell
require('pub-sub-es@1.2.1/dist/pub-sub-es.min.js');
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