Software engineer at Hugging Face. Prototyping here with JS, d3, three.js.
Published
Edited
Mar 9, 2021
2 forks
Importers
11 stars
Download the shape of a countryInput: draw points on imageCanvas 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 pixelitExtended 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 a box on image
Also listed in…
Inputs
a
viewof a = drawBoxOnImage({
image: await FileAttachment("mona-lisa.jpg").image(),
width: width / 3,
zoom: true,
padding: 0,
value: [{ x: 38, y: 7 }, { x: 65, y: 9 }, { x: 90, y: 91 }, { x: 1, y: 79 }]
})
viewof b = drawBoxOnImage({
image: await FileAttachment("mona-lisa.jpg").image(),
width: width / 4,
zoom: false,
padding: 0.15,
background: false,
radius: 12,
label: true,
value: [
{ x: 0, y: 0 },
{ x: 50, y: 0 },
{ x: 100, y: 50 },
{ x: 100, y: 100 },
{ x: 50, y: 100 },
{ x: 0, y: 50 }
]
})
viewof c = drawBoxOnImage({
image: await FileAttachment("mona-lisa.jpg").image()
})
viewof d = drawBoxOnImage({
image: video,
radius: 12,
label: i => ['A', 'B', 'C', 'D'][i]
})
viewof e = drawBoxOnImage({
image: video,
radius: width / 30,
value: [{ x: 50, y: 50 }],
label: i => '1 pt',
width: width / 4
})
viewof f = drawBoxOnImage({
image: video,
radius: width / 30,
value: [{ x: 30, y: 50 }, { x: 70, y: 50 }],
label: i => ['two', 'pts'][i],
width: width / 4
})
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.
