Tech Lead at Taktile.
Formerly Firebase, Google
Public
Edited
May 2
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
project = (d) =>
d.map((d) => [
d[0] / (d[1] + 1), // screen x
d[2] / (d[1] + 1) // screen y
])
square = ([dx, dy, dz], color) => {
const id = `s(${dx},${dy},${dz})`;
const rounding = corner_radius;
const p = project([
[dx + rounding + padding, dy + padding, dz],
[dx + 1 - rounding - padding, dy + padding, dz],
[dx + 1 - padding, dy + padding, dz],
[dx + 1 - padding, dy + rounding + padding, dz],
[dx + 1 - padding, dy + 1 - rounding - padding, dz],
[dx + 1 - padding, dy + 1 - padding, dz],
[dx + 1 - rounding - padding, dy + 1 - padding, dz],
[dx + rounding + padding, dy + 1 - padding, dz],
[dx + padding, dy + 1 - padding, dz],
[dx + padding, dy + 1 - rounding - padding, dz],
[dx + padding, dy + rounding + padding, dz],
[dx + padding, dy + padding, dz],
[dx + rounding + padding, dy + 1 + padding, dz],
[dx + 1 - rounding - padding, dy + 1 + padding, dz],
[dx + 1 - padding, dy + 1 + padding, dz],
[dx + 1 - padding, dy + 1 + rounding + padding, dz],
[dx + 1 - padding, dy + 1 + 1 - rounding - padding, dz],
[dx + 1 - padding, dy + 1 + 1 - padding, dz],
[dx + 1 - rounding - padding, dy + 1 + 1 - padding, dz],
[dx + rounding + padding, dy + 1 + 1 - padding, dz],
[dx + padding, dy + 1 + 1 - padding, dz],
[dx + padding, dy + 1 + 1 - rounding - padding, dz],
[dx + padding, dy + 1 + rounding + padding, dz],
[dx + padding, dy + 1 + padding, dz]
]);
const coord = (index) => `${p[index][0]} ${p[index][1]}`;
const d0 = `M ${coord(0)}
L ${coord(1)}
C ${coord(2)}, ${coord(2)}, ${coord(3)}
L ${coord(4)}
C ${coord(5)},${coord(5)},${coord(6)}
L ${coord(7)}
C ${coord(8)},${coord(8)},${coord(9)}
L ${coord(10)}
C ${coord(11)},${coord(11)},${coord(0)}
Z`;
const d1 = `M ${coord(0 + 12)}
L ${coord(1 + 12)}
C ${coord(2 + 12)}, ${coord(2 + 12)}, ${coord(3 + 12)}
L ${coord(4 + 12)}
C ${coord(5 + 12)},${coord(5 + 12)},${coord(6 + 12)}
L ${coord(7 + 12)}
C ${coord(8 + 12)},${coord(8 + 12)},${coord(9 + 12)}
L ${coord(10 + 12)}
C ${coord(11 + 12)},${coord(11 + 12)},${coord(0 + 12)}
Z`;
return `<path id=${id} d="${d0}" fill="${color}">
<animate xlink:href="#${id}"
attributeName="d"
attributeType="XML"
begin="0s"
from="${d1}"
to="${d0}"
dur="${speed}s" repeatCount="indefinite"
/>
</path>
`;
}
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.
