JSFiddle - React, Tailwind, and code Playground

by Azounet

HTML

<!DOCTYPE html>
<title></title>
<body>
<!-- <div class="container"></div> -->
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var root = {
 "name": "name",
 "children": [
  {
   "name": "E-name",
   "children": [
    {
     "name": "name",
     "children": [
      {"name": "name", "size": 100, "type": "Personalities"},
      {"name": "name", "size": 100, "type": "Personalities"}
     ]
    },
    {
     "name": "name",
     "children": [
      {"name": "name", "size": 50, "type": "Personalities"},
      {"name": "name", "size": 50, "type": "Personalities"},
      {"name": "name", "size": 1000, "type": "Personalities"},
      {"name": "name", "size": 100, "type": "Personalities"},
      {"name": "name", "size": 100, "type": "Personalities"},
      {"name": "name", "size": 100, "type": "Personalities"},
      {"name": "name", "size": 100, "type": "Personalities"}
     ]
    },
    {
     "name": "name",
     "children": [
      {"name": "name", "size": 50, "type": "Personalities"},
      {"name": "name", "size": 50, "type": "Personalities"},
      {"name": "name", "size": 1000, "type": "Personalities"},
      {"name": "name", "size": 100, "type": "Personalities"},
      {"name": "name", "size": 100, "type": "Personalities"},
      {"name": "name", "size": 100, "type": "Personalities"},
      {"name": "name", "size": 100, "type": "Personalities"}
     ]
    },
    {
     "name": "name",
     "children": [
      {"name": "Name", "size": 100, "type": "Political"}
     ]
    }
   ]
  },
  {
   "name": "Camp 2",
   "children": [
    {
     "name": "Name",
     "children": [
      {"name": "Name", "size": 100, "type": "Security"}
     ]
    },
    {
     "name": "Name",
     "children": [
      {"name": "Name", "size": 100, "type": "Security"}
     ]
    },
    {
     "name": "Name",
     "children": [
      {"name": "Name", "size": 100, "type": "Security"}
     ]
    }
   ]
  },
  {
   "name": "Camp 3",
   "children": [
    {
     "name": "Name",
    ...

CSS

.node {
  cursor: pointer;
}

.node:hover {
  fill: #FF474A;
  stroke: #000;
  stroke-width: 1.5px;
}

.node--leaf {
  fill: red;
  opacity: 0.01;
}

.label {
  font: 28px "PT Sans", Helvetica, Arial, sans-serif;
  text-anchor: middle;
  text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
}

.label,
.node--root,
.node--leaf {
  pointer-events: none;
}