Interactive data visualization
Public
Edited
Aug 14, 2023
tokens = [{
s: 'Hello',
i: 10,
p: 0,
}, {
s: ' world',
i: 20,
p: 1,
}]
vec = ({w: 30, h: 5, lw: 0.5, s: 4})
miniVec = ({...vec, w: 15})
class TokenScene extends Scene {
tokenVec = R();
posVec = R();
inVec = R();
inNormVec = R();
KQVMat = R();
KVec = R();
VVec = R();
QVec = R();
constructor(parent, p) {
super();
this.parent = parent;
this.p = p;
this.i();
}
get baseX() {
return this.p.p * 40;
}
i() {
withDur(0, () => {
this.tokenVec({...vec, x: this.baseX, y: 0, t: `pos #${this.p.p + 1}`});
this.posVec({...vec, x: this.baseX, y: 10, t: `token #${this.p.i}`});
this.inVec({...vec, x: this.baseX, y: 20, t: `inX`});
this.inNormVec({...vec, x: this.baseX, y: 20, t: `inNormVec`});
this.KQVMat({...vec, h: 15, x: this.baseX, y: 40, t: `KQVMat`});
this.KVec({...vec, x: this.baseX, y: 30, t: `KVec`});
this.VVec({...vec, x: this.baseX, y: 30, t: `VVec`});
this.QVec({...vec, x: this.baseX, y: 30, t: `QVec`});
});
}
a() {
this.tokenVec({y: this.inVec.y});
this.posVec({y: this.inVec.y});
}
b() {
this.parent.cam({y: this.inVec.y});
}
c() {
this.inNormVec({y: 30});
}
d() {
this.parent.cam({y: 40});
}
e() {
this.QVec({y: 50, w: miniVec.w});
}
f() {
this.QVec({y: 55});
this.VVec({y: 50, w: miniVec.w});
}
g() {
this.QVec({y: 60});
this.VVec({y: 55});
this.KVec({y: 50, w: miniVec.w});
}
}
s//.key('c').key('d')
show(s)
class RootScene extends Scene {
cam = R();
tokenScenes = tokens.map(token => new TokenScene(this, token));
constructor() {
super();
this.i();
}
i() {
withDur(0, () => {
this.cam({h: 50, x: 20, y: 10});
this.tokenScenes.forEach(ts => ts.i());
})
}
key(key) {
const ts0 = this.tokenScenes[0];
if (key in ts0) {
ts0[key]();
}
return this;
}
}
s = new RootScene()
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.
