JSFiddle - React, Tailwind, and code Playground

by ajaisle

HTML

<!DOCTYPE html>
<title>Molecule test</title>
<!-- based on http://bl.ocks.org/mbostock/3037015 -->

<body>
    <script src="//d3js.org/d3.v3.min.js"></script>
</body>

CSS

.link line {
  stroke: #696969;
}



path.link {
  fill: none;
  stroke: #666;
  stroke-width: 1px;
}



.link line.separator {
  stroke: #fff;
  stroke-width: 2px;
}

.node circle {
  stroke: #ffffff;
  stroke-width: 1px;
}

.node circle:hover 
{stroke: #ccc;
stroke-width: 1px;
  opacity: 1.0;
    }

.node text {
  font: 10px sans-serif;
  pointer-events: none;

}




.infobox rect{  
    opacity: .5;
    fill: #F8D9D9;
    stroke: #815959;
    stroke-width: 0.25px;
}

.infobox text{  
    color: #000000;
    background-color: lightblue;
    font-size:20px;
}

.infobox a{  
    color: #000000;
    background-color: lightblue;
    font-size:20px;
}

JavaScript

var data = {
  "nodes": [
    {"atom": "Alyssa", "size": 45, "name":"ios"}, 
    {"atom": "Research", "size": 27, "name":"ios"},
    {"atom": "Design", "size": 34, "name":"ios"},
    {"atom": "Contact", "size": 30, "name":"ios"},
    {"atom": "Design1", "size": 25, "name":"ios"},
    {"atom": "Design2", "size": 22, "name":"ios"},
    {"atom": "Design3", "size": 20, "name":"ios"},
    {"atom": "Research1", "size": 19, "name":"ios"},
    {"atom": "Research2", "size": 25, "name":"ios"},
    {"atom": "Research3", "size": 23, "name":"ios"},
    {"atom": "Contact1", "size": 20, "name":"ios"},
    {"atom": "Contact2", "size": 21, "name":"ios"},
    {"atom": "Contact3", "size": 23, "name":"ios"}

  ],
  
  "links": [
    {"source": 0, "target": 1,  "bond": 1},
    {"source": 0, "target": 2,  "bond": 1},
    {"source": 0, "target": 3,  "bond": 1},
    {"source": 1, "target": 4,  "bond": 1},
    {"source": 1, "target": 5,  "bond": 1},
    {"source": 1, "target": 6,  "bond": 1},
    {"source": 2, "target": 7, "bond": 1},
    {"source": 2, "target": 8, "bond": 1},
    {"source": 2, "target": 9,  "bond": 1},
    {"source": 3, "target": 10,  "bond": 1},
    {"source": 3, "target": 11,  "bond": 1},
    {"source": 3, "target": 12, "bond": 1}
  ]
};

var width = 960,
    height = 500;
 var margin = 20;
var pad = margin / 2;
var color = d3.scale.category20();
var radius = d3.scale.sqrt()
    				.range([0, 6]);
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);	
    
    
    
  var plot = svg.append("g")
        .attr("id", "plot")
        .attr("transform", "translate(" + pad + ", " + pad + ")");
        
 
    
var force = d3.layout.force()
    .size([width, height])
    .charge(-800)
    .friction(0.45)
    .linkStrength(1)
    .gravity(0)
    .linkDistance(function(d) { 
        //return radius(d.source.size) + radius(d.target.size) + 20;
        console.log(d.source.atom +"--"+ d.target.atom +" : "+ 		      ...