{
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 centY.value = newY;
d3.select(this)
.attr('cx',newX)
.attr('cy',newY)
}));
return svgContainer.node();
}