JSFiddle - React, Tailwind, and code Playground

by Musakkhir Sayyed

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<script src="http://d3js.org/d3.v3.js"></script>

<svg id='network'>
</svg>
<h3> Link threshold 0 <input type="range" id="thersholdSlider" name="points" value ="0" min="0" max="10" onchange="threshold(this.value)" /> 10 </h3>
  <h3> Collide  <input type="range"  id="thersholdCollide" name="points" value="0" min="0" max="3" step="0.3" onchange="tick"> <span id="Collide-length"></span> </h3>
  <div class="ui-widget">
    <input id="search">
    <button type="button" onclick="searchNode()">Search</button>
</div>

CSS

h3 {
    color: #1ABC9C;
    text-align:center;  
    font-style: italic;
    font-size: 14px;
    font-family: "Helvetica";
}
body {
    background-color: #FFF;   
}

text {
  fill: #000;
  font: 10px sans-serif;
  pointer-events: none;
}

circle {
  fill: #ccc;
  stroke: #fff;
  stroke-width: 1.5px;
}

#network {
    min-height:500px;
    position:absolute;
    margin:auto;
    top: 0; left: 0; bottom: 0; right: 0;
    float:left;
}

#network rect:hover{
	fill: black;
}
    
.link {
  stroke: #999;
  stroke-opacity: .6;
  stroke-width: 1.5px;
}

JavaScript

// note that nodes must be listed in id order corresponding to links
// so first node corresponds to 0, second to 1, etc.
var nodes = [
    {node_name:'Webmetro.com', name:'Webmetro', group:3, value:6, "type": "circle"}
    ,{node_name:'SeoSearch.com', name:'SEO Search', group:1, value:9, "type": "diamond"}
    ,{node_name:'top100seo.com', name:'Top 100 SEO', group:1, value:1, "type": "diamond"}
    ,{node_name:'AllLinks.com', name:'All Links', group:1, value:16, "type": "diamond"}
	,{node_name:'Webmetro.com_Career', name:'Webmetro Career', group:8, value:5, "type": "circle"}
    ,{node_name:'100SeoSearch.com', name:'100 SEO Search', group:1, value:11, "type": "diamond"}
];

var links = [
    {source:0, target:1, Authority:6}
    ,{source:0, target:2, Authority:9}
    ,{source:0, target:3, Authority:1}
	,{source:4, target:5, Authority:6}
	,{source:4, target:1, Authority:6}
	,{source:4, target:2, Authority:6}
	,{source:4, target:3, Authority:6}	
];

 radius = d3.scale.log().domain([0, 312000]).range(["10", "50"]);
// dimensions of plot
var width = 800,
    height = 500;
//var width = pageWidth() - 10,
//	height = pageHeight() - 10;
// Colour scheme for nodes by cause of death
var color = d3.scale.category10().domain(['8','1','2','3','4','5','6','7','0']);  

var grayscale = d3.scale.linear()  
    .domain([0, 10])
    .range(["white", "black"]);

// opacityscale = scale min-max link values between 0 and 1
var opacityscale = d3.scale.linear()
    .domain([d3.min(links, function(d) { return d.value; }),
             d3.max(links, function(d) { return d.value; })])
    .range([0.2,1]);

// for scaling node sizes based on # of murders
var hitsscale = d3.scale.linear()
    .domain([d3.min(nodes, function(d) { return d.value; }),
             d3.max(nodes, function(d) { return d.value; })])
    .range([5,10]);


//// create network plot ////
var force = d3.layout.force()
    .nodes(d3.values(nodes)) 
    .links(links)
    .size([width, height])
    .linkDistance(300)...