simple Bubbles

<!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>
   var data = [5,2,3,6,12]
   var height=150;
   var colors = ["#387898","#c79b18","#c79b18","#50863b","#50863b"]
   
   var outlineColors =["#b4d3e3","#d2c488","#d2c488","#b2d6a7","#b2d6a7"]
         
   var svg= d3.select('svg');
    
   var distanceBetween = 180      
      
   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")
       	.attr('text-anchor',"middle")
      
      
   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])
   
   
   
    
  </script>
</body>

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