title: Adding Dots to d3 SVG Map
body: <p>I am new to d3 and am having some trouble adding dots to my SVG map. I am loading in the SVG map and then attempting to append the coordinates from my data, which is an array of objects formatted like this: </p>
  
  <pre><code>{schoolName: "Harvard University", gpa: 4, state: "MA", city: "Cambridge", longitude: -71.10973349999999, latitude: 42.3736158}
  </code></pre>
  
  <p>The result of my code below is that I am appending a set of circles below the SVG tag, but none are appearing on the map and I am receiving what looks like a syntax error that I do not see in my code. </p>
  
  <p>Translate Error:
  <a href="https://i.stack.imgur.com/V0e0Y.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/V0e0Y.png" alt="Translate Error"></a></p>
  
  <p>What am I doing incorrectly here? </p>
  
  <pre><code>var coords = require('./data/coordinates')
  
  document.addEventListener("DOMContentLoaded", () =&gt; {
  
      // loads svg map
      d3.xml('src/data/usa2.svg', function(data){
          document.body.append(data.documentElement)
      })
  
      // adjusts data to include coordinates for each city
      cities = cities.default
      let schoolData = []
      d3.json("src/data/schoolInfo.json", function(schools){
          schools.map(el =&gt; {
              let currentCity = cities.filter(function(cities){return cities.city === el.city})
              el["hs-gpa-avg"] !== null &amp;&amp; currentCity.length &gt; 0 ? schoolData.push({"schoolName": el["displayName"], "gpa": el["hs-gpa-avg"], "state": el["state"], "city": el["city"], "longitude": currentCity[0]["longitude"], "latitude": currentCity[0]["latitude"]}) : ''
          })
  
  
      var width = 1200,
          height = 720;
  
      var albersProjection = d3.geoAlbers()
          .scale(1000)
          .rotate([70, 0])
          .center([-15, 35])
          .translate([width/2, height/2]);
  
      var svg = d3.select('svg')
  
      svg.selectAll("circle")
          .data(schoolData).enter()
          .append("circle")
          .attr("transform", function(d) {
              let coords = albersProjection([ d.longitude, d.latitude ]);
              return `translate(${coords[0]}px, ${coords[1]}px)`
          })
          .attr("r", "8px")
          .attr("fill", "red")   
      })
  
  })
  </code></pre>
  
  <p>In addressing the error related to the translation, I still have circles misplaced, as predicted in this <a href="https://stackoverflow.com/a/58424665/7106086">answer</a>:</p>
  
  <p>Misplaced points:
  <a href="https://i.stack.imgur.com/EGC69.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EGC69.png" alt="Misaligned points to coordinates on map"></a></p>