fetch("https://api.weather.gov/gridpoints/OKX/33,37/forecast").then((response) => response.json())
getWeather = () => fetch("https://api.weather.gov/gridpoints/OKX/33,37/forecast").then((response) => response.json())
<button onClick=${getWeather}>Run</button>
Inputs.button("Run", { reduce: getWeather })
Inputs.button("Run", { reduce: () => console.log(getWeather()) })
Inputs.button("Run", {reduce: (d) => mutable result = getWeather()})
mutable result = null
viewof runner = Inputs.button("Run", { value: null, reduce: getWeather })
runner
viewof weather = Run(getWeather)
weather
Run(async () =>
Plot.lineY((await getWeather()).properties.periods, {
x: (d) => new Date(d.startTime),
y: "temperature"
}).plot()
)
Run = (fn) => {
let button, inspector;
const node = htl.html`<div>
${button = htl.html`<button onClick=${onClick}>Run</button>`}
${inspector = htl.html`<div></div>`}
</div>`;
async function onClick() {
inspector.innerHTML = "";
const value = await Promise.resolve(fn());
inspector.appendChild(value instanceof HTMLElement ? value : inspect(value));
set(node, value);
}
set(node, null);
return node;
}
import {inspect} from "@observablehq/inspector"
import {set} from "@observablehq/synchronized-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.
