title: d3 - load two specific columns from csv file
body: <p>I am trying to plot circles on a map based on data from csv files. I want the latitude and longitude from the csv file and plot a circle. 
  I am unable to long the two fields. I get an object undefined error. Here's my code so far:
  Here's the link for the CSV file -<br>
  <a href="http://slate-interactives-prod.elasticbeanstalk.com/gun-deaths/getCSV.php" rel="nofollow">http://slate-interactives-prod.elasticbeanstalk.com/gun-deaths/getCSV.php</a></p>
  
  <pre><code> &lt;html&gt;
                  &lt;head&gt;
           &lt;meta    charset="utf-8"&gt;
          &lt;link href="d3-geomap/css/d3.geomap.css" rel="stylesheet"&gt;
          &lt;script src="d3-geomap/vendor/d3.geomap.dependencies.min.js"&gt;&lt;/script&gt;
          &lt;script src="d3-geomap/js/d3.geomap.min.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;style&gt;
      path.unit:hover{
      fill:#99d8c9;
  }
  &lt;/style&gt;
      &lt;body&gt;
          &lt;div id="map"&gt;&lt;/div&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  
     &lt;script&gt;
      var map = d3.geomap.choropleth()
      .geofile('d3-geomap/topojson/countries/USA.json')
      .projection(d3.geo.albersUsa)
      .column('2012')
      .unitId('fips')
      .scale(1000)
      .legend(true);
  
      var width = 950,
      height = 550;
  
  // set projection
  var projection = d3.geo.albersUsa();
  
  // create path variable
  var path = d3.geo.path()
      .projection(projection);
      var svg = d3.select("body").append("svg")
                      .attr("width", width)
                      .attr("height", height);
  
      d3.csv("data.csv", function(data) {
      var coordinates = projection([data.lat,data.lng]);
      svg.append("circle")
              .attr("cx", coordinates[0])
              .attr("cy", coordinates[1])
              .attr("r", 5)
              .style("fill", "red");
      });
  
      d3.select('#map')
          .call(map.draw, map);
  
      &lt;/script&gt;
  </code></pre>