Engineer & Educator | Observable Ambassador | Karaoke Enthusiast
cardDeck = ({
suits: ["♣️", "♦️", "♥️", "♠️"],
court: ["J", "Q", "K", "A"],
[Symbol.iterator]: function* () {
for (let suit of this.suits) {
for (let i = 2; i <= 10; i++) yield suit + i;
for (let c of this.court) yield suit + c;
}
}
})
[...cardDeck]
function* infinityAndBeyond() {
let i = 1;
while (true) {
yield i++;
}
}
function* take(n, iterable) {
for (let item of iterable) {
if (n <= 0) return;
n--;
yield item;
}
}
taken = [...take(5, infinityAndBeyond())]
function* map(iterable, mapFn) {
for (let item of iterable) {
yield mapFn(item);
}
}
squares = [
...take(
9,
map(infinityAndBeyond(), (x) => x * x)
)
]
now
t = Math.sin(now / 1000) * 0.5 + 0.5
function binaryTreeNode(value) {
let node = { value };
node[Symbol.iterator] = function* depthFirst() {
yield node.value;
if (node.leftChild) yield* node.leftChild;
if (node.rightChild) yield* node.rightChild;
};
return node;
}
tree = {
const root = binaryTreeNode("root");
root.leftChild = binaryTreeNode("branch left");
root.rightChild = binaryTreeNode("branch right");
root.leftChild.leftChild = binaryTreeNode("leaf L1");
root.leftChild.rightChild = binaryTreeNode("leaf L2");
root.rightChild.leftChild = binaryTreeNode("leaf R1");
return root;
}
[...tree]
getSwapiPagerator = (endpoint) =>
async function* () {
let nextUrl = `https://swapi.dev/api/${endpoint}`;
while (nextUrl) {
const response = await fetch(nextUrl);
const data = await response.json();
nextUrl = data.next;
yield* data.results;
}
}
// Example adapted from Luciano Mammino's https://www.nodejsdesignpatterns.com/blog/javascript-async-iterators/
starWars = ({
characters: {
[Symbol.asyncIterator]: getSwapiPagerator("people")
},
planets: {
[Symbol.asyncIterator]: getSwapiPagerator("planets")
},
ships: {
[Symbol.asyncIterator]: getSwapiPagerator("starships")
}
})
{
const results = [];
for await (const page of starWars.ships) {
console.log(page.name);
results.push(page.name);
yield results;
}
}
space = () => html`<div style="height:40em"></div>`
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.
