Published
Edited
Jul 13, 2020
2 stars
chart
chart.signal('indexDate', timerange[0]+20*86400000).run()
{
const frame = (gif, t) => {
if (t<timerange[1]) {
chart.signal('indexDate', t)
chart.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, timerange[0]);
}
button.innerText = 'start gif creation - (click, then wait for "Save" button)';
div.appendChild(button);
return div;
}
inputData.filter((x)=>{return (x.ValueType=='Tests')}).filter((x)=>{return (x.Value>0)})
timerange = d3.extent( inputData.map(ele=>Date.parse(ele.Date)))
MeasureLabels = ["Positives", "Deaths", "Tests", "Hospitalized", "Daily Positive %"]
cellD = new Cell(grid.querySelector("[name=d]"))
cellC = new Cell(grid.querySelector("[name=c]"))
cellB = new Cell(grid.querySelector("[name=b]"))
cellA = new Cell(grid.querySelector("[name=a]"))
cellE = new Cell(grid.querySelector("[name=e]"))
cellF = new Cell(grid.querySelector("[name=f]"))
cellF.embed(r6)
cellD.embed(instructions)
cellG = new Cell(grid.querySelector("[name=g]"))
dd2.firstChild.firstChild.style.fontSize = "1.2rem"
r4.firstChild.firstChild.style.fontSize = "1.2rem"
md `
### radiobutton for cumulative vs daily place in grid at top`
r5 = radio({
title: 'Align to First Case',
options: [
{ label: 'Days since first 20 cases', value: 'Align' },
{ label: 'Absolute Date', value: 'Absolute' },
],
value: 'Absolute'
})
r6 = radio({
title: 'Include US',
options: [
{ label: 'Include Totals for US', value: 'USTotal' },
{ label: 'Exclude Totals for US', value: 'USExcluce' },
],
value: 'USTotal'
})
cellG.embed(r5)
plotAlignment = Generators.input(r5)
plotAlign = (plotAlignment=='Absolute' ? false : true)
cellE.embed(r4)
plotType = Generators.input(r2)
plotMeasure = Generators.input(dd2)
plotAggregate = Generators.input(r3)
plotDaily = Generators.input(r4)
plotUs = Generators.input(r6)
import {GIF} from '@mbostock/canvas-to-gif'
chart
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.
