The avatar for @tomlarkworthy
Tom Larkworthy
Tech Lead at Taktile. Formerly Firebase, Google
Public
patterns
Edited
May 1
Importers
2 stars
Insert cell
Insert cell
Insert cell
Insert cell
viewof counter = interval({ period: 500, invalidation })
Insert cell
Insert cell
counter
Insert cell
Insert cell
viewof fizz = map({
view: viewof counter,
map: (count) => {
if (count % 3 == 0) return "Fizz";
return null;
},
invalidation
})
Insert cell
Insert cell
fizz
Insert cell
Insert cell
viewof buzz = map({
view: viewof counter,
map: (count) => {
if (count % 5 == 0) return "Buzz";
return null;
},
invalidation
})
Insert cell
buzz
Insert cell
Insert cell
viewof fizzBuzzCombineLatest = combineLatest({
// three views
views: [viewof counter, viewof fizz, viewof buzz],
// three **values**
map: (count, fizz, buzz) =>
fizz && buzz ? fizz + buzz : fizz || buzz || count,
invalidation
})
Insert cell
Insert cell
fizzBuzzCombineLatest
Insert cell
Insert cell
viewof countFizzBuzzCombineLatest = scan({
view: viewof fizzBuzzCombineLatest,
seed: 0,
scan: (acc, element) => acc + 1,
invalidation
})
Insert cell
countFizzBuzzCombineLatest
Insert cell
Insert cell
Insert cell
viewof fizzBuzzZipArray = zip({
views: [viewof counter, viewof fizz, viewof buzz],
invalidation
})
Insert cell
fizzBuzzZipArray
Insert cell
Insert cell
viewof fizzBuzzZip = zip({
views: [viewof counter, viewof fizz, viewof buzz],
map: (count, fizz, buzz) =>
fizz && buzz ? fizz + buzz : fizz || buzz || count,
invalidation
})
Insert cell
fizzBuzzZip
Insert cell
Insert cell
viewof countFizzBuzzZip = scan({
view: viewof fizzBuzzZip,
seed: 0,
scan: (acc, element) => acc + 1,
invalidation
})
Insert cell
countFizzBuzzZip
Insert cell
Insert cell
Insert cell
Insert cell
viewof evens = map({
view: viewof counter,
map: (v) => (v % 2 ? undefined : v),
invalidation
})
Insert cell
evens
Insert cell
Insert cell
viewof headsOrTails = map({
view: viewof counter,
map: (v) => (Math.random() > 0.5 ? "Heads" : "Tails"),
invalidation
})
Insert cell
headsOrTails
Insert cell
viewof deduped = scan({
view: viewof headsOrTails,
scan: (acc, value) => (acc !== value ? value : undefined),
invalidation
})
Insert cell
deduped
Insert cell
Insert cell
viewof timestamp = map({
view: viewof deduped,
map: () => performance.now(),
invalidation
})
Insert cell
timestamp
Insert cell
viewof last_5_secs = scan({
view: viewof timestamp,
seed: [],
scan: (acc, next) => {
acc.push(next);
while (acc[0] < performance.now() - 5000) acc.shift();
return acc;
},
invalidation
})
Insert cell
last_5_secs
Insert cell
viewof rate = map({
view: viewof last_5_secs,
map: (array) => array.length / (0.001 * (array.at(-1) - array.at(1))),
invalidation
})
Insert cell
${rate} per second
Insert cell
Insert cell
viewof rate2 = map({
map: (array) => array.length / (0.001 * (array.at(-1) - array.at(1))),
view: scan({
seed: [],
scan: (acc, next) => {
acc.push(next);
while (acc[0] < performance.now() - 5000) acc.shift();
return acc;
},
view: map({
map: () => performance.now(),
view: viewof deduped,
invalidation
}),
invalidation
}),
invalidation
})
Insert cell
${rate2} per second
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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