Tech Lead at Taktile.
Formerly Firebase, Google
b = a + 6
viewof a = Inputs.range()
delayedDependentAsyncComputation = {
clicker; // create dependancy on clicker cellto resolve a value
return uid();
}
uid = () => (Math.random() + 1).toString(36).substring(7)
excludes = descendants(
lookupVariable("events", module),
lookupVariable("trackedVariables", module),
...extra_excludes
)
{
debugger;
lookupVariable("events", module);
}
events
viz = {
now;
const end = (endTime || performance.now()) - timeDelay * 1000;
const start = Math.max(end - windowSecs * 1000);
return Plot.plot({
width,
marginLeft: 200,
y: {
axis: null,
domain: [
...events.reduce((acc, e) => (acc.add(e.name), acc), new Set())
].sort()
},
x: {
domain: [start, end],
type: "time"
},
color: {
domain: ["pending", "fulfilled", "rejected", "idle"],
range: ["#BBF", "#0F0", "#F44", "#EEE"]
},
marks: [
Plot.ruleY(
events,
Plot.selectLast({
z: "name",
y: "name",
stroke: "#EEE",
strokeDasharray: [2, 3]
})
),
Plot.barX(
events,
Plot.selectLast({
x1: start,
x2: start - 60 * 60 * 1000,
y: "name",
z: "name",
text: "name",
textAnchor: "end",
dx: -10,
fill: (d) =>
d.type === "pending" ? "pending" : end - d.t < 500 ? d.type : "idle"
})
),
Plot.tickX(events, {
x: "t",
y: "name",
stroke: "type",
strokeWidth: 2
}),
// Plot.arrow(
// events.flatMap((e) =>
// e.variable._inputs.map((i) => ({
// input: i,
// variable: e.variable
// }))
// ),
// {
// x1: start,
// y1: (d) => d.input._name,
// x2: start,
// y2: (d) => d.variable._name,
// bend: true,
// stroke: "#ccc",
// headLength: 4,
// strokeWidth: 1
// }
// ),
Plot.text(
events,
Plot.selectLast({
x: start,
y: "name",
z: "name",
text: (d) => d.name, // + "\n " + d.variable._definition.toString().slice(0, 30),
textAnchor: "end",
dx: -10,
fill: "black"
})
)
]
});
}
viewof clear = Inputs.button("clear", {
reduce: () => (mutable events = [])
})
viewof timeDelay = Inputs.range([0, 30], {
value: 0,
step: 0.01,
label: "delay (secs)"
})
interceptVariables = {
trackedVariables.forEach((v) => interceptVariable(v, invalidation, excludes));
return Object.fromEntries(trackedVariables.map((v) => [v._name, v]));
}
function notify(name, type, value, variable) {
if (viewof pause.value) return;
const event = {
t: performance.now(),
name: name || variable._definition.toString().slice(0, 30),
value,
type,
variable
};
mutable events.push(event);
while (mutable events.length > 2000) mutable events.shift();
mutable events = mutable events;
if (viewof breakpoint.value) {
debugger;
}
}
names = ({})
function interceptVariable(v, invalidation, excludes, firstSeen = false) {
if (excludes.has(v)) return;
if (v._name === "now") return;
if (!v._reachable) return; // causes bugs and there is nothing interesting to debug anyway
if (!v.ndd) {
v.ndd = true;
observe(v, {
pending: (...args) => notify(v._name, "pending", args[0], v),
rejected: (...args) => notify(v._name, "rejected", args[0], v),
fulfilled: (...args) => notify(v._name, "fulfilled", args[0], v)
});
}
}
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.
