{
const frame = (gif, t) => {
if (t<timerange[1]) {
chart2.signal('timestamp2', t)
chart2.toCanvas().then(r=>{
gif.addFrame(r);
requestAnimationFrame(()=>{
frame(gif, t+86400000);
});
});
} 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, 1583971200000);
}
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.
