Rectangle with circles and lines inside

Inspired from website W3SCHOOL SVG EXAMPLE

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

svg.append("text")
      .text("Rectangle, line, curve, circle")
      .attr("y", 20)
      .attr("x", 20)
      .attr("font-size", 20)
      .attr("font-family", "monospace")
    
    
     svg.append('rect')
           .attr("y", 50)
           .attr("x", 200)
           .attr("width", 200)
           .attr("height", 200)
           .attr("fill", "blue")
           .attr("stroke", "black")
           .attr("stroke-width", 5)
           .attr("fill-opacity", 0.1)
           .attr("stroke-opacity", 0.9)
     
     var c1_y=120, c1_x=340,c2_y=150, c2_x=250
     
      svg.append('line')
           .attr("x1", c2_x)
           .attr("y1", c2_y)
           .attr("x2", 200)
           .attr("y2", c2_y)
           .attr("stroke-width", 1)
           .attr("stroke", "grey")
      
      svg.append('line')
           .attr("x1", c2_x)
           .attr("y1", c2_y)
           .attr("x2", c2_x)
           .attr("y2", 50+200)
           .attr("stroke-width", 1)
           .attr("stroke", "grey")
     
      svg.append('line')
           .attr("x1", c1_x)
           .attr("y1", c1_y)
           .attr("x2", 200)
           .attr("y2", c1_y)
           .attr("stroke-width", 1)
           .attr("stroke", "grey")
      
      svg.append('line')
           .attr("x1", c1_x)
           .attr("y1", c1_y)
           .attr("x2", c1_x)
           .attr("y2", 50+200)
           .attr("stroke-width", 1)
           .attr("stroke", "grey")
              
     svg.append('circle')
           .attr("cy", c1_y)
           .attr("cx", c1_x)
           .attr("r", 5)
           .attr("fill", "black")
     
     
     svg.append('circle')
           .attr("cy", c2_y)
           .attr("cx", c2_x)
           .attr("r", 5)
           .attr("fill", "black")
     
     
        svg.selectAll('path').data(["black", "red", "green"])
  				 .enter().append('path')
           .attr("d", "M 100 480 C 120 380 200 380 200 300")          
           .attr("fill", "none")
           .attr("stroke-width", 8)
           .attr("stroke", d => d)
           .attr("transform", (d, i) => `translate(${i * 108})`);
    
    
      
          
  </script>
</body>

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