Published
Edited
Apr 25, 2022
DeepLabCut
{
const width = 900
const height = 500
const canvas = html`<canvas width = ${width} height = ${height} style = "border:1px solid black"/>`
const ctx = canvas.getContext("2d")
let frame = 0
function loop(){
ctx.clearRect(0,0,900,500)
ctx.save()
ctx.beginPath()
ctx.fillStyle = "blue"
ctx.strokeStyle = "red"
ctx.arc(coordsMod[frame+1].x,coordsMod[frame+1].y,20,0,2*Math.PI)
//ctx.moveTo(coordsMod[frame].x,coordsMod[frame].y)
//ctx.lineTo(coordsMod[frame+1].x,coordsMod[frame+1].y)
ctx.fill()
//ctx.stroke()
ctx.closePath()
ctx.restore()
if(frame < 865){
frame = frame + 1
window.requestAnimationFrame(loop)
}
}
//run animation
loop()
return canvas
}
coords = FileAttachment("ben.csv").csv()
coords
coordsMod = coords.map(record => {
const x = parseFloat(record.x)/2
const y = parseFloat(record.y)/2
return {x:x,y:y}
})
d3.max(coordsMod, record => record.y)
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.
