viewof a1 = slider({
min: 0,
max: PredDateRange.length,
step: 1,
value:0,
description: "prediction"
})
PredDateRange = chart.signal('PredDateRange')
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
{
chart.signal("whichPredDate",a1);
chart.run()
}
{
const frame = (gif, t) => {
if (t<PredDateRange.length) {
chart.signal('whichPredDate', t)
chart.run()
chart.toCanvas().then(r=>{
gif.addFrame(r);
requestAnimationFrame(()=>{
frame(gif, t+1);
});
});
} else {
gif.render();
}
};
const div = document.createElement('div');
let downloadButton;
const button = document.createElement('button');
button.onclick = ()=> {
if (downloadButton) {
div.removeChild(downloadButton);
downloadButton = null;
}
const gif = new GIF();
gif.on("finished", blob => {
downloadButton = DOM.download(blob);
div.appendChild(downloadButton);
});
frame(gif, 0);
}
button.innerText = 'start gif creation - (click, then wait for "Save" button)';
div.appendChild(button);
return div;
}
timerange = d3.extent( inputData.map(ele=>Date.parse(ele.date)))
import {input} from "@jashkenas/inputs"
import {select} from "@jashkenas/inputs"
import {slider} from "@jashkenas/inputs"
import {GIF} from '@mbostock/canvas-to-gif'
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.
