JSFiddle - React, Tailwind, and code Playground

HTML

<div id="center"></div>
<div class="point"></div>

CSS

#center {
    width:300px;
    height:220px;
    border-radius:50%;
    border:1px solid red;
    position:relative;
    left:200px;
    top:100px;
}

.test {
  width:0.5em;
  height:0.5em;
  background:gray;
  position:absolute;
  border-radius:50%;
  font-size:1em;
  background: green;
  white-space:nowrap;
  top:-20%;
  
}

.test.left{
    background:orange;
   
}

.test.left:after{
    content: attr(data-content);
    position:absolute;
    right:150%;
}

.test.right{
    background:blue;
}

.test.right:after{
    content: attr(data-content);
    position:absolute;
    left:150%;
}

.point {
  width:3em;
  height:3em;
}

JavaScript

var array = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11,12 ];
//var array = [ 1, 2, 3];
var mono = array.length % 2 === 1 ? true : false;
var items = { tops : [], lfts : [], rgts : [] };
var spliter = Math.floor(array.length / 2);
var pointer = $('<div />', {class:'test'});
var title = "some title"


//htmls

var globe = $('#center');
var width = globe.width() / 2 ;
var height = globe.height() / 2;
var point = $('.point').width();


if(array.length) {

if(mono) {
  items.tops.push(array.splice(0, 1));
}

items.lfts.push(array.splice(0, spliter));
items.rgts.push(array.splice(0, spliter));
    
}

var arrange = {
    
    	counter : function ( values, dir ) {
        
            this.maxAngle = -430;
            this.minAngle = -330;
            this.variation =  (this.maxAngle - this.minAngle) / values.length;
            this.buffer = this.variation / 2;
            var direction = dir === 'tops' ? 'top' : dir === 'lfts' ? 'left' : 'right';
            
            for(i=0; i < values.length; i++) {
               
                
                var angle = this.variation*i + this.minAngle + this.buffer;
                var spacer = 5*i;
                
                if(direction === 'top' ) {
                
                    pointer.clone().css({
        				left: width   + width * Math.cos(270 * Math.PI / 180),
        				top: (height - point/2) + height * Math.sin(270 * Math.PI / 180)
      				}).appendTo('#center');
                    
                    return;
                    
                }
                
                pointer.clone()
                .attr('data-content', title + i)
                .addClass(direction).css(
        			direction,  (width-spacer) + width * Math.cos(angle * Math.PI / 180)
      			)
                .css('top', height + height * Math.sin(angle * Math.PI / 180))
                    .appendTo('#center');
                
            }
        	
        },

    	tops : function ( values, dir ) {
       ...