Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
Published
Edited
Apr 26, 2020
1 fork
Importers
53 stars
viewof gif = {
const gif = new GIF;
const canvas = DOM.canvas(width, height);
const context = canvas.getContext("2d");
context.font = "128px Helvetica Neue";
context.textAlign = "center";
for (let i = 0, n = 10; i < n; ++i) {
context.clearRect(0, 0, width, height);
context.fillStyle = `hsl(${i / n * 360},100%,50%)`;
context.fillText(`Frame ${i}`, width / 2, height / 2 + 40);
gif.addFrame(canvas, {copy: true, delay: 250});
yield canvas;
}
canvas.value = new Promise(resolve => gif.on("finished", resolve));
gif.render();
yield canvas;
}
html`<img src="${URL.createObjectURL(gif, {type: "image/gif"})}">`
DOM.download(gif)
GIF = {
const [gif, workerScript] = await Promise.all([
require("gif.js@0.2"),
require.resolve("gif.js@0.2/dist/gif.worker.js")
.then(fetch)
.then(response => response.blob())
.then(blob => URL.createObjectURL(blob, {type: "text/javascript"}))
]);
return class extends gif {
constructor(options) {
super({workerScript, ...options});
}
};
}
width = 640
height = 480
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.
