canvas = svg`
<svg width='600' height='300' style='background-color: #f7f7f9'>
<style type='text/css'>
rect {
fill: white;
stroke: black;
cursor: move;
}
rect.moving {
stroke: blue
}
</style>
<rect width='100' height='100'>
</svg>
`
function mousedown(e) {
// Convert from screen coordinates to SVG coordinates
// This function is described in the notebook linked to
// in the intro.
let coords = screenToSVGCoords(canvas, e);
// Compute the distance between the rectangle's top-left
// corner and the cursor position.
let initial_coords = mutable rect_coords;
mutable delta = {
x: coords.x - initial_coords.x,
y: coords.y - initial_coords.y
};
document.addEventListener('mousemove', mousemove);
document.addEventListener('mouseup', mouseup);
rect.classList.add('moving');
e.preventDefault();
}
function mousemove(e) {
let coords = screenToSVGCoords(canvas, e);
let d = mutable delta;
mutable rect_coords = {
x: coords.x - d.x,
y: coords.y - d.y
};
}
function mouseup(e) {
document.removeEventListener('mousemove', mousemove);
document.removeEventListener('mouseup', mouseup);
rect.classList.remove('moving');
}
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.
