Using groups - circles and numbers

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!

var svg = d3.select("body").append("svg")
  .attr("width", 960)
  .attr("height", 500)

/*creating a background that we don't want with the group */
		svg.append("rect")
   		  .attr("width", 960)
  			.attr("height", 500)			
   			.attr("x",0)
   			.attr("y",0)
   			.attr("fill","pink");
d3.json("data.json", function(error, json) {
  /* Define the data for the circles */
  var elem = svg.selectAll("g")
  .data(json)
  var elemEnter = elem.enter().append("g")
  //.attr("transform", function(d){return "translate("+d.x+",80)"})
   
   /*Create the circle for each block */
 	 elemEnter.append("circle")
    		.attr("cy", function (d) {return d.y-300})
    		.attr("cx", function (d) {return d.x})
    		.attr("r", function (d) {return d.r})
   			.attr("stroke","black")
        .attr("fill", "orange")
   
  /* Create the text for each block */
   var text = elemEnter.append("text")
        .attr("y", function(d){return d.y-300})
    		.attr("x", function(d){return d.x})
        .style("font-size", 36)
        .style("font-family", "monospace")
      	.text(function(d){return d.name})
})
  </script>
</body>

https://d3js.org/d3.v4.min.js