Edit in JSFiddle

var data = [
    {"x":190,"y":34,"r":20,"color":"#FDAE6B","name":"cercle 1"},
    {"x":150,"y":89,"r":39,"color":"#FDD0A2","name":"cercle 2"},
    {"x":267,"y":234,"r":38,"color":"#A1D99B","name":"cercle 3"},
    {"x":100,"y":34,"r":29,"color":"#31A354","name":"cercle 4"},
    {"x":87,"y":89,"r":21,"color":"#3182BD","name":"cercle 5"},
    {"x":160,"y":248,"r":25,"color":"#FD8D3C","name":"cercle 6"},
    {"x":78,"y":150,"r":35,"color":"#A1D99B","name":"cercle 7"},
    {"x":345,"y":156,"r":32,"color":"#9ECAE1","name":"cercle 8"},
    {"x":233,"y":117,"r":24,"color":"#C6DBEF","name":"cercle 9"}
];
     
var svg = d3.select("body").append("svg");
     
var nodes = svg.selectAll(".node")
   .data(data)
   .enter()
     .append("g")
     .attr("class","node")
     .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });


   nodes.append("circle")
     .attr("r", function(d) {return d.r})
     .style("fill",function(d){return d.color;})
   
   nodes.append("text")
      .attr("dy", ".3em")
      .style("text-anchor", "middle")
      .text(function(d) { return d.name; });
     

text {
    font: 10px sans-serif;
}