Engineering @huggingface 🤗. Data visualization enthusiast. Creative technologist. Open for collaborations.
Published
Edited
Dec 20, 2020
4 stars
currsvg = renderSvg({ x: currAngle, y: currAngle })
totalframes = 50
rasterizedSvgs = {
const step = (Math.PI * 4) / (totalframes - 1);
const imgs = [];
for (let angle = 0; angle < Math.PI * 4; angle += step) {
imgs.push(await rasterize(renderSvg({ x: angle, y: angle })));
}
return imgs;
}
gif = magickGif(rasterizedSvgs, 9)
async function magickGif(frames, delay = 10) {
const files = [];
for (const [i, file] of frames.entries()) {
files.push({
name: `frame${String(i).padStart(6, '0')}.png`,
content: await file.arrayBuffer()
});
}
const commands = `convert -delay ${delay} -loop 0 frame*.png out.gif`;
const { outputFiles, exitCode } = await Magick.executeOne({
inputFiles: files,
commands
});
const imgout = new Image();
imgout.src = URL.createObjectURL(outputFiles[0].blob);
imgout.blob = outputFiles[0].blob;
return imgout;
}
Magick = import("https://cdn.jsdelivr.net/npm/wasm-imagemagick@1.2.8/dist/magickApi.js")
function rasterize(svg) {
let resolve, reject;
const promise = new Promise((y, n) => ((resolve = y), (reject = n)));
const image = new Image();
image.onerror = reject;
image.onload = () => {
const width = svg.getAttribute('width');
const height = svg.getAttribute('height');
const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
const context = canvas.getContext('2d');
context.drawImage(image, 0, 0, width, height);
context.canvas.toBlob(resolve);
};
image.src = URL.createObjectURL(serialize(svg));
return promise;
}
Zdog = require("zdog@1/dist/zdog.dist.min.js")
import { serialize } with { rasterize } from "@mbostock/saving-svg"
import { slider } from "@jashkenas/inputs"
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.
