JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//d3js.org/d3.v3.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;
}

.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"
    }
  }],
  "edges": [{
    "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": 223,
    "to": 136303,
    "properties": {

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

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

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