JSFiddle - React, Tailwind, and code Playground

by navinleon

HTML

<script src="https://gist.githubusercontent.com/navinleon/c9456cf7049e45036938856ba7183c6d/raw/51c94466817a0967722c478a563c0da77939f7b9/db.json"></script>
Started At:<div id="start"></div><br>
Ended At: <div id="end"></div>

JavaScript

var apiurl = "https://gist.githubusercontent.com/navinleon/c9456cf7049e45036938856ba7183c6d/raw/51c94466817a0967722c478a563c0da77939f7b9/db.json";
var simulation;
d3.json(apiurl, function(error, graph) {
var clusters = graph;//JSON.parse(graph);
	document.getElementById('start').innerHTML = (new Date()).toString();
  console.log((new Date()).toString())
	simulation = d3.forceSimulation(clusters);
  simulation
    .force('x', d3.forceX(500))
    .force('y', d3.forceY(500))
  simulation.force('charge', d3.forceManyBody().strength(-70))
  simulation.force("attraceForce", d3.forceManyBody().strength(-100));
  simulation
    .force("collide", d3.forceCollide(function (d) {
    return d.size + ((d.fx) ? 0 : 30)
  }))

  simulation.stop();
  for (var i = 0; i < 300; ++i) simulation.tick();
  	document.getElementById('end').innerHTML = (new Date()).toString();
    console.log((new Date()).toString())
});