JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://d3js.org/d3.v3.min.js"></script>
<div id="hiveish">

</div>

CSS

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}

.x.axis line {
  shape-rendering: auto;
}

.line {
  fill: none;
  stroke: #000;
  stroke-width: 2.5px;
}


.bar rect {
  fill: #5b80b3;
  shape-rendering: crispEdges;
}

.bar text {
  fill: #fff;
}

.axis path, .axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
.axis {
  stroke: #000;
  stroke-width: 1.5px;
}

.node circle {
  stroke: #000;
}
/*.node circle {
  stroke: #000;
}*/

.cirkle{
  border-radius: 50%;
  width: 10px;
  height: 10px;
  background-color: rgb(31, 119, 180);
 
}
.blah-node {
  margin-left: 10px;
}

.leank{
  width: 10px;
  margin-bottom: 4px;
  margin-left: 2px;
 /* margin-top: auto;*/
 /* padding-bottom: 5px;*/
  height: 2px;
  background-color: rgb(31, 119, 180);
 
}

.link {
  fill: none;
  /*stroi*/
 /* stroke: #999;*/
  stroke: rgb(31, 119, 180);
  stroke-width: 1.5px;
  stroke-opacity: .3;
}
/*.link .active1 {
  stroke: green;
  stroke-width: 2px;
  stroke-opacity: 1;
}*/

/*.link .active {
  stroke: red;
  stroke-width: 2px;
  stroke-opacity: 1;
}*/
.link.active {
 /* stroke: rgb(180, 31, 52);*/
  stroke: #efaf25;
  stroke-width: 2px;
  stroke-opacity: 1;
}

JavaScript

function draw(target, knodes, linx){
console.log(target, knodes, linx, "in draw func");

var color = d3.scale.category10().domain(d3.range(20));
var width = 240,
    height = 400,
    innerRadius = 20,
    outerRadius = 520,
    majorAngle = 2 * Math.PI / 3,
    minorAngle = 1 * Math.PI / 12;
    
var angle = d3.scale.ordinal()
     .range([ 270,300,330, 0,30,60,90,120,150,180,210,240]);
     //.range([  270,315,0, 45, 90, 135, 180, 225]);
     
     
var radius = d3.scale.linear()
    .range([innerRadius, outerRadius]);
    
var svg = d3.select(target).append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
    
svg.selectAll(".axis")
    .data(d3.range(13))
  .enter().append("line")
    .attr("class", "axis")
   // .attr("transform", function(d) { return "rotate(" + degrees(angle(d)) + ")"; }) 
    .attr("transform", function(d) { return "rotate(" + angle(d) + ")"; })
    .attr("x1", radius.range()[0])
    .attr("x2", radius.range()[1]);  
    
    svg.append("g")
      .attr("class", "nodes")
     .selectAll(".node")
    .data(knodes)
  .enter().append("circle")
    .attr("class", "node")
    .attr("class", function(d) {  return d.Class})
  //.attr("transform", function(d) { return "rotate(" + degrees(angle(d.X)) + ")"; })
  .attr("transform", function(d) { return "rotate(" + angle(d.X) + ")"; })
    .attr("cx", function(d) { return radius(d.Y); })
    .attr("r", 2)
    .style("fill", function(d) { return color(0); });
 
 svg.selectAll(".link")
    .data(linx)
  .enter().append("path")
    .attr("class", "link")
    .attr("class", function(d) {  return "link " + d.Class})
    .attr("d", link()
    	.angle(function(d) { return (angle(d.X) + 90) * Math.PI / 180; })
    	.radius(function(d) { return radius(d.Y); }));


}






var nodes = [];
var links = [];


function createTwoNodesAndOneLink(){

var node1 = {Class: "node1",
Cx: 0,
Cy: 0,
Cz: 0,
K: 0,
L: 1,
X:...