JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main" />

JavaScript

var myData = [
    {
        Name: "Name1",
        Size: 60
    },
    {
        Name: "Name2",
        Size: 90
    }];

var width = 400;
var height = 200;

var svg = d3.select("#main")
    .append("svg")
    .attr("id", "svgElement")
    .attr("width", width)
    .attr("height", height);

var svgg = svg.selectAll("g.myGroup")
    .data(myData)
    .enter()
    .append("g");

svgg.each(function (d, i) {

    selection = d3.select(this);
    // Circle
    var circle = selection.append("circle")
    .attr("cx", 75 + i * 200)
    .attr("cy", height/2)
    .attr("r", d.Size)
    .style("fill", "none")
    .style("stroke-width", 10)
    .style("stroke", "blue");
    
    var text = selection.append("text")
    .attr("dx", 75 + i * 200)
    .attr("dy", height/2)
    .text(function (d) { return d.Name; });
});

svgg.on("mouseover", function(d) {
   d3.select(this).select("circle")
       .style("stroke", "red");
    }).on("mouseleave", function(d) {
       d3.select(this).select("circle")
           .style("stroke", "blue");
});