Software engineer and visualization enthusiast. Lives in Cambridge, Massachusetts, with no dogs.
Public
Edited
Dec 31, 2022
1 fork
Importers
30 stars
html`You picked <b>${range}</b>!`
html`You picked <b>${rangeSignal}</b>!`
rangeSignal = {
// Create a signal
const s = signal(50);
// Update the signal on input events from the range slider
const changed = (e) => (s.value = e.target.value);
viewof range.addEventListener(" input", changed);
invalidation.then(() => viewof range.removeEventListener("input", changed));
// Return the signal
return s;
}
{
const root = html`<div />`;
const dispose = mount(() => html`You picked <b>${rangeSignal}</b>!`, root);
invalidation.then(dispose);
return root;
}
{
const root = html`<div />`;
// When this cell is invalidated, run the dispose function returned by mount
invalidation.then(mount(CountingComponent, root));
return root;
}
CountingComponent = () => {
const count = signal(0);
const interval = setInterval(() => (count.value = count.value + 1), 1000);
const cleanup = () => clearInterval(interval);
return onUnmount(html`<div>Count value is <b>${count}</b>!</div>`, cleanup);
}
{
const root = html`<div />`;
invalidation.then(mount(TodoList, root));
return root;
}
function TodoList() {
const todos = signal([]);
const text = signal("");
const setText = (e) => (text.value = e.target.value);
const addTodo = (e) => {
e.preventDefault();
if (text.value === "") return;
todos.value = todos.value.concat({ text: text.value });
text.value = "";
};
return html`
<form onsubmit=${addTodo}>
<label>
<div><b><small>Add to-do:</small></b></div>
<input value=${text} oninput=${setText} />
</label>
<button type="submit">Add</button>
<ul>
${computed(() =>
todos.value.map((todo) => html`<li>${todo.text}</li>`)
)}
</ul>
</form>
`;
}
rhtl = import(await FileAttachment("bundle@1.js").url())
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.
