JSFiddle - React, Tailwind, and code Playground

by Dmitry Ieremenko

HTML

<!doctype html>
<meta charset="utf-8">
<style type="text/css">
   text {
      font: 10pt sans-serif;
      -webkit-user-select: none;
      -moz-user-select: none;
      user-select: none;
   }
   .link {
      stroke: black;
      stroke-width: 1px;
      opacity: 0.25;
   }
   .link-label {
      opacity: 0.5;
   }
   .node {
      cursor: pointer;
   }
</style>

<svg class="network" width="960" height="500"></svg>

<script src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript">

	const links = [
   {
      "source":"fgf",
      "label":"mediated",
      "target":"sulf1 regulation"
   },
   {
      "source":"sulf1",
      "label":"inhibit",
      "target":"fgf activity"
   },
   {
      "source":"fgf4",
      "label":"inhibited",
      "target":"mesodermal apoptosis"
   },
   {
      "source":"sulf1a",
      "label":"enhances",
      "target":"wnt signalling,"
   },
   {
      "source":"sulf1b",
      "label":"inhibits",
      "target":"wnt signalling"
   },
   {
      "source":"sulf1b",
      "label":"promotes",
      "target":"angiogenesis"
   },
   {
      "source":"qsulf1",
      "label":"is",
      "target":"protein"
   },
   {
      "source":"enzyme",
      "label":"modulates",
      "target":"sulfation state"
   },
   {
      "source":"enzymes",
      "label":"regulate",
      "target":"activities"
   },
   {
      "source":"enzymes",
      "label":"follow",
      "target":"and"
   },
   {
      "source":"sulf1",
      "label":"plays",
      "target":"key role"
   },
   {
      "source":"sulf1",
      "label":"inhibits",
      "target":"co-receptor function"
   },
   {
      "source":"sulf1",
      "label":"promotes",
      "target":"drug-induced apoptosis"
   },
   {
      "source":"sulf1",
      "label":"inhibits",
      "target":"and"
   },
   {
      "source":"sulf1",
      "label":"seems",
      "target":"be"
   },
   {
      "source":"sulf1",
      "label":"be",
      "target":"essential"
   }
];

const nodes = {
   "fgf":{
  ...