dot-to-bar transition

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
	var svg = d3.select("body").append("svg")
		.attr("width", 960)
		.attr("height", 500);
    
  var r = 50,
      isCircle = false;
	var rect = svg.append("rect")
		.attr("x", 100)
		.attr("y", 100)
		.attr("rx", r)
		.attr("ry", r)
		.attr("width", r*2)
		.attr("height", r*2);
    
	// use d3.v4 named transitions to run
	// concurrent transitions with different timing
  function runTween (toRect) {
    if (!toRect) {
      // circle to rect
      rect.transition('corners')
        .duration(1500)
        .attr("rx", 0)
        .attr("ry", 0);
      rect.transition('width')
        .delay(750)
        .duration(2500)
        .attr("width", 760);
    } else {
      // rect to circle
      rect.transition('width')
        .duration(2500)
        .attr("width", r*2);
      rect.transition('corners')
        .delay(1250)
        .duration(1500)
        .attr("rx", r)
        .attr("ry", r);
    }
  }
    
  setInterval(function () {
    runTween(isCircle = !isCircle);
  }, 4000);
  runTween();

</script>
</body>

https://d3js.org/d3.v4.min.js