Software engineer at Hugging Face. Prototyping here with JS, d3, three.js.
Published
Edited
Mar 9, 2021
2 forks
Importers
11 stars
Buttons TimelineSpring Ruler TimelineIntervals TimelineUnbind two synchronized inputsInput: draw points on imageToggle inputVideo Time ZoomPoints TimelineIntervals Timeline - SVGThumbnails TimelineTimeline controlsRuler TimelineStack TimelineInputs + setterselectScaleChromaticLog sliderInput: Draw an arrow on an imageInput: Draw an arrow on a mapDetached video controlsInvisible Capture AreaPointer trace on imagePointer traceStore and Synchronized ViewsInput: Two-variables inputInput: move skeleton joints
Input: draw a box on image
Also listed in…
Image
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.
