Web developer and autodidact with an interest in creative coding.
doc_shift = docWidget({
linePadding: [20, 5, 5, 5],
inputs: {
p: slider({title: `p`, min:-6, max:6, step:.1, value:-2}),
t: slider({title: `t`, min:0, max:1, step:'any', value:.35}),
},
output: ({p, t}) => shift(+p.value)(+t.value),
outputLabel: 'shift(p)(t)',
onDraw: (api, {p, t}) => {
const pv = +p.value, tv = +t.value, _shift = shift(pv);
api.secondary().lineWidth(1).lineDash([3])
.verticalLine(tv).headerText('t', tv);
api.primary().lineWidth(2).lineDash()
.graph(_shift).dot(tv, _shift(tv));
},
})
doc_linstep = docWidget({
linePadding: [20, 5, 5, 5],
inputs: {
a: slider({title: `a`, min:0, max:1, step:'any', value:.25}),
b: slider({title: `b`, min:0, max:1, step:'any', value:.6}),
t: slider({title: `t`, min:0, max:1, step:'any', value:.5}),
},
outputLabel: 'linstep(a,b,t)',
output: ({a, b, t}) => linstep(+a.value, +b.value, +t.value),
onDraw: (api, {a, b, t}) => {
const av = +a.value, bv = +b.value, tv = +t.value;
api.secondary().lineWidth(1).lineDash([3])
.verticalLine(av).headerText('a', av)
.verticalLine(bv).headerText('b', bv)
.verticalLine(tv).headerText('t', tv);
api.primary().lineWidth(2).lineDash()
.graph(t => linstep(av, bv, t))
.dot(tv, linstep(av, bv, tv));
},
})
doc_range = docWidget({
linePadding: 5,
inputs: {
r: slider({title: `ratio`, min:0.01, max:1, step:'any', value:.25}),
c: slider({title: `count`, min:1, max:10, step:1, value:6}),
i: slider({title: `i`, min:0, max:99, step:1, value:1}),
},
outputLabel: 'range(ratio,count,i)',
output: ({r, c, i}) => range(+r.value, +c.value, +i.value),
onInput: ({c, i}) => {
// Normalize selected index.
i[0].max = c[0].valueAsNumber-1;
i.dispatchEvent(new CustomEvent('input', {bubble: false}));
},
onDraw: (api, {c, r, i}) => {
const count = +c.value, ratio = +r.value, index = +i.value;
const height = 1/count, offsets = Array.from({length: count}, (_, i) => {
const [min, max] = range(ratio, count, i);
return {i, x: min, y: i/count, width: (max - min)};
});
api.secondary().lineWidth(1).lineDash([3]);
for(const {x, width} of offsets) api.verticalLine(x + width/2);
for(const {i, x, y, width} of offsets) {
i === index ? api.secondary() : api.primary();
api.box(x, y, width, height, 1);
}
},
})
doc_peak = docWidget({
linePadding: [20, 5, 5, 5],
inputs: {
o: slider({title: `o`, min:0, max:1, step:'any', value:.45}),
r: slider({title: `r`, min:0, max:1, step:'any', value:.2}),
v: slider({title: `v`, min:0, max:1, step:'any', value:.5}),
},
outputLabel: 'peak(o,r,v)',
output: ({o, r, v}) => peak(+o.value, +r.value, +v.value),
onDraw: (api, {o, r, v}) => {
const ov = +o.value, rv = +r.value, vv = +v.value;
api.secondary().lineWidth(1).lineDash([3])
.verticalLine(ov).headerText('o', ov)
.verticalLine(ov-rv).headerText('o-r', ov-rv)
.verticalLine(ov+rv).headerText('o+r', ov+rv)
.verticalLine(vv).headerText('v', vv);
api.primary().lineWidth(2).lineDash()
.graph(t => peak(ov, rv, t))
.dot(vv, peak(ov, rv, vv));
},
})
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.
