flowChartNoArrows

<!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;background-color:#152512; }
    svg {
      width: 100%;
      height: 100%;
    }
  </style>
</head>

<body>
 
 <svg>
   
 </svg>
  
 <script>
    // Feel free to change or delete any of the code you see in this editor!
   
   var  index=0
   var data =[ 
       	[5,2,3,6,12],
      	[7,1,4,6,12],
      	[4,5,3,7,14]
      ]
   var height=150;
   var colors = d3.scaleOrdinal()
  .range(["#387898","#c79b18","#c79b18","#50863b","#50863b"])
   
    var outlineColors = d3.scaleOrdinal()
  .range(["#b4d3e3","#d2c488","#d2c488","#b2d6a7","#b2d6a7"])
         
   var svg= d3.select('svg');
   var background = svg.append('g') 
   var foreground =svg.append('g')
    
   var distanceBetween = 180
         
      var linePositions = [
        	[[50,height],[590,height]],
        	[[230,height],[230,height+100],[410,height+100],[770,height+100],															[770,height]],
          [[410,height],[410,height+100]]
        ]  
    
   
   
  function updateGraph(data){  
    
    	
    	  svg.append("defs").append("marker")
    .attr("id", "arrow")
    .attr("viewBox", "0 -5 10 10")
    .attr("refX",90)
    .attr("refY", 0)
    .attr("markerWidth", 8)
    .attr("markerHeight", 8)
    .attr("orient", "auto")  	
  	.append("svg:path")
    .attr("d", "M0,-5L10,0L0,5")
  	.attr("fill", "limegreen")
  	.attr('stroke','#b2d6a7')
   
   svg.append("defs").append("marker")
    .attr("id", "arrow2")
    .attr("viewBox", "0 -5 10 10")
    .attr("refX",-70)
    .attr("refY", 0)
    .attr("markerWidth", 8)
    .attr("markerHeight", 8)
    .attr("orient", "auto")  	
  	.append("svg:path")
    .attr("d", "M0,-5L10,0L0,5")
  	.attr("fill", "limegreen")
  	.attr('stroke','#b2d6a7')
      var line = d3.line()
      	.x((d,i) =>d[0])
				.y( (d,i)=>d[1])
      	.curve(d3.curveLinear)
    	
       background.append('path')
      .attr('d', line(linePositions[0]))
      .attr('fill', 'none')
      .attr('stroke', 'limegreen')
   		.style("stroke-dasharray", ("2, 2"))
       .attr("marker-start", "url(#arrow2)")
    
      background.append('path')
      .attr('d', line(linePositions[1]))
      .attr('fill', 'none')
      .attr('stroke', 'limegreen')
   		.style("stroke-dasharray", ("2, 2"))
      .attr("marker-start", "url(#arrow2)")
      
      background.append('path')
      .attr('d', line(linePositions[2]))
      .attr('fill', 'none')
      .attr('stroke', 'limegreen')
   		.style("stroke-dasharray", ("2, 2"))
     .attr("marker-start", "url(#arrow2)")
      
       var headers =svg.selectAll('text')
    		.data(data, d=>d)
       
       headers.exit().remove()
       
       var headersEnter =headers.enter().append('text')
     		
       var headers = headersEnter.merge(headers)
       	.attr('x', (d,i) =>(i* distanceBetween) +50)
    		.attr('y', (d,i)=>height/2)
   			.text(d=>d+' Cases')
   			.attr('fill', '#fff')
   			.style("font-family","roboto")
      
      
   	var circles =svg.selectAll('circle')
    .data(data)
   
   	circles.exit().remove()
   
   	var circlesEnter =circles.enter().append('circle')
   
   	var t = d3.transition()
   	.duration(1000)
   
   	circles = circlesEnter.merge(circles)
   	.attr('cx', (d,i) =>(i* distanceBetween) +50)
    .attr('cy', (d,i)=>height)
    .attr('stroke-width', 3)
   	.transition(t)
   	.attr('r', d=>d*5)
    .attr('fill', (d,i)=>colors(i))
    .attr('stroke',(d,i)=>outlineColors(i))
    
   
  
   	
   	   
   
   }
   updateGraph(data[0])
   setInterval(() => {
     index += 1;
      updateGraph(data[index % 3]);
      
    }, 3000);
      
   
  
  </script>
</body>

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