Data visualization software enginner: working to make visualization more accessible, equitable, and impactful.
{
await visibility(); // wait until the cell is visible
const draw = render(); // return the drawing function from the render() method
return renderGif(invalidation, draw, 10000, { preview: draw(0), pause: 0 }); // render the gif
}
render = () => {
return t => {
return svg`<svg width="${w}" height="${h}">
<rect x="0" y="0" width="${w}" height="${h}" stroke="none" fill="black"></rect>
<g>
${_.range(num_rects)
.map(i => {
const angle = (Math.PI * 2 * i) / num_rects;
const mag = w / 4 + 70;
const pos = PVector(w / 2, h / 2).add(
PVector()
.setMag(mag)
.rotateBy(angle)
);
let ease_time = d3.easeQuad(t);
const _t = ease_time > .5 ? 1 - ease_time : ease_time;
const offset = .00005 + (_t + _t * 100) / 5000;
const size = 50 * simplex.noise2D(pos.x * offset, pos.y * offset);
return `<rect
width="${size}"
height="${size}"
stroke="white"
fill="none"
transform="translate(${pos.x},${pos.y})"
/>`;
})
.join('\n')}
</g>
</svg>`;
};
}
num_rects = 200
import { renderGif } from '@mootari/gif'
PVector = require('https://bundle.run/pvectorjs@1.2.0')
SimplexNoise = require('simplex-noise@2.4')
w = 500
h = 500
_ = require("lodash")
simplex = new SimplexNoise()
d3 = require("d3")
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.
