Interactive data visualization
Public
Edited
Sep 23, 2023
2 stars
previewSlide({
width: 1920, height: 1080, timeMin: 0, timeMax: 34, duration: 34,
render(time, ctx) {
$.anim.time = time;
const {width, height} = this;
ctx.globalAlpha = 1;
ctx.fillStyle = 'black';
ctx.fillRect(0, 0, width, height);
ctx.fillStyle = 'white';
ctx.font = '20px monospace';
ctx.textAlign = 'left';
ctx.textBaseline = 'top';
ctx.fillText('GPT vis test scene: ' + $.camera.scene.padStart(3) + ' time: ' + time.toFixed(2).padStart(6), 10, 10);
ctx.save();
rect.camera($.camera.rect, ctx, 1080);
// for (const r of Object.values($.sr)) {
// r.draw(ctx);
// }
// for (const item of $.ssr) {
// for (const r of Object.values(item)) {
// r.draw(ctx);
// }
// }
ctx.globalAlpha = $.sr.posVec.opacity;
drawVector(ctx, srVecVals.posVec, $.sr.posVec.rect, $.sr.posVec.opacity === 1 && $.camera.scene !== '10' ? 'position encoding #5' : '');
ctx.globalAlpha = $.sr.inWordVec.opacity;
drawVector(ctx, srVecVals.inWordVec, $.sr.inWordVec.rect, $.sr.inWordVec.opacity === 1 && $.camera.scene !== '10' ? 'token encoding #5' : '');
ctx.globalAlpha = $.sr.inVec.opacity;
drawVector(ctx, srVecVals.inVec, $.sr.inVec.rect, $.sr.inVec.opacity === 1 ? 'input vector #5' : '');
if ($.camera.scene === '60') {
drawLinearTransform(ctx, $.sr.inVec.rect, $.sr.keyVec.rect, $.sr.keyVec.opacity);
drawVector(ctx, srVecVals.keyVec, $.sr.keyVec.rect, 'key vector #5', $.sr.keyVec.opacity * 0.9 + 0.15);
} else {
ctx.globalAlpha = $.sr.keyVec.opacity;
drawVector(ctx, srVecVals.keyVec, $.sr.keyVec.rect, 'key vector #5');
}
if ($.camera.scene === '70') {
drawLinearTransform(ctx, $.sr.inVec.rect, $.sr.queryVec.rect, $.sr.queryVec.opacity);
drawVector(ctx, srVecVals.queryVec, $.sr.queryVec.rect, 'query vector #5', $.sr.queryVec.opacity * 0.9 + 0.15);
} else {
ctx.globalAlpha = $.sr.queryVec.opacity;
drawVector(ctx, srVecVals.queryVec, $.sr.queryVec.rect, 'query vector #5');
}
if ($.camera.scene === '80') {
drawLinearTransform(ctx, $.sr.inVec.rect, $.sr.valueVec.rect, $.sr.valueVec.opacity);
drawVector(ctx, srVecVals.valueVec, $.sr.valueVec.rect, 'value vector #5', $.sr.valueVec.opacity * 0.9 + 0.15);
} else {
ctx.globalAlpha = $.sr.valueVec.opacity;
drawVector(ctx, srVecVals.valueVec, $.sr.valueVec.rect, 'value vector #5');
}
$.ssr.forEach(({storedValueVec, storedKeyVec, storedQueryVec}, i) => {
ctx.globalAlpha = storedValueVec.opacity;
drawVector(ctx, ssrVecVals[i].storedValueVec, storedValueVec.rect, 'value vector #' + i);
if (i === 5 && ['150', '160'].includes($.camera.scene) || ['170'].includes($.camera.scene)) {
} else {
ctx.globalAlpha = storedQueryVec.opacity;
drawVector(ctx, ssrVecVals[i].storedQueryVec, storedQueryVec.rect, 'query vector #5');
ctx.globalAlpha = storedKeyVec.opacity;
drawVector(ctx, ssrVecVals[i].storedKeyVec, storedKeyVec.rect, 'key vector #' + i);
}
});
if (['150', '160', '170'].includes($.camera.scene)) {
drawScalarProduct(
ctx,
ssrVecVals[5].storedKeyVec,
$.ssr[5].storedKeyVec.rect,
ssrVecVals[5].storedQueryVec,
$.ssr[5].storedQueryVec.rect,
utils.clamp((time - 26) / 2) * 2,
ssrVecVals[5].scalarProduct,
'scalar product #5',
)
}
if (['170'].includes($.camera.scene)) {
$.ssr.forEach(({storedKeyVec, storedQueryVec}, i) => {
if (i === 5) return;
drawScalarProduct(
ctx,
ssrVecVals[i].storedKeyVec,
storedKeyVec.rect,
ssrVecVals[i].storedQueryVec,
storedQueryVec.rect,
utils.clamp((time - 30) / 2) * 2,
ssrVecVals[i].scalarProduct,
'scalar product #' + i,
);
});
}
ctx.restore();
},
}, 500)
srVecVals = {
const res = {
posVec: getRandomVector(700),
inWordVec: getRandomVector(700),
inVec: getRandomVector(700),
attnVec: getRandomVector(700),
valueVec: getRandomVector(700),
keyVec: getRandomVector(100),
queryVec: getRandomVector(100),
};
res.posVec = res.posVec.map((x, num) => num > 650 ? x : null);
res.inWordVec = res.inWordVec.map((x, num) => num > 650 ? null : x);
res.inVec = res.posVec.map((x, num) => x + res.inWordVec[num]);
res.attnVec = res.inVec.map(x => x);
return res;
}
ssrVecVals = {
const res = new Array(6).fill(0).map((_, num) => ({
storedValueVec: num === 5 ? srVecVals.valueVec : getRandomVector(700),
storedKeyVec: num === 5 ? srVecVals.keyVec : getRandomVector(100),
storedQueryVec: srVecVals.queryVec,
scalarProduct: Math.random(),
}));
return res;
}
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.
