Published unlisted
Edited
Oct 11, 2021
1 star
Insert cell
Insert cell
viewof centX = Inputs.range([0, 200], {value: 100, step: 1, label: "Center X of circle"})
Insert cell
viewof centY = Inputs.range([0, 200], {value: 100, step: 1, label: "Center Y of circle"})
Insert cell
viewof rad = Inputs.range([10, 25], {value: 15, step: 0.1, label: "Radius of circle"})
Insert cell
{
const svgContainer = d3.create('svg')
.attr('width', 200)
.attr('height', 200)
.style('background-color', 'whitesmoke');

const circle = svgContainer.append('circle')
.attr('r', rad)
.attr('cx', centX)
.attr('cy', centY)
.attr('fill', 'blue')
.call(d3.drag()
.on('drag', function(event, d) {
let newX = clamp(viewof centX.value + event.dx, 0, 200);
let newY = clamp(viewof centY.value + event.dy, 0, 200);
console.log(newX, newY)
console.log(event.dx, event.dy)
viewof centX.value = newX;
//viewof centX.dispatchEvent(new Event("input"));

viewof centY.value = newY;
// viewof centY.dispatchEvent(new Event("input"));
d3.select(this)
.attr('cx',newX)
.attr('cy',newY)
}));

return svgContainer.node();
}
Insert cell
viewof centX.value
Insert cell
centX
Insert cell
clamp = (num, min, max) => Math.min(Math.max(num, min), max);
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