JSFiddle - React, Tailwind, and code Playground

by Samuel Price

HTML

<script src="https://mbostock.github.com/d3/d3.js"></script>
<script src="https://mbostock.github.com/d3/d3.layout.js"></script>
<script src="https://mbostock.github.com/d3/d3.geom.js"></script>
	<body>
  </body>

JavaScript

var w = 960, h = 500;

			var labelDistance = 0;

			var vis = d3.select("body").append("svg:svg").attr("width", w).attr("height", h);

			var nodes = [];
			var labelAnchors = [];
			var labelAnchorLinks = [];
			var links = [];
            var num_nodes = 60;
			for(var i = 0; i < num_nodes; i++) {
                var r = Math.random()*10 + 3.0
				var node = {
					label : "node " + i,
                    r : r,
                    fixed:true,
                    x:Math.random()*w,
                    y:Math.random()*h

				};
                /* Nodes */
				nodes.push(node);

                /* Ancor nodes */
				labelAnchors.push({
					node : node,
                    r: r
				});
				labelAnchors.push({
					node : node,
                    r : r
				});
			};

			for(var i = 0; i < nodes.length; i++) {
                /* Links between nodes . */
				// for(var j = 0; j < i; j++) {
				// 	if(Math.random() > .95)
				// 		links.push({
				// 			source : i,
				// 			target : j,
				// 			weight : 1 //Math.random()
				// 		});
				// }

                /* Links between ancors */
				labelAnchorLinks.push({
					source : i * 2,
					target : i * 2 + 1,
					weight : 1
				});
			};

			var force = d3.layout.force()
                .size([w, h])
                .nodes(nodes)
                .links(links)
                .gravity(0)
                .linkDistance(0)
                .charge(-3000)
                .linkStrength(function(x) {
				return x.weight * 10
			});


			force.start();

			var force2 = d3.layout.force()
            .nodes(labelAnchors).
            links(labelAnchorLinks).
            gravity([0,0]).
            linkDistance(function(x){
                return x.source.r *1.3;
            }).
            linkStrength(10).
            charge(-100).
            size([w, h]);
			force2.start();

			var link = vis.selectAll("line.link")
            .data(links).enter()
            .append("svg:line")
            .attr("class", "link")
       ...