title: Drawing multiple circles with text in them using d3.js
body: <p>I am a new javascript programmer. I am trying to make a visualization that draws circles based on categories ("basically a single category on every circle"). My issue is that my code only prints one circle, with all categories on top of each other. </p>
  
  <pre><code> &lt;script&gt; 
          var width = 600;
          var height = 600;
  
          var data = d3.json("/data", function(error, data){
                      console.log(data)
          // Make SVG container 
          var svgContainer = d3.select("body")
                               .append("svg")
                               .attr("width", width)
                               .attr("height", height);
  
          var elem = svgContainer.selectAll("div")
                                 .data(data);
  
          var elemEnter = elem.enter()
                              .append("g")
  
          var circles = elemEnter.append("circle")
                                .attr("cx", 100)
                                .attr("cy", 100)
                                .attr("r",80)
                                .style("fill", "blue")
  
          elemEnter.append("text")
                   .attr("dy", function(d){
              return d.SkillProficiencyId +80;
              }).attr("dx",function(d){ return d.SkillProficiencyId-1;})
                      .text(function(d){return d.CategoryName});
          });
  
  
      &lt;/script&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/YqkiH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YqkiH.png" alt="enter image description here"></a></p>
  
  <pre><code>&gt; Sample of my Data
  (18) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
  0:
  EmployeeId: 11111
  AdUserName: null
  FirstName: "ABC"
  LastName: "DEF"
  SkillId: 2346
  CategoryName: "Adaptive Security Architecture"
  SkillProficiencyId: 1
  SkillProficiencyLevel: "Beginner"
  __proto__: Object
  1: {EmployeeId: 11111, AdUserName: null, FirstNam...
  2: {EmployeeId: 11111, AdUserName: null, FirstName....
  </code></pre>