Web developer and autodidact with an interest in creative coding.
Inputs.table() with Colored RowsLinking Multiple RangesAuto-Sort InputsDate and Offset SlidersSubmittable Input FormsDOM InspectorCustom InspectorsSnap A Slider To ValuesChecking a version's publish dateEfficient ResponsivenessSortable Notebook ListDisplaying ProgressRange SliderSearch Results PagingMonitoring EventsPrime Numbers SliderMutable FormsSticky PositioningNotebook TeasersStraight Skeleton - Reference PathsGIF Converter (canvas & SVG)2D SliderMonitorSignature - A Documentation ToolkitDashboard with InputsDashboard
Arguments Widget
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));
},
})
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.