The avatar for @will-r-chase
Will Chase
dataviz, R obsessed, learning D3 with #100daysofD3 Twitter: @W_R_Chase
Published
Edited
Aug 8, 2019
Fork of D3 Unconf Badge Builder Implementation
Insert cell
Insert cell
firstName = "Will"
Insert cell
lastName = "Chase"
Insert cell
handle = "W_R_Chase"
Insert cell
isTextLight = false
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
// Code reference: https://observablehq.com/@mbostock/animation-loops
animation = {
while (true) {
for (let i = 0; i < numOfFrames; ++i) {
yield frames[i];
await Promises.tick(50);
}
for (let i = numOfFrames - 2; i > 0; --i) {
yield frames[i];
await Promises.tick(50);
}
}
}
Insert cell
download = DOM.download(async () => {
const blobs = await Promise.all(frames.map(f => new Promise(resolve => f.toBlob(resolve))));
const zip = new jszip();
blobs.forEach((b, i) => zip.file(`${lastName}-${firstName}-frame${i + 1}.png`, b, {type: "blob"}));
return zip.generateAsync({type: "blob"})
}, `${lastName}-${firstName}.zip`, "Download as ZIP")
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
numOfFrames = 10
Insert cell
width = 1050
Insert cell
height = 1500
Insert cell
jszip = require("jszip@3/dist/jszip.js")
Insert cell
d3 = require("d3@5")
Insert cell

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.
Learn more