Software engineer at Hugging Face. Prototyping here with JS, d3, three.js.
Download the shape of a countryCanvas equality by valueInput: Draw an arrow on an imageCalibrate a Three.js camera using fSpyHello fSpyMain Colors from ImageColors palette from imageCan I Use Media Fragments?Hello Cloudinary UploadColor by numberPixel-art or Voronoi image tesselationHello pixelitInput: draw a box on imageExtended drawImagedrawImage respects canvas transparencyCSS object-fit formulasobject-fitEvery Other Pixel Is A LineFake video playerAsync image loading, and CORSPreload a list of imagesImage placeholderImage coverIdentify images with deterministic UUIDPerspective rectifier - examplePerspective rectifier
Input: draw points on image
Also listed in…
Inputs
a
viewof a = {
const colorScale = d3.scaleOrdinal(d3.schemeAccent);
const color = (d, i) => colorScale(i);
return drawPointsOnImage({
image: await FileAttachment("mona-lisa.jpg").image(),
width: width / 3,
zoom: true,
label: true,
radius: 8,
color,
value: [
{ x: 181.1320754716981, y: 139.62264150943395 },
{ x: 632.0754716981131, y: 128.30188679245282 },
{ x: 803.7735849056603, y: 503.77358490566036 },
{ x: 750.9433962264151, y: 852.8301886792451 },
{ x: 333.96226415094344, y: 966.0377358490565 },
{ x: 128.30188679245282, y: 522.6415094339623 }
]
});
}
viewof d = drawPointsOnImage({
image: video,
radius: 12,
value: [
{ x: 0, y: 0 },
{ x: 500, y: 0 },
{ x: 400, y: 500 },
{ x: 0, y: 500 }
]
})
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.