Published
Edited
May 20, 2021
Insert cell
Insert cell
Insert cell
viewof svgPoint = {
const height = 100
const group = svg`<g></g>`
const el = html`<svg viewBox="0 0 ${width} ${height}">${group}
<g transform="translate(${width/2} ${height/2})">
<circle r=25 cx=0 cy=0 stroke=black fill=none />
</g>
</svg>`
let point = null
function drawAt({x,y}) {
group.innerHTML = `
<circle r=5 cx=${x} cy=${y} stroke=green fill=none />
<path d="M ${origin.x} ${origin.y} L ${x} ${y}" stroke=green fill=none />`
}
el.value = {x: 100, y: 50}
drawAt(el.value)

el.addEventListener("mousedown", event => {
point = el.value = {x: event.offsetX, y: event.offsetY}
el.dispatchEvent("mousemove", event);
})

el.addEventListener("mouseup", _ => point = null)

el.addEventListener("mousemove", event => {
if (point === null) return
event.preventDefault()
point = el.value = {x: event.offsetX, y: event.offsetY}
drawAt(point)
el.dispatchEvent(new CustomEvent("input"))
})
return el
}
Insert cell
Insert cell
Insert cell
viewof canvasPoint = {
const height = 100;
const canvas = html`<canvas width=${width} height=${height}>`
const context = canvas.getContext("2d")
let point = null

function drawAt({x,y}) {
context.clearRect(0, 0, width, height);
context.beginPath();
context.strokeRect(x, y, 10, 10)
context.stroke();
}

canvas.value = {x: 100, y: 50};
drawAt(canvas.value)

canvas.onmousedown = event => {
point = canvas.value = {x: event.offsetX, y: event.offsetY};
canvas.onmousemove(event);
};

canvas.onmouseup = _ => point = null

canvas.onmousemove = event => {
if (point === null) return
event.preventDefault()
point = canvas.value = {x: event.offsetX, y: event.offsetY}
drawAt(point)
canvas.dispatchEvent(new CustomEvent("input"))
};

return canvas;
}
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more