JSFiddle - React, Tailwind, and code Playground

JavaScript

var width = 700, height = 400;
        var rx = width/2 -50, ry = height/2 -50;
        var circleNumbers = 7;

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


        var degree = 360 / circleNumbers;

        for (var i = 0; i < circleNumbers; i++) {

            var circlePosition = polarToCartesian(width / 2, height / 2, rx, ry, i * degree);
            svg.append("circle")
                .attr("cx", circlePosition.x)
                .attr("cy", circlePosition.y)
                .attr("r", "25px")
                .attr("fill", "red");
        }


        function polarToCartesian(centerX, centerY, radiusX, radiusY, angleInDegrees) {

            var angleInRadians = ((angleInDegrees-90)* Math.PI / 180.0);


            return {
                x: centerX + (radiusX * Math.cos(angleInRadians)),
                y: centerY + (radiusY * Math.sin(angleInRadians))
            };
        }