title: Plotting svg circles based off csv data
body: <p>I'm trying to plot circles from data in my csv file, but the circles are not appearing on the svg canvas. I believe the problem stems from how I load in the data (it gets loaded as an array of objects), but I'm not quite sure how to figure out what to do next.</p>
  
  <p>Based off this tutorial: <a href="https://www.dashingd3js.com/svg-text-element" rel="nofollow">https://www.dashingd3js.com/svg-text-element</a></p>
  
  <p>D3.js code:</p>
  
  <pre><code>        var circleData = d3.csv("files/data.csv", function (error, data) {
              data.forEach(function (d) {
                  d['KCComment'] = +d['KCComment'];
                  d['pscoreResult'] = +d['pscoreResult'];
                  d['r'] = +d['r'];
              });
              console.log(data);
          });
  
          var svg = d3.select("body").append("svg")
              .attr("width", 480)
              .attr("height", 480);
  
          var circles = svg.selectAll("circle")
              .data(circleData)
              .enter()
              .append("circle");
  
          var circleAttributes = circles
              .attr("cx", function (d) { return d.KCComment; })
              .attr("cy", function (d) { return d.pscoreResult; })
              .attr("r", function (d) { return d.r; })
              .style("fill", "green");
  
          var text = svg.selectAll("text")
              .data(circleData)
              .enter()
              .append("text");
  
          var textLabels = text
              .attr("x", function(d) { return d.KCComment; })
              .attr("y", function(d) { return d.pscoreResult; })
              .text(function (d) { return "( " + d.KCComment + ", " + d.pscoreResult + " )"; })
              .attr("font-family", "sans-serif")
              .attr("font-size", "20px")
              .attr("fill", "red");
  </code></pre>
  
  <p>What the CSV looks like:</p>
  
  <pre><code>fmname, fmtype, KCComment, pscoreResult, r
  test1, type1, 7.1, 8, 39
  test2, type2, 1.2, 3, 12
  </code></pre>