I am a complete beginner in D3.js (and I'm using React Native). The goal is to create a circles holding pictures (as one element) based on data from an array. Like this:

Currently this is my code:

var data2 = [
        {id: 1, name: "Sachin", pop: 200, color: 'red', image: "https://picsum.photos/900" },
        {id: 2, name: "Murali", pop: 100, color: 'green', image: "https://picsum.photos/900" }
    ]

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


data2.forEach(function(d){ 
        svg.append("clipPath")
        .attr('id', d.id)
        .append('circle')
        .attr("cx", d.x)
        .attr("cy", d.y)
        .attr("r", d.pop)
        .attr("", console.log(d))
        .style("fill", "green")
        .attr("", console.log("done! with this one"))
    })

data2.forEach(function(d){
        svg.append('image')
        .attr('xlink:href',d.image)
        .attr('width', d3.sum([d.pop,-10]))
        .attr('height', d3.sum([d.pop,-10]))
        //.attr('transform','translate('+parseInt(d.posx+config.avatar_size/2)+','+parseInt(d.posy+config.avatar_size/2)+')')
        .attr('clip-path','url(' + d.id + ')');
    });

The console logs and inspector shows this:

But, the code results in one square picture behind a smaller one. This is what it looks like now:

Please let me know how this can be resolved! Thank you!