Software engineer at Hugging Face. Prototyping here with JS, d3, three.js.
Hello ffmpeg.wasmHello SheetJSInteger To English Wordsuuid and nanoidUsing Less.js in Observable [Sync Version]object-fitHello geo2rectHello Cloudinary UploadHello interact.jsHello d3-gridding layoutsHello pixelitHello frameAtHello vidvid-infoHello deep-weak-mapHello Picture-in-PictureHello preserveAspectRatioHello AutomergeHello socket.ioHello lz-stringHello tableschema
Hello pepjs
{
const canvas = html`<div id="canvas" touch-action="none"></div>`;
function draw(where) {
const bbox = canvas.getBoundingClientRect();
canvas.appendChild(
html`<div class="pixel" style="left: ${where.pageX -
bbox.left}px; top: ${where.pageY - bbox.top}px"></div>`
);
}
canvas.addEventListener('pointermove', draw);
invalidation.then(() => canvas.removeEventListener('pointermove', draw));
return canvas;
}
css = html`
<style>
.pixel {
position: absolute;
background: black;
width: 2px;
height: 2px;
}
#canvas {
background: white;
border: 1px solid black;
height: 200px;
}
</style>`
// This modifies the global window object. No need to assign the imported object to a variable
require('pepjs')
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.
