title: Add label/text to D3 circles?
body: <p>I have the following CSV file:</p>
  
  <pre><code>city,population,latitude,longitude
  New York; New York,8336697,40.712784,-74.005941
  Los Angeles; California,3857799,34.052234,-118.243685
  Houston; Texas,2160821,37.326159,-91.955988
  San Antonio; Texas,1382951,29.419336,-98.478021
  Austin; Texas,842592,32.552483,-98.370042
  Charlotte; North Carolina,775202,35.227087,-80.843127
  Dallas; Texas,1241162,32.191303,-96.878367
  Phoenix; Arizona,1488750,33.448377,-112.074037
  San Jose; California,982765,37.338208,-121.886329
  Fort Worth; Texas,777992,32.755488,-97.330766
  </code></pre>
  
  <p>I would like to append the <code>city</code> value on top of circles I am rendering using D3. Here is the code that I am using to create these circles:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;style&gt;
  
  .counties {
      fill: #000;
          stroke: #fff;
          stroke-width: 0.25px;
  }
  
  .states {
          fill: none;
          stroke: #fff;
          stroke-linejoin: round;
  }
  &lt;/style&gt;
  
  &lt;body&gt;
  &lt;script src="http://d3js.org/d3.v3.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://d3js.org/topojson.v1.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  var width = 960,
          height = 500;
  
  var projection = d3.geo.albersUsa()
                            .scale(1000)
                             .translate([width / 2, height / 2]);
  
  var path = d3.geo.path()
                        .projection(projection);
  
  var svg = d3.select("body").append("svg")
                   .attr("width", width)
                   .attr("height", height);
  var layer = svg.append('g');
  d3.json("us.json", function(error, us) {
      layer.append("g")
                 .attr("class", "counties")
                 .style("fill", "#fcfa86")
                 .selectAll("path")
                 .data(topojson.feature(us, us.objects.counties).features)
                 .enter().append("path")
                 .attr("d", path);
  
              svg.append("path")
                 .datum(topojson.mesh(us, us.objects.states, function(a, b) { return  a !== b; }))
                 .attr("class", "states")
                 .style("stroke", "orange")
                 .attr("d", path);
  
  });
  
  d3.csv("city_growth.csv", function(error, data) {
      svg.selectAll("circle")
          .data(data)
          .enter()
          .append("circle")
          .attr("cx", function(d) {return projection([d.longitude, d.latitude])[0];})
          .attr("cy", function(d) {return projection([d.longitude, d.latitude])[1];})
          .attr("r", function(d) {return Math.sqrt(d.population * 0.00004);})
          .style("opacity",".6")
          .style("fill", "red");
  
  &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>How can I create a reference to the <code>city</code> value and have it come up next to every single circle? I used the following code fragment to make this happen, but the labels are not coming up:</p>
  
  <pre><code>svg.selectAll("circle")
          .data(data)
          .enter()
          .append("text")
          .text(function(d) { return d.city; })
          .attr("x", function(d) {return projection([d.longitude, d.latitude])[0];})
          .attr("y", function(d) {return projection([d.longitude, d.latitude])[1];})
          .attr("font-size", "10px")
          .attr("color", "red");
  </code></pre>
  
  <p>What is the proper way to have the city names come up from the CSV file displayed at the top? Am I referring to the <code>city</code> column incorrectly? Any suggestion will be very helpful!</p>