A curious, positive human being – with a particular interest in Machine Intelligence, Human Centered Product Design and Music.
appendObservedArticleNode = (id, title, teaser, rootElement, observer) => {
let li = document.createElement("li");
let h3 = document.createElement("h3");
let p = document.createElement("p");
rootElement.append(li);
li.append(h3);
li.append(p);
h3.append(title);
p.append(teaser);
li.dataset.id = id;
observer.observe(li);
}
handleIntersect = (entries, observer) => {
entries.forEach(entry => {
let targetElementId = entry.target.dataset.id;
if (entry.isIntersecting) {
console.log(`Element with id ${targetElementId} became visible.`);
becameLastVisibleTimestamps[targetElementId] = Date.now();
} else {
let timeVisible =
Date.now() - becameLastVisibleTimestamps[targetElementId];
totalTimeVisible[targetElementId] += timeVisible;
console.log(
`Element with id ${targetElementId} became invisible. ` +
`Element was visible for ${timeVisible} ms now, ` +
`and ${totalTimeVisible[targetElementId]} ms in total so far.`
);
}
let stats = statsHtml.querySelector("#stats");
stats.innerHTML = "";
for (let [key, value] of Object.entries(totalTimeVisible)) {
let li = document.createElement("li");
stats.append(li);
li.append(`Element ${key}: ${value} ms`);
}
});
}
generateObservedArticles = (newsHtml, statsHtml, numArticles) => {
let root = newsHtml.querySelector("#articles");
let stats = statsHtml.querySelector("#stats");
root.innerHTML = "";
root.stats = "";
for (let i = 0; i <= numArticles; i++) {
let title = `Article ${i}`;
let teaser = loremipsum({ count: 1 });
becameLastVisibleTimestamps[i] = Date.now();
totalTimeVisible[i] = 0;
let observer = new IntersectionObserver(handleIntersect, {
threshold: 0.8
});
appendObservedArticleNode(i, title, teaser, root, observer);
}
}
generateObservedArticles(newsHtml, statsHtml, 5)
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.
