JSFiddle - React, Tailwind, and code Playground

by JayantaRigil

JavaScript

var x=0;
var y=0;
var width = 800;
var height = 800;
var user_x=0;

var paper = Raphael(x,y,width, height);
var persons=["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W"];
var points=[];

function NGon(x, y, N, side, angle) {
    user_x=x;
    var path = "",
        c, temp_x, temp_y, theta;
    
    for (c = 0; c <= persons.length; c += 1) {
        theta = (c + 0.5) / persons.length * 2 * Math.PI;
        temp_x = x + Math.cos(theta) * side;
        temp_y = y + Math.sin(theta) * side;
       
        path += (c === 0 ? "M" : "L") + temp_x + "," + temp_y;
        if (c<persons.length)
				{
					var point=paper.text(temp_x,temp_y,persons[c]); 
					points.push(point);
				}
    }
    return path;
}

function drawLine(parent,child){
	//find index of parent in person array
	var index1=persons.indexOf(parent);
	//use the index to find the point object in the points array
	var pointObj=points[index1];
	//get x and y from point object
	var parent_x=pointObj.attrs.x;
	var parent_y=pointObj.attrs.y;
	
	//find index of child in person array
	var index2=persons.indexOf(child);
	//use the index to find the point object in the points array
	var pointObj_=points[index2];
	//get x and y from point object
	var child_x=pointObj_.attrs.x;
	var child_y=pointObj_.attrs.y;
  var quad_x=0;
  //get quadratic points
  if (parent_x < user_x && child_x < user_x){
  	quad_x=child_x+20;
  }else{
  	quad_x=child_x-20;
  }
  
  var quad_y=360;
	
	//draw the line
	paper.path("M"+parent_x+","+parent_y+"Q,"+quad_x+","+quad_y+","+child_x+","+child_y).attr(
  {
  	"stroke":"lightgrey"
    }
  );
	
	
}

paper.path(NGon(400, 400, persons.length, 200)).attr(
{
	"stroke-dasharray":"-",
  "stroke":"lightgrey"
});


drawLine("A","N");
drawLine("A","T");
drawLine("S","G");
drawLine("V","W");
drawLine("V","A");
drawLine("K","H");
drawLine("M","L");
drawLine("A","W");
drawLine("L","F");
drawLine("R","C");
drawLine("M","J");
drawLine("R","F");