JSFiddle - React, Tailwind, and code Playground

by Veerendra Singh

HTML

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

JavaScript

var graph={
  "nodes": [ 
    {"id":"n1","x": 100, "y": 321},
    {"id":"n2","x": 369, "y": 410},
    {"id":"n3","x": 342, "y": 290},
    {"id":"n4","x": 452, "y": 173},
    {"id":"n5","x": 489, "y": 278},
    {"id":"n6","x": 520, "y": 450},
    {"id":"n7","x": 650, "y": 289},
    {"id":"n8","x": 750, "y": 378},
    {"id":"n9","x": 800, "y":209},
    {"id":"n10","x": 780, "y": 106},
    {"id":"n11","x": 232, "y": 131}
  ],
  "edgeNodes": [ 
    {"id":"e1","x": 200, "y": 400},
    {"id":"e2","x": 250, "y": 250},
    {"id":"e3","x": 665, "y": 348},
    {"id":"e4","x": 444, "y": 228},
    {"id":"e5","x": 440, "y": 348},
    {"id":"e6","x": 665, "y": 188}
  ],
  "edges": [
    {"id":"n1e1","source":"n1", "target":"e1"},
    {"id":"n11e2","source":"n11", "target":"e2"},
    {"id":"n1e2","source":"n1", "target":"e2"},
    {"id":"e2n3","source":"e2", "target":"n3"},
    {"id":"n4e4","source":"n4", "target":"e4"},
    {"id":"e4n3","source":"e4", "target":"n3"},
    {"id":"e4n5","source":"e4", "target":"n5"},
    {"id":"e1n2","source":"e1", "target":"n2"},
    {"id":"n2e5","source":"n2", "target":"e5"},
    {"id":"e5n3","source":"e5", "target":"n3"},
    {"id":"e5n5","source":"e5", "target":"n5"},
    {"id":"n4e6","source":"n4", "target":"e6"},
    {"id":"n7e6","source":"n7", "target":"e6"},
    {"id":"e6n9","source":"e6", "target":"n9"},
    {"id":"e6n10","source":"e6", "target":"n10"},
    {"id":"n7e3","source":"n7", "target":"e3"},
    {"id":"n6e3","source":"n6", "target":"e3"},
    {"id":"e3n8","source":"e3", "target":"n8"}
      
    
  ]
};






	var width = 1260,
        height = 600;
    document.getElementById("graph").innerHTML='';

    var svg = d3.select("#graph").append("svg:svg")
            .attr("width", width)
            .attr("height", height)
            .attr("id", "graphsvg")
            .append("g").attr("id","hyper");

  var hyperEdges=svg.append("g").attr("id","hyperEdges");
	var reactionNodes=svg.append("g").attr("id","Nodes");


	var node =...