Make my transitions more beautiful please

Community Help
1

Hi. My first day on Observable, trying to build a treemap that transitions beautifully.

Please see [Transforming nested treemap / Lorien Pratt / Observable] and hit the “change” button.

It transitions uglily. Any advice? Thanks in advance!
-L

2

What kind of transition are you looking for?

3

Just smoother, preferably with some configurable easing.

4

Like these? Zoomable Circle Packing / D3 / Observable

Which has a zoom to function.

 function zoomTo(v) {
    const k = width / v[2];

    view = v;

    label.attr("transform", d => `translate(${(d.x - v[0]) * k},${(d.y - v[1]) * k})`);
    node.attr("transform", d => `translate(${(d.x - v[0]) * k},${(d.y - v[1]) * k})`);
    node.attr("r", d => d.r * k);
  }

  function zoom(event, d) {
    const focus0 = focus;

    focus = d;

    const transition = svg.transition()
        .duration(event.altKey ? 7500 : 750)
        .tween("zoom", d => {
          const i = d3.interpolateZoom(view, [focus.x, focus.y, focus.r * 2]);
          return t => zoomTo(i(t));
        });