title: Uncaught TypeError: d3.select(...).selectAll(...).data(...).enter(...).append(...).atrr is not a function
body: <p>I am having the subject error while plotting D3 graph. The data is getting loaded correctly because when I do console.log I can see the array.</p>
  
  <p>Javascript:</p>
  
  <pre><code>d3.csv("../../shot_logs.csv", function (data) {
  
      var shots = d3.select("svg")
          .selectAll("g")
          .data(data)
          .enter()
          .append("g")
              .atrr("class", "shot")
              .attr("transform", function (d) {
                      return "translate(" + d.x_coodinates + "," + d.y_coordinates + ")";
      });
      shots.append("circle")
          .attr("r", 5);
  
  });
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en-US"&gt;
  
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;link rel="stylesheet" href="style-main.css" type="text/css" media="all"&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://d3js.org/d3.v4.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;h1&gt;D3 Charts&lt;/h1&gt;
      &lt;select id="selector"&gt;&lt;/select&gt;
      &lt;svg id="canvas" height="600px" width="1200px"&gt;&lt;/svg&gt;
  
      &lt;script src="JS/script.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>