Public
Edited
Jun 28, 2023
13 stars
dispatch = d3.dispatch("log")
log = (...args) => {
dispatch.call("log", null, ...args);
}
Generators.observe(next => {
next(null);
dispatch.on("log", function(...args) {
next(args.length > 1 ? args : args[0]);
});
return () => dispatch.on("fn", null);
})
log("Hello world")
tap = (e, ...f) => log(e, ...f) || e
ftap = f => (...args) => tap(f(...args), ...args)
// `The sum is ${tap(1 + 1)}`
// ftap(Math.min)(1, 2, 3)
Generators.observe(next => {
const history = [];
next(null);
dispatch.on("log.history", function(...args) {
history.unshift(args);
if (history.length > 5) history.pop();
next(history);
});
return () => dispatch.on("fn", null);
})
watch = fn => {
const dispatch = d3.dispatch("fn");
const observer = Generators.observe(next => {
next(null);
dispatch.on("fn", function(first, ...rest) {
next(!rest.length || isEl(first) ? first : [first, ...rest]);
});
return () => dispatch.on("fn", null);
});
const observed = function(...args) {
const result = fn(...args);
dispatch.call("fn", null, result, ...args);
return result;
};
return Object.assign(observed, { observer });
}
sum = watch(d3.sum)
sum.observer
sum([1, 7, 4])
c = watch(chart)
{
const filtered = data.filter(({ date }) => date > new Date(2011, 0, 1));
c(filtered);
return d3.variance(filtered.map(d => d.value));
}
c.observer
// ctap = log => arr => log(arr)
logger = (returnFn, renderFn) => {
const dispatch = d3.dispatch("fn");
const history = [];
const observer = Generators.observe(next => {
next(null);
dispatch.on("fn", function(...args) {
history.unshift(renderFn(...args));
if (history.length > 9) history.pop();
next(
html`<div style="display: flex; flex-wrap: wrap;">${history.map(
d => html`${d}`
)}</div>`
);
});
return () => dispatch.on("fn", null);
});
const log = function(...args) {
dispatch.call("fn", null, ...args);
return returnFn(...args);
};
return Object.assign(log, { observer });
}
newVizLog = logger(d => d, chart)
newVizLog(data.slice(0, 30))
newVizLog(
newVizLog(
newVizLog(data).map(({ date, value }) => ({
date,
value: Math.log(value)
}))
).slice(0, 100)
)
newVizLog.observer
getLog = (n = 100) => {
const dispatch = d3.dispatch("fn");
const history = [];
const observer = Generators.observe(next => {
next(null);
dispatch.on("fn", function(args) {
history.push(args);
if (history.length > n) history.shift();
next(
html`<div style="display: flex; flex-wrap: wrap; max-height: 600px; overflow: scroll;">${history.map(
d => html`${d}`
)}</div>`
);
});
return () => dispatch.on("fn", null);
});
const log = function(msg) {
dispatch.call("fn", null, msg);
};
return Object.assign(log, { observer });
}
myArray = [1, 2, 3, 5, 5.5, 3, 4, 3.5, 6]
myLog = getLog(100)
myLog.observer
d3log.mean(myArray)
d3log.min(myArray)
d3log.variance(myArray)
d3log.shuffle(myArray.slice(0))
myLog2 = getLog()
myLog2.observer
d3log2.min(myArray)
d3log2.extent(myArray)
d3log2.quantile(myArray, .5)
d3log2.bisect(myArray.slice(0).sort(d3.ascending), 3)
d3log2.transpose(d3.pairs(myArray))
d3log2.zip(d3.pairs(myArray), d3.pairs(myArray), d3.pairs(myArray))
d3log2.ticks(0, 100, 20)
d3log2.range(10, 30, .5)
d3log2.cumsum(myArray)
d3log2.shuffle(myArray)
d3log2.permute(myArray, [0, 3, 2, 1])
d3log2.pairs(myArray)
d3log2.cross(myArray, myArray)
d3log2.group(d3.range(100).map(() => ~~d3.randomNormal(50, 20)()), d =>
Math.floor(d / 10)
)
getLog2 = (n = 100) => {
const dispatch = d3.dispatch("fn");
const history = [];
const log = function(msg) {
dispatch.call("fn", null, msg);
};
const observer = Generators.observe(next => {
next(Object.assign(md`No logs yet`, {value: log}));
dispatch.on("fn", function(args) {
history.push(args);
if (history.length > n) history.shift();
next(
html`<div style="
display: flex;
flex-wrap: wrap;
max-height: 600px;
overflow: scroll;"
>${history.map(d => html`${d}`)}</div>`,
{value: log}
);
});
return () => dispatch.on("fn", null);
});
return observer;
}
viewof test = getLog2()
// // prints "hello" over and over again:
// test("hello")
key = keys =>
html`${keys
.split(" ")
.map(
key => `<span style="
font-family: -apple-system, BlinkMacSystemFont, 'avenir next', avenir,
helvetica, 'helvetica neue', ubuntu, roboto, noto, 'segoe ui', arial,
sans-serif;
font-size: 14px;
font-weight: 500;
box-shadow: 0 0 0 1px #dedede, 1px 1px 0 1px #e8e8e8;
margin: 0 4px;
min-width: 6px;
padding-left: 4px;
padding-right: 4px;
text-align: center;
white-space: nowrap;
border-radius: .25rem;">${key}</span>`
)
.join("")}`
colors = [
"#1f77b4",
"#ff7f0e",
"#2ca02c",
"#d62728",
"#9467bd",
"#8c564b",
"#e377c2",
"#bcbd22",
"#17becf"
]
isEl = el => el instanceof HTMLElement || el instanceof SVGElement
// https://stackoverflow.com/a/32538867
isIterable = obj =>
obj == null ? false : typeof obj[Symbol.iterator] === 'function'
stringify = d =>
!isNaN(d)
? d
: Array.isArray(d)
? JSON.stringify(d.slice(0, 4))
: isIterable(d)
? JSON.stringify(Array.from(d).slice(0, 4))
: d.toString()
d3 = require("d3@6")
d3array = require("d3-array@2")
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.
