JSFiddle - React, Tailwind, and code Playground

by JayantaRigil

HTML

<div id="paper">
    <div id="tooltip" class="tooltip">
      <div id="content">
      
      </div>
    </div>
</div>

CSS

.tooltip {
  position: absolute; 
  width: 70px; 
  height: 50px; 
  background: white; 
  opacity: 0%;
 z-index: 9999;
  visibility: hidden;
  border: 1px solid black;
  box-shadow: 1px 1px 5px rgba(0,0,0,.3);
}

JavaScript

var x = 0;
var y = 0;
var width = 1000;
var height = 1000;
var user_x = 0;
var viewBoxWidth = 10;
var viewBoxHeight = 5;
var relationType = [
	{"relation":"Good", "color":"blue"},
  {"relation":"Average","color":"cyan"},
  {"relation":"Bad","color":"red"}
];

var tooltip = document.querySelector('#tooltip');
var content=document.querySelector('#content');
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","X","Y","Z","A1", "B1", "C1", "D1", "E1", "F1", "G1", "H1", "I1", "J1", "K1", "L1", "M1", "N1", "O1", "P1", "Q1", "R1", "S1", "T1", "U1", "V1", "W1","X1","Y1","Z1","A2", "B2", "C2", "D2", "E2", "F2", "G2", "H2", "I2", "J2", "K2", "L2", "M2", "N2", "O2", "P2", "Q2", "R2", "S2", "T2", "U2", "V2", "W2","X2","Y2","Z2","A3", "B3", "C3", "D3", "E3", "F3", "G3", "H3", "I3", "J3", "K3", "L3", "M3", "N3", "O3", "P3", "Q3", "R3", "S3", "T3", "U3", "V3", "W3","X3","Y3","Z3"];
var relations=[
	{"person1":"A", "person2": "N", "relation" : 0},
  {"person1" : "A","person2": "J","relation":1},
	{"person1":"M","person2": "R","relation":2},
	{"person1":"M","person2" :"F","relation":0},
	{"person1":"M","person2" :"W3","relation":0},
	{"person1":"U","person2" :"V","relation":2},
	{"person1":"U","person2" :"E","relation":1},
	{"person1":"A","person2" :"N","relation":2},
	{"person1":"A","person2" :"J","relation":2},
	{"person1":"M","person2" :"R","relation":1},
	{"person1":"M","person2": "E","relation":2},
	{"person1":"D1","person2": "L3","relation":0},
	{"person1":"A","person2": "N","relation":2},
	{"person1":"A","person2": "J","relation":1},
	{"person1":"Z","person2": "M","relation":2},
	{"person1":"D","person2": "M","relation":2},
	{"person1":"Q2","person2": "B1","relation":0},
	{"person1":"L1","person2": "Q","relation":2},
	{"person1":"N3","person2": "N2","relation":0},
	{"person1":"N3","person2": "G3","relation":1},
	{"person1":"G3","person2":...