Published unlisted
Edited
Dec 6, 2019
viewof inpA = html`<input type="range">A`
viewof inpB = html`<input type="range">B`
viewof reset = html`<button>Reset counts`
{
reset;
const state = { A: 0, B: 0 };
const divs = {
A: html`<div>A triggered 0 times.`,
B: html`<div>B triggered 0 times.`
};
const updateState = s => () =>
(divs[s].innerText = `${s} triggered ${++state[s]} times.`);
viewof inpA.addEventListener('input', updateState('A'));
viewof inpB.addEventListener('input', updateState('B'));
return html`${divs.A}${divs.B}`;
}
viewof zoomLevel = radio({
options: [
{ label: "Health District", value: "District" },
{ label: "City / County", value: "CityCounty" },
{ label: "ZCTA", value: "ZCTA" }
],
value: "ZCTA"
})
viewof ageGroup = radio({
options: [
{ label: 'Adult', value: 'Adult' },
{ label: 'Child', value: 'Child' }
],
value: 'Child'
})
{
viewof zoomLevel.addEventListener('input', updateDuration('zoomLevel'));
viewof ageGroup.addEventListener('input', updateDuration('ageGroup'));
}
updateDuration = function(s) {
if (s == 'zoomLevel') {
duration = 0;
}
duration = 600;
}
duration = 0
duration
import { select, radio } from "@jashkenas/inputs"
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.
