title: Plotting points on a map with D3
body: <p>I'm trying to plot a few points onto a map using the D3 geo library based on latitudes and longitudes. However, when I pass these values into my projection function, it results in coordinates that our outside the bounds of my SVG image. My code is based on <a href="http://bl.ocks.org/mbostock/3757119" rel="noreferrer">this example provided in the documentation</a>.</p>
  
  <p>I've thrown the current code up at: <a href="http://bl.ocks.org/rpowelll/8312317" rel="noreferrer">http://bl.ocks.org/rpowelll/8312317</a></p>
  
  <p>My source data is a simple array of objects formatted like so</p>
  
  <pre><code>var places = [
    {
      name: "Wollongong, Australia",
      location: {
        latitude: -34.42507,
        longitude: 150.89315
      }
    },
    {
      name: "Newcastle, Australia",
      location: {
        latitude: -32.92669,
        longitude: 151.77892
      }
    }
  ]
  </code></pre>
  
  <p>Following this I set up an Plate Carrée projection like so:</p>
  
  <pre><code>var width = 960,
  height = 480
  
  var projection = d3.geo.equirectangular()
      .scale(153)
      .translate([width / 2, height / 2])
      .precision(.1);
  
  var path = d3.geo.path()
      .projection(projection)
  </code></pre>
  
  <p>From there I draw the map with code effectively identical to the linked example. At the end of my script, I use the following code to plot points on this map:</p>
  
  <pre><code>svg.selectAll(".pin")
      .data(places)
    .enter().append("circle", ".pin")
      .attr("r", 5)
      .attr("transform", function(d) {
        return "translate(" + projection([
          d.location.latitude,
          d.location.longitude
        ]) + ")"
      })
  </code></pre>
  
  <p>However this code results in points that are outside of the SVG element's bounds. Is there anything obvious I'm doing wrong here?</p>