Published unlisted
Edited
Sep 8, 2020
cell = html`<div style="width:${width - 16}px;
height:${height - 16}px;
border: 8px solid orange"
>
<style>body{margin:0}</style>
</div>`
{
while (true) yield document.documentElement.clientWidth;
}
width = Generators.observe(function(change) {
var width = change(document.body.clientWidth);
function resized() {
var w = document.body.clientWidth;
if (w !== width) change((width = w));
}
window.addEventListener("resize", resized);
return function() {
window.removeEventListener("resize", resized);
};
})
{
while (true) yield document.documentElement.clientHeight;
}
{
while (true) yield window.innerHeight;
} // in observable, this is informed by the iframe's height & changes with the total height of cells
{
while (true) yield screen.height; // not a solution: it is not linked to the viewport & does not change with orientation
}
{
while (true) yield window.screen.availHeight; // not much better
}
{
while (true) yield vh100.clientHeight;
} // in observable, using 100vh (in CSS) also changes with the total height of cells
screenHeight = screen.height
// Already so complicated, and still not working well………
height = Generators.observe(function(change) {
const embed = !document.location.host.match(/\.observableusercontent\.com$/);
var height = change(getHeight());
function resized() {
var h = getHeight();
if (h !== height) change((height = h));
}
window.addEventListener("resize", resized);
// window.addEventListener("orientationchange", resized);
return function() {
window.removeEventListener("resize", resized);
// window.removeEventListener("orientationchange", resized);
};
function getHeight() {
return embed
? window.innerHeight
: document.documentElement.clientWidth > 1000
? screenHeight
: 500;
}
})
vh100 = html`<div style="position:absolute; max-height: 4000px; height: 100vh; border: solid 1px green;">`
variable = html`<div style="height: ${50 *
(3 + Math.sin(now / 5000))}px; border: solid 1px red;">`
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.
