JSFiddle - React, Tailwind, and code Playground

by KgomDr

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.15.0/d3.min.js"></script>

JavaScript

let g = d3.select(document.body).append('svg').append('g');

        g.append("circle")
        .attr("cx",width)
        .attr("cy",(circle_r*2 +gap_between_circles)* index)
        .attr("r", circle_r)        
        .style("fill",colors[key]);

        g.append("text")
        .text(key)
        .attr("x", width + circle_r + circle_text_gap)
        .attr("y", (circle_r*2 +gap_between_circles)* index)
        .attr("dominant-baseline","middle");

        index++;