JSFiddle - React, Tailwind, and code Playground

by sqiudward

HTML

<script src="https://cdn.jsdelivr.net/raphael/2.1.4/raphael-min.js"></script>
<script src="https://cdn.jsdelivr.net/wheelnav/1.6.1/wheelnav.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery/1.12.3/jquery.min.js"></script>
<div id="slider-wrapper">
<svg>
    
  </svg>
  <div id="home" class="wheelNavGitHub">
  
  
  NEXUS</div>
  <div id="dashboard_level_01"></div>
  <div id="dashboard_level_02"></div>
  <div id="programs_level_01"></div>
  <div id="programs_level_02"></div>
  <div id="programs_level_03"></div>
</div>

JavaScript

// inner circle
home = new wheelnav('home', null, 600, 600);

home.slicePathFunction = slicePath().DonutSlice;
home.slicePathCustom = slicePath().DonutSliceCustomization();
home.slicePathCustom.minRadiusPercent = 0.11;
home.slicePathCustom.maxRadiusPercent = 0.263;
home.sliceSelectedPathCustom = home.slicePathCustom;
home.sliceInitPathCustom = home.slicePathCustom;
home.navAngle = 0;
//home.titleRotateAngle = 0;
home.titleFont = '100 11px Helvetica, Arial, sans-serif';
home.colors = ['#328800'];
home.clickModeRotate = false;
home.animatetime = 250;
home.animateeffect = 'linear';
home.slicePathAttr = {
  opacity: 1,
  fill: "#229933",
  "stroke-width": 0,
  stroke: "#e7e7e7",
  cursor: "pointer",
  filter: "url(#filter1)"
};

home.spreaderEnable = true;
home.spreaderTitleFont = '200 18px Helvetica';
home.spreaderInTitle = 'NEXUS';
home.spreaderOutTitle = 'NEXUS';
home.spreaderRadius = 35.5;

home.createWheel(["dash", "progs", "", "", ""]);
home.setTooltips(["The Dashboard!", "Program Information", "", "", ""]);

// dashboard first level ------------------------------------------------------------------------
dashboard_level_01 = new wheelnav('dashboard_level_01', home.raphael);

dashboard_level_01.slicePathFunction = slicePath().DonutSlice;
dashboard_level_01.slicePathCustom = slicePath().DonutSliceCustomization();
dashboard_level_01.slicePathCustom.minRadiusPercent = 0.26;
dashboard_level_01.slicePathCustom.maxRadiusPercent = 0.50;
dashboard_level_01.sliceSelectedPathCustom = dashboard_level_01.slicePathCustom;
dashboard_level_01.sliceInitPathCustom = dashboard_level_01.slicePathCustom;

dashboard_level_01.navAngle = 0;
dashboard_level_01.titleFont = '100 14px Helvetica, Arial, sans-serif';
dashboard_level_01.colors = ['#329933'];
dashboard_level_01.clickModeRotate = true;
dashboard_level_01.animatetime = 250;
dashboard_level_01.animateeffect = 'linear';
dashboard_level_01.slicePathAttr = {
  opacity: 1,
  fill: "#229933",
  "stroke-width": 0,
  stroke:...