Interactive data visualization
Public
Edited
Jan 9, 2023
previewCtxFunction({
fn: ctx => drawCamera({ctx, angle: -80}),
width: 100,
height: 100,
scale: 4,
});
function prepareStyle(_) {
const {ctx, lineWidth, strokeStyle} = _;
ctx.lineWidth = lineWidth;
ctx.strokeStyle = strokeStyle;
ctx.lineJoin = 'bevel';
}
function drawMainRect(_) {
const {ctx, mainRectWidth, mainRectHeight} = _;
ctx.beginPath();
ctx.moveTo(0, +mainRectHeight / 2);
ctx.lineTo(mainRectWidth, +mainRectHeight / 2);
ctx.lineTo(mainRectWidth, -mainRectHeight / 2);
ctx.lineTo(0, -mainRectHeight / 2);
ctx.closePath();
prepareStyle(_);
ctx.stroke();
}
function drawLens(_) {
const {ctx, lensWidth, lensHeight} = _;
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(-lensWidth, -lensHeight / 2);
ctx.lineTo(-lensWidth, +lensHeight / 2);
ctx.closePath();
prepareStyle(_);
ctx.stroke();
}
function drawCamera(_) {
_ = {
lineWidth: 1,
mainRectWidth: 10,
mainRectHeight: 5,
lensWidth: 5,
lensHeight: 5,
angle: 0,
strokeStyle: 'black',
..._,
};
const {ctx, angle} = _;
ctx.save();
ctx.rotate(degreesToRadians(angle));
drawMainRect(_);
drawLens(_);
ctx.restore();
}
function drawCameraPointingTo(_) {
_ = {
target: [0, 0],
..._,
};
const {target} = _;
drawCamera(_);
}
drawLens.ns = drawCamera.ns = {
lineWidth: {},
mainRectWidth: {},
mainRectHeight: {},
lensWidth: {},
lensHeight: {},
angle: {},
};
function previewCtxFunction(_) {
const {fn, width, height, scale} = _;
const canvas = document.createElement('canvas');
canvas.width = width * window.devicePixelRatio;
canvas.height = height * window.devicePixelRatio;
canvas.style.width = width + 'px';
canvas.style.height = height + 'px';
const ctx = canvas.getContext('2d');
ctx.translate(canvas.width / 2, canvas.height / 2);
const s = scale * window.devicePixelRatio;
ctx.scale(s, s);
fn(ctx);
return canvas;
}
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.
