title: circles not displaying on svg as per dataset
body: <p>I am very new to D3, I am just trying to create circles according a very small 2 dimension, 4 element array, initialized in code , below, but only one circle is displayed. not sure why? if anyone can help to point out what is the problem?</p>
  
  <p>one note: array elements d.x and d.y are carrying data elements. I have verified in console.log(d.x) and console.log(d.y):</p>
  
  <pre><code> //   below is index.js file
  
           //this is array
             const myArr = [{x: 100 , y: 100},
                              {x: 130 , y: 150},
                              {x: 77 , y: 120},
                              {x: 90 , y: 49}];
              const svg = d3.select("body").append("svg")
                  .attr("height" , 200)
                  .attr("width" , 350);
  
  
       below is the code to handle svg selection , enter , update
  
               const circles = svg.selectAll("circle").data(myArr);
  
               //enter
              circles.enter().append("circle")
                   .attr("r" , 8);
                     //.attr("fill", "#00aa88");
              //update
                  circles.attr("cx", function (d) { return d.x; })
                      .attr("cy", function (d) { return d.y;  });
  
                  svg.selectAll("text")
                      .data(myArr)
                      .enter()
                      .append("text")
                      .text(function (d) {
                          return d.x + "," + d.y;
                      })
                      .attr("x", function (d) {
                          return d.x;
                      })
                      .attr("y", function (d) {
                          return d.y;
                      })
                      .attr("font-size", "15px")
                      .attr("fill", "white");
              //exit
                  circles.exit().remove();
  
         this code displays on one circle. i have not added any axes yet.
  
      index.html
  
      &lt;!DOCTYPE html&gt;
      &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;meta charset="UTF-8"&gt;
          &lt;script src="https://d3js.org/d3.v5.js" type="text/javascript"&gt;&lt;/script&gt;
  
          &lt;title&gt;Practise&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
      &lt;h2&gt;PRACTICE&lt;/h2&gt;
      &lt;circle&gt;&lt;/circle&gt;
  
      &lt;/body&gt;
      &lt;/html&gt;
  
      &lt;script src="index.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>one more quesiton, if i call this index.js in head code does not work , it only works if i call this script file at very bottom of index.html. if anyone can help why is this and how to fix it?</p>