-
{
  const svgContainer = d3.create('svg')
+
view = {
  const svg = 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)
+
  const circle = svg.append('circle')
    .attr('fill', 'blue')
+
    .attr('cx', viewof centX.value)
    .attr('cy', viewof centY.value)
    .attr('r', viewof rad.value)
    .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)
+
      .on('drag', (event) => {
        viewof centX.value = clamp(viewof centX.value + event.dx, 0, 200);
        viewof centY.value = clamp(viewof centY.value + event.dy, 0, 200);
        viewof centX.dispatchEvent(new Event('input', {bubbles: true}));
        viewof centY.dispatchEvent(new Event('input', {bubbles: true}));
      }));

-
  
  return svgContainer.node();
+
  const onx = () => circle.attr('cx', viewof centX.value);
  const ony = () => circle.attr('cy', viewof centY.value);
  const onr = () => circle.attr('r', viewof rad.value);

  viewof centX.addEventListener('input', onx);
  viewof centY.addEventListener('input', ony);
  viewof rad.addEventListener('input', onr);

  invalidation.then(() => {
    viewof centX.removeEventListener('input', onx);
    viewof centY.removeEventListener('input', ony);
    viewof rad.removeEventListener('input', onr);
  });

  return svg.node();
}