Web developer and autodidact with an interest in creative coding.
Public
Edited
Nov 24, 2022
37 stars
Inputs.table() with Colored RowsLinking Multiple RangesAuto-Sort InputsDate and Offset SlidersSubmittable Input FormsDOM InspectorSnap 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)Arguments Widget2D SliderMonitorSignature - A Documentation ToolkitDashboard with InputsDashboard
Custom Inspectors
Also listed in…
Observable Things
[{name: "one"}, {name: "and two ..."}, {name: "and three!"}]
html`<button>OK!</button>`
my_element = {
// The element (only created once, then passed around by reference).
const element = html`<b>I'm here!</b>`;
// An infinite loop.
while(true) {
// Detach the element from whereever in the DOM it currently is.
element.remove();
// Output the element, which attaches it to the DOM.
yield element;
// Wait two seconds.
await Promises.tick(2000);
}
}
{
// Wait a second.
await Promises.tick(1000);
// Detach the element from wherever in the DOM it currently is.
if(remove_element) my_element.remove();
// Output the element, which attaches it to the DOM.
yield my_element;
}
<span class="observablehq--inspect"><span class="observablehq--cellname">my_var = </span><span class="observablehq--string">"my value"</span></span>
Inspector = (await require('@observablehq/inspector')).Inspector
function inspect(value, name = null) {
// Create an empty element to attach the Inspector's HTML to.
const container = html`<div>`;
// Create a new Inspector instance and attach it to the container.
const inspector = new Inspector(container);
// Let the instance know that this is the new value that it should render.
inspector.fulfilled(value, name);
return container;
}
inspect('my value', 'my_name')
my_inspection = inspect('my value', 'my_name')
my_inspection
viewof my_other_inspection = {
// Note that we have to pass in the name manually here.
const element = inspect('my value', 'my_other_inspection');
element.value = 'Hey, that\'s not my value!';
return element;
}
my_other_inspection
viewof my_counter = Inputs.button('Count up')
my_counter
viewof my_counter
viewof my_counter.value
viewof my_2nd_counter = Inputs.button('Count up', {required: true})
viewof my_2nd_counter.value
my_2nd_counter
my_3rd_counter = Inputs.button('Count up')
Generators.input(my_3rd_counter)
viewof my_4th_counter = Inputs.button('Count up')
my_4th_counter
{
const output = html`<output>`;
yield output;
for await(const value of Generators.input(viewof my_4th_counter)) {
output.value = value;
}
}
viewof button_undefined = {
const element = html`<button>Click me!`;
Object.defineProperty(element, 'value', {value: undefined});
return element;
}
button_undefined
viewof example_value = Inputs.range([0, 100], {value: 0, step: 1})
viewof filtered_value = {
// Create the view's DOM element. Later on we'll attach the value
// to the <div> element.
const element = html`<div><code><em>Further to the right!`;
// Create an Inspector instance for the element.
const inspector = new Inspector(element);
// Mark the output as "pending" (the gray bar to the left). Note that this will
// only set a class on the element, but *not* replace its contents.
inspector.pending();
// We haven't defined element.value yet, so it's still undefined.
// We'll only set it if our threshold of 50 is passed.
if(example_value >= 50) {
// Set the element's value property. This is what will be seen
// when we reference "filtered_value" (without the viewof prefix).
element.value = example_value;
// Have the inspector show the value. This replaces the element's current
// contents (i.e., the <code> element).
// Note that we must set the cell's name explicitely.
inspector.fulfilled(element.value, 'filtered_value');
}
return element;
}
filtered_value * 2
throbber(['wait', 'w a i t', 'w a i t', 'w a i t'], 500, invalidation)
function throbber(steps, delay, invalidation) {
let step = 0, id;
const text = htl.html`<span style="white-space: pre">`;
const animate = () => {
text.textContent = steps[step++ % steps.length];
id = setTimeout(animate, delay);
};
animate();
invalidation.then(() => clearTimeout(id));
return text;
}
function inspectorPrompt(value, options = {}) {
const {
name,
prompt,
empty = value => value == null,
throbberSteps = ['', '.', '..', '...', ' ..', ' .'],
throbberDelay = 350,
invalidated = invalidation
} = options;
const view = html`<div>`;
const inspector = new Inspector(view);
if(!empty(value)) {
inspector.fulfilled(value, name);
view.value = value;
return view;
}
const placeholder = htl.html`<div style="font: var(--monospace-font); padding: 4px 0">
${prompt}
${throbber(throbberSteps, throbberDelay, invalidated)}
`;
view.appendChild(placeholder);
inspector.pending();
return view;
}
viewof text = Inputs.text({submit: true})
viewof processed = inspectorPrompt(text, {
name: 'processed',
prompt: 'Please enter a value above',
empty: value => value == '',
throbberSteps: ['👆', ' 👆', ' 👆', ' 👆'],
})
processed
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.