Endpoint Services Logo / Endpoint Services

Extending Observable to the backend with a custom serverless runtime. Innovative live-coding workflows against production traffic.

Workspace

Published

Edited

Aug 23, 2022

Importers

logo("80px")

logo("512px")

logo = (size) => {

const face_letter_fill = ['red','green','blue'];

const x_to_screen = (x) => [ 0.7 * x, 0.4 * x];

const y_to_screen = (y) => [ 0.7 * y, -0.4 * y];

const z_to_screen = (z) => [ 0, -z];

const world_to_screen = (w) => {

const x_s = x_to_screen(w[0]);

const y_s = y_to_screen(w[1]);

const z_s = z_to_screen(w[2]);

return [x_s[0] + y_s[0] + z_s[0], x_s[1] + y_s[1] + z_s[1]]

};

function dimSwap(vertex, face) {

if (face === 0) return [vertex[0], vertex[1], vertex[2]];

if (face === 1) return [vertex[1], vertex[2], vertex[0]];

if (face === 2) return [vertex[2], vertex[0]-1, vertex[1]];

}

const inner = 0.24;

const innerEdge = 1 - inner;

// Figure out middle

const v0_1_0 = world_to_screen([0, 1, 0]);

const v1_0_1 = world_to_screen([1, 0, 1]);

const cx = v1_0_1[0];

const cy = (v1_0_1[1] + v0_1_0[1]) * 0.5;

return svg`<svg width=${size} viewBox="${cx - 1} ${cy - 1} 2 2" >

<circle

cx=${cx} cy=${cy} r="1"

fill="black"

${range(3).map(face => svg`<polygon

fill=${face_letter_fill[face]}

stroke="white"

stroke-width="0.03"

stroke-linejoin="round"

points="

${world_to_screen(dimSwap([1, 0, 1], face)).join()}

${world_to_screen(dimSwap([1, 1, 1], face)).join()}

${world_to_screen(dimSwap([1, 1, innerEdge], face)).join()}

${world_to_screen(dimSwap([1, inner, innerEdge], face)).join()}

${world_to_screen(dimSwap([1, inner, 0.5 + 0.5 * inner], face)).join()}

${world_to_screen(dimSwap([1, 1, 0.5 + 0.5 * inner], face)).join()}

${world_to_screen(dimSwap([1, 1, 0.5 - 0.5 * inner], face)).join()}

${world_to_screen(dimSwap([1, inner, 0.5 - 0.5 * inner], face)).join()}

${world_to_screen(dimSwap([1, inner, inner], face)).join()}

${world_to_screen(dimSwap([1, 1, inner], face)).join()}

${world_to_screen(dimSwap([1, 1, 0], face)).join()}

${world_to_screen(dimSwap([1, 0, 0], face)).join()}

/>`)}

</svg>`

}

md`

source: http://www.math.brown.edu/tbanchof/Beyond3d/chapter8/section01.html

![Cube coordinates](${await FileAttachment("image.png").url()})`

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