Interactive data visualization
Public
Edited
Mar 15, 2023
ctx = DOM.context2d(width, 400)
ctx.canvas
function smooth(t) {
return (1 - Math.cos(t * Math.PI)) / 2;
}
mutable curTr = tr12
{
let t = 0;
while (true) {
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
curTr(ctx, smooth(t % 1));
t += 0.02
yield 1;
}
}
function state1(ctx) {
const dpi = 1 / window.devicePixelRatio;
const {width, height} = ctx.canvas;
const cx = width * dpi / 2;
const cy = height * dpi / 2;
const r = height * dpi * 0.3;
ctx.strokeStyle = 'black';
ctx.lineWidth = 1;
ctx.strokeRect(cx - r, cy - r, r * 2, r * 2);
}
function tr12(ctx, t) {
const dpi = 1 / window.devicePixelRatio;
const {width, height} = ctx.canvas;
const cx = width * dpi / 2;
const cy = height * dpi / 2;
const r = height * dpi * 0.3;
const step = r * 0.2 * t;
ctx.strokeStyle = 'black';
ctx.lineWidth = 1;
for (let i=-2; i<= 2; i++) {
ctx.strokeRect(cx - r - step * i, cy - r + step * i, r * 2, r * 2);
}
}
function state2(ctx) {
const dpi = 1 / window.devicePixelRatio;
const {width, height} = ctx.canvas;
const cx = width * dpi / 2;
const cy = height * dpi / 2;
const r = height * dpi * 0.3;
const step = r * 0.2;
ctx.strokeStyle = 'black';
ctx.lineWidth = 1;
for (let i=-2; i<= 2; i++) {
ctx.strokeRect(cx - r - step * i, cy - r + step * i, r * 2, r * 2);
}
}
function tr1(ctx, t) {
ctx.fillRect(10, 10, 50, 50);
}
{
function onKeyDown(e) {
if (e.key === 'a') {
mutable curTr = tr12;
} else if (e.key === 'b') {
mutable curTr = state1;
} else if (e.key === 'c') {
mutable curTr = state2;
}
}
document.addEventListener('keydown', onKeyDown);
invalidation.then(() => document.removeEventListener('keydown', onKeyDown));
}
d3 = require('d3')
d3.schemeCategory10
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.
