Dr. Tanner is a research professor at the University of Tennessee working towards making data science accessible using AI tools.
SHADER = settle(viewof SHADER_);
{
return gs.render({
z0: 2, x0: 0, y0: 0,
nc: 4, nr: 4,
w: 256, h: 256,
shader: SHADER,
invalidation,
});
}
gs = {
const CONFIG = {
origin: 'http://127.0.0.1:8080',
w: 256,
h: 256,
shader: SHADER,
invalidation,
};
return {
config: CONFIG,
render: RENDER,
image: IMAGE,
src: SRC,
};
function RENDER(options) {
const { nr, nc, w, h } = Object.assign({}, CONFIG, options);
const ctx = DOM.context2d(nc * w, nr * h);
ctx.scale(w, h);
const canvas = ctx.canvas;
canvas.promise = RENDER_TILES({ ...options, ctx }).then(() => canvas);
return canvas;
}
async function RENDER_TILES(options) {
const { ctx, z0, x0, y0, nr, nc } = Object.assign({}, CONFIG, options);
const tiles = [];
for (let r=0; r<nr; ++r) {
for (let c=0; c<nc; ++c) {
const tile = RENDER_TILE({ ...options, r, c });
tiles.push(tile);
}
}
await Promise.all(tiles);
}
async function RENDER_TILE(options) {
const { ctx, z0, x0, y0, r, c } = Object.assign({}, CONFIG, options);
const image = await IMAGE({ ...options, z: z0, x: c+x0, y: r+y0 });
ctx.drawImage(image, c, r, 1, 1);
}
async function IMAGE(options) {
const { invalidation } = Object.assign({}, CONFIG, options);
const image = new Image();
invalidation.then(() => image.src = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEAAAAALAAAAAABAAEAAAI=;');
image.crossOrigin = 'anonymous';
image.src = SRC({ ...options });
await image.decode();
return image;
}
function SRC(options) {
const { z, x, y, w, h, shader, origin } = Object.assign({}, CONFIG, options);
const url = new URL(`/api/graph/${z}/${x}/${y}/${w}x${h}.jpg`, origin);
url.searchParams.set('shader', btoa(shader));
return url;
}
}
function MAKE_URL({ z, x, y, w=256, h=256, shader }={}) {
const url = new URL(`http://127.0.0.1:8080/api/graph/${z}/${x}/${y}/${w}x${h}.jpg`);
url.searchParams.set('shader', btoa(shader));
return url;
}
import { debounce } from '@mbostock/debouncing-input';
import { settle } from '@mjbo/settling-input';
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.
