title: Circles in Map Displayed Incorrect Location in D3 V4
body: <p>I am using a tutorial to learn how to generate maps in D3.v3, but I am using D3.v4. I am just trying to get some circles to appear on the map (see below). The code works except that the circles are over Nevada and should be in the Bay Area. I imagine this is a mismatch between projections of the map and the projected coordinates. I am not sure what projection the map is in, but I have tried to force it to be albersUsa (see commented out commands where I generate path) but this causes the entire map to disappear. Any help would be appreciated!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  
  &lt;script src="https://d3js.org/d3.v4.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://d3js.org/topojson.v2.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  
  var w = 960,
      h = 600;
  var projection = d3.geoAlbersUsa();
  var path = d3.geoPath()
               //.projection(projection)
  
  d3.json("https://d3js.org/us-10m.v1.json", function(error, us) {
    if (error) throw error;
  
    var svg = d3.select("body").append("svg")
        .attr("width", w)
        .attr("height", h);
  
    svg.selectAll("path")
       .data(topojson.feature(us, us.objects.states).features)
       .enter().append("path")
    .attr("class", "states")
       .attr("d", path);
  
     svg.append("path")
        .attr("class", "state-borders")
        .attr("d", path(topojson.mesh(us, us.objects.states)))
  
     svg.append("path")
        .attr("class", "county-borders")
        .attr("d", path(topojson.mesh(us, us.objects.counties)));
  
        aa = [-122.490402, 37.786453];
       bb = [-122.389809, 37.72728];
  
     svg.selectAll("circle")
        .data([aa,bb]).enter()
        .append("circle")
        .attr("cx", function (d) { return projection(d)[0]; })
        .attr("cy", function (d) { return projection(d)[1]; })
        .attr("r", "8px")
        .attr("fill", "red")
      });
  
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>