Public
Edited
Sep 22, 2023
1 fork
Importers
1 star
Insert cell
Insert cell
center = function([x0, y0, width, height]) {
return [x0 + width / 2, y0 + height / 2];
}
Insert cell
relPoint = function([x0, y0, width, height], rx, ry) {
return [x0 + width * rx, y0 + height * ry];
}
Insert cell
ratio = function([x0, y0, width, height]) {
return width / height;
}
Insert cell
diagonal = function([x0, y0, width, height]) {
return (width ** 2 + height ** 2) ** 0.5;
}
Insert cell
Insert cell
function pt([x, y], radius=0) {
return [x - radius, y - radius, radius * 2, radius * 2];
}
Insert cell
pad = function([x0, y0, width, height], pad) {
return [x0 + pad, y0 + pad, width - pad * 2, height - pad * 2];
}
Insert cell
relPad = function([x0, y0, width, height], relPad) {
return [x0 + relPad * width, y0 + relPad * height, width - relPad * 2 * width, height - relPad * 2 * height];
}
Insert cell
centeredAroundPt = function([x0, y0, width, height], [x, y]) {
return [x - width / 2, y - height / 2, width, height];
}
Insert cell
centeredAroundRect = function(rect1, rect2) {
return centeredAroundPt(rect1, center(rect2));
}
Insert cell
scale = function(rect, s) {
return centeredAroundPt([0, 0, rect[2] * s, rect[3] * s], center(rect));
}
Insert cell
inscribe = function(rect1, rect2) {
const r1 = ratio(rect1);
const r2 = ratio(rect2);
const [x0, y0, width, height] = rect2;
return centeredAroundRect(
scale(
rect1,
r1 < r2 ? rect2[3] / rect1[3] : rect2[2] / rect1[2]
),
rect2,
);
}
Insert cell
outscribe = function(rect1, rect2) {
const r1 = ratio(rect1);
const r2 = ratio(rect2);
const [x0, y0, width, height] = rect2;
return centeredAroundRect(
scale(
rect1,
r2 < r1 ? rect2[3] / rect1[3] : rect2[2] / rect1[2],
),
rect2,
);
}
Insert cell
Insert cell
Insert cell
draw = function([x0, y0, width, height], ctx, {
stroke,
fill,
lineWidth,
lineJoin,
radius,
}) {
ctx.strokeStyle = stroke ?? 'black';
ctx.fillStyle = fill ?? 'transparent';
ctx.lineWidth = lineWidth ?? 1;
ctx.lineJoin = lineJoin ?? 'miter';
ctx.beginPath();
ctx.roundRect(x0, y0, width, height, radius ?? 0);
ctx.fill();
ctx.stroke();
}
Insert cell
Insert cell
camera = function(rect, ctx, canvasHeight) {
const canvasWidth = ctx.canvas.width / ctx.canvas.height * canvasHeight;
const [x0, y0, w, h] = outscribe(
[0, 0, canvasWidth, canvasHeight],
rect,
);
const s = canvasHeight / h;
ctx.scale(s, s);
ctx.translate(-x0, -y0);
}
Insert cell
Insert cell
transform = function(rect1, rect2, ctx) {
const s = rect1[3] / rect2[3];
ctx.scale(s, s);
ctx.translate(rect2[0] - rect1[0], rect2[1] - rect1[1]);
}
Insert cell
Insert cell
bbox = function(objs) {
let x0 = Infinity, x1 = -Infinity, y0 = Infinity, y1 = -Infinity;
for (const obj of objs) {
const [ox0, oy0] = obj;
const ox1 = ox0 + (obj[2] || 0);
const oy1 = oy0 + (obj[3] || 0);
x0 = Math.min(x0, ox0);
x1 = Math.max(x1, ox1);
y0 = Math.min(y0, oy0);
y1 = Math.max(y1, oy1);
}
return [x0, y0, x1 - x0, y1 - y0];
}
Insert cell
Insert cell
function extend(rect, rows, cols) {
const [x0, y0, w, h] = rect;
return [x0, y0, w * rows, h * cols];
}
Insert cell
function cell(rect, cols, rows, col, row) {
const [x0, y0, w, h] = rect;
const [colW, rowH] = [w / cols, h / rows];
return [x0 + colW * col, y0 + rowH * row, colW, rowH];
}
Insert cell
Insert cell
function compose(rect1, rect2) {
const [x0a, y0a, wa, ha] = rect1;
const [x0b, y0b, wb, hb] = rect2;
return [
x0a + x0b * wa,
y0a + y0b * ha,
wa * (wb ?? 1),
ha * (hb ?? 1),
]
}
Insert cell
function composePt(rect, pt) {
const [x0, y0, w, h] = rect;
const [x, y] = pt;
return [
x0 + x * w,
y0 + y * h,
]
}
Insert cell
Insert cell
rect = ({
center,
relPoint,
ratio,
diagonal,
centeredAroundPt,
centeredAroundRect,
pt,
pad,
relPad,
scale,
inscribe,
outscribe,
draw,
camera,
transform,
bbox,
extend,
cell,
compose,
composePt,
})
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more