JSFiddle - React, Tailwind, and code Playground

by Musakkhir Sayyed

HTML

<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

<body></body>

CSS

.node {
  cursor: pointer;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 300;
}
.node .text {
  fill: white;
  font-size: 8px;
}
.ORG .circle {
  fill: #1d3649;
}
.EMR .circle {
  fill: #B2D0F5;
  stroke: #5596e6;
  stroke-dasharray: 3px, 3px;
  opacity: .5;
}
.EMR .circle:hover {
  fill: #5596e6;
}
.link {
  fill: none;
  stroke: #eee;
  stroke-width: 1.5px;
  font: 10px sans-serif;
}
.link.active {
  stroke: #ddd;
  stroke-width: 2;
}
.arrow {
  fill: #666;
}
.arrow.active {
  stroke-width: 0 !important;
}

JavaScript

var dataset = {
  "nodes": [{
    "id": 223,
    "type": "Parent",
    "properties": {

    }
  }, {
    "id": 136525,
    "type": "Child",
    "properties": {
      "patient": "6090",
      "batch": "70"
    }
  }, {
    "id": 136448,
    "type": "Child",
    "properties": {
      "patient": "6094",
      "batch": "70"
    }
  }, {
    "id": 136328,
    "type": "Child",
    "properties": {
      "patient": "6082",
      "batch": "70"
    }
  }, {
    "id": 136305,
    "type": "Child",
    "properties": {
      "patient": "6096",
      "batch": "70"
    }
  }, {
    "id": 136303,
    "type": "Child",
    "properties": {
      "patient": "6093",
      "batch": "70"
    }
  }, {
    "id": 136299,
    "type": "Child",
    "properties": {
      "patient": "6091",
      "batch": "70"
    }
  }, {
    "id": 136261,
    "type": "Child",
    "properties": {
      "patient": "6089",
      "batch": "70"
    }
  }, {
    "id": 136212,
    "type": "Child",
    "properties": {
      "patient": "6087",
      "batch": "70"
    }
  }, {
    "id": 136115,
    "type": "Child",
    "properties": {
      "patient": "6078",
      "batch": "70"
    }
  }, {
    "id": 136113,
    "type": "Child",
    "properties": {
      "patient": "6088",
      "batch": "70"
    }
  }, {
    "id": 135843,
    "type": "Child",
    "properties": {
      "patient": "6072",
      "batch": "70"
    }
  }, {
    "id": 555,
    "type": "Grandchild",
    "properties": {

    }
  }],
  "edges": [{
    "id": 0,
    "from": 136113,
    "to": 555,
    "properties": {

    }
  }, {
    "id": 0,
    "from": 136525,
    "to": 555,
    "properties": {

    }
  }, {
    "id": 0,
    "from": 223,
    "to": 136525,
    "properties": {

    }
  }, {
    "id": 0,
    "from": 223,
    "to": 136448,
    "properties": {

    }
  }, {
    "id": 0,
    "from": 223,
    "to": 136328,
    "properties": {

    }
  }, {
    "id": 0,
    "from": 223,
    "to": 136305,
    "properties": {

    }
  }, {
    "id": 0,
    "from":...