JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>

<svg class="genderChart" width="300" height="201" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">        
      <defs>  
        <clipPath id="manClipPath">
            <rect x="61" y="32" width="300" height="20"></rect>
        </clipPath>
        <clipPath id="womanClipPath">
            <rect x="177" y="32" width="300" height="70"></rect>
        </clipPath>
      </defs>
          <g transform="translate(0,0)">           
                <image x="61" y="32" height="127" width="47" 
                        xlink:href="http://localhost:63270/SMJ2/images/icon-man-blue.png" id="manBlue">
                </image>         
                <image x="61" y="32" height="127" width="47" 
                        xlink:href="http://localhost:63270/SMJ2/images/icon-man-grey.png" id="manGrey">
                </image>    
              
                        
                <image x="177" y="32" height="127" width="60" 
                        xlink:href="http://localhost:63270/SMJ2/images/icon-woman-pink.png" id="womanPink">
                </image>         
                <image x="177" y="32" height="127" width="60" 
                        xlink:href="http://localhost:63270/SMJ2/images/icon-woman-grey.png" id="womanGrey">
                </image>
          </g>
    </svg>

    <script>
        $(document).ready(function () {
        showChart();
        });
    </script>

JavaScript

function showChart() {
        var manGrey = document.getElementById("manGrey");
        var womanGrey = document.getElementById("womanGrey");
    
        var svg = d3.select(".genderChart");
    
        manGrey.setAttribute('clip-path', "url(#manClipPath)");
        
        var g = svg.append("g");
        
        var textElement = g.append("text");
        
        textElement
        .attr("x", 107) 
        .attr("y", 55)
        //.style("text-anchor", "middle")
        .style("font-size", "32px")
        .style("font-family", "OpenSans-Bold")
        .style("fill", "#1c86cf")
        .text("8900" + "%");
        
        //var bbox = textElement.getBBox();
        //var width = bbox.width;
        //var height = bbox.height;        
        //var width = textElement.getComputedTextLength();

        g.append("text") 
        .attr("x", 69) 
        .attr("y", 180)
        //.style("text-anchor", "middle")
        .style("font-size", "16px")
        .style("font-family", "OpenSans-Regular")
        .style("fill", "#343339")
        .text("Male");
        
        womanGrey.setAttribute('clip-path', "url(#womanClipPath)");        
        
        var g = svg.append("g");
        
        g.append("text") 
        .attr("x", 231) 
        .attr("y", 55)
        //.style("text-anchor", "middle")
        .style("font-size", "32px")
        .style("font-family", "OpenSans-Bold")
        .style("fill", "#f2529d")
        .text("45" + "%");
            
        g.append("text") 
        .attr("x", 184) 
        .attr("y", 180)
        //.style("text-anchor", "middle")
        .style("font-size", "16px")
        .style("font-family", "OpenSans-Regular")
        .style("fill", "#343339")
        .text("Female");
    
    //manGrey.removeAttribute('clip-path');
    //womanGrey.removeAttribute('clip-path');
    
    
}