D3_4_DS

<!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 dataArray = [5,11,18]
    
    // Feel free to change or delete any of the code you see in this editor!
    var svg = d3.select("body").append("svg")
      .attr("width", "100%")
      .attr("height", "100%")

svg.selectAll("rect")
      .data(dataArray)
      .enter().append("rect")
    					.attr("height",(d,i) => d*15)
              .attr("width","60")
    					.attr("x", (d,i) => i * 80)
              .attr("y", (d,i) => 300 - d*15 )
    					.attr("fill", "pink")
    
   var newX = 300
       svg.selectAll("circle.first")
      .data(dataArray)
      .enter().append("circle")
       				.attr("class", "first")
    					.attr("cx", (d,i) => { 
         					newX += (d*3) + (i*20);
         					return newX
      				 })
              .attr("cy","100")
              .attr("r", (d) => d*3)
       
 			 var newX = 600
       svg.selectAll("ellipse")
         .data(dataArray)
         .enter().append("ellipse")
       		.attr("class", "second")
         .attr("cx", (d,i) => { 
         newX += (d*3) + (i*20);
         return newX
       })
         .attr("cy","100")
         .attr("rx", (d) => d*3)
       	 .attr("ry", "30")
       
 			 var newX = 900
       svg.selectAll("line")
         .data(dataArray)
         .enter().append("line")
       	 .attr("stroke", "blue")
         .attr("stroke-width", "2")
         .attr("x1", "20")
         .attr("y1", (d,i) => 80 + (i*20) )
         .attr("x2", d => 30 + d*15 )
       	 .attr("y2", (d,i) => 100 + (i*20) )
              
  </script>
</body>

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