CSV to circles

<!DOCTYPE html>
<html>

  <head>
    <script data-require="d3@*" data-semver="3.4.6" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.6/d3.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
  </body>

</html>

// Code goes here

d3.csv("data.csv", function (error, circleData) {
  circleData.forEach(function (d) {
    d['KCComment'] = +d['KCComment'];
    d['pscoreResult'] = +d['pscoreResult'];
    d['r'] = +d['r'];
  });
  console.log(circleData);
  
  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");
});

/* Styles go here */

fmname,fmtype,KCComment,pscoreResult,r
test1,type1,7.1,8,39
test2,type2,1.2,3,12