Edit in JSFiddle

// On crée un élément svg qu'on ajoute au body du html
var svg = d3.select("body").append("svg");

// On ajoute ensuite un groupe (g), ainsi qu'à l'intérieur de ce groupe, un cercle et du texte.
var group = svg.append("g")

// On fait un premier cercle dans le groupe
var circle = group.append('circle')
   .attr("cx",150)
   .attr("cy",150)
   .attr("r",45)
   .style("fill","#000")
   .style("stroke","red")
   .style("stroke-width","10")

// On dessine ensuite un rectangle au dessus du cercle
var rect = group.append('rect')
   .attr("x",50)
   .attr("y",50)
   .attr("width",200)
   .attr("height",100)
   .style("fill","#000")
   .style("stroke","red")
   .style("stroke-width","10")

// Puis on dessine 2 cercles dans le rectangle
var circle2 = group.append('circle')
   .attr("cx",200)
   .attr("cy",100)
   .attr("r",20)
   .style("fill","#fff")
   .style("stroke","red")
   .style("stroke-width","10")

var circle3 = group.append('circle')
   .attr("cx",100)
   .attr("cy",100)
   .attr("r",20)
   .style("fill","#fff")
   .style("stroke","red")
   .style("stroke-width","10")

.text {
    color: red;
    
}