Deferred Queue Force Simulation with Tooltips

This is a basic implementation of D3's force layout, a.k.a. d3-force, in version 4.

For more information on the various forces available in D3 v4, see Steve Haroz's d3-force testing ground.

forked from HarryStevens's block: Force Simulation

<html>
  <head>
    <style>
      .node circle {
        stroke: #3a403d;
        stroke-width: .5px;
      }
      div.tooltip {   
        position: absolute;           
        text-align: center;               
        padding: 2px;             
        font: 12px sans-serif;        
        background: lightsteelblue;   
        border: 0px;      
        border-radius: 8px;           
        pointer-events: none;         
     }
    </style>
  </head>
  <body>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script>
    var width = window.innerWidth, height = window.innerHeight, sizeDivisor = 100, nodePadding = 2.5;

var svg = d3.select("body")
        .append("svg")
        .attr("width", width)
        .attr("height", height);
    
     //create a tooltip
    var div = d3.select("body")
        .append("div")   
        .attr("class", "tooltip")               
        .style("opacity", 0);

var color = d3.scaleOrdinal(["#66c2a5", "#fc8d62", "#8da0cb", "#e78ac3", "#a6d854", "#ffd92f", "#e5c494", "#b3b3b3"]);

var simulation = d3.forceSimulation()
        .force("forceX", d3.forceX().strength(.1).x(width * .5))
        .force("forceY", d3.forceY().strength(.1).y(height * .5))
        .force("center", d3.forceCenter().x(width * .5).y(height * .5))
        .force("charge", d3.forceManyBody().strength(-15));

// create tooltips to store the random git search results
       // because this doesn't match up to the number of nodes,
       function createTooltip(i){
         if (searchResults === undefined) { return; }
        
         var sr = searchResults.items[i];
         if (sr === undefined) {
           sr = searchResults.items[0];
         }
         
         div.transition()        
            .duration(200)      
            .style("opacity", .9);
         
         div.html("<table><tr><td>" + sr.name + "</td></tr><tr><td>" + sr.url + "</td></tr><tr><td>" + sr.description + "</td></tr></table>")
           .style("left", (d3.event.pageX) + "px")     
           .style("top", (d3.event.pageY - 28) + "px");  
       } // end createTooltip
       
      //update the simulation based on the data
      simulation
          .nodes(graph)
          .force("collide", d3.forceCollide()
                                .strength(.5)
                                .radius(function(d){ 
                                    return d.radius + nodePadding; 
                                })
                                .iterations(1))
          .on("tick", function(d){
            node
                .attr("cx", function(d){ return d.x; })
                .attr("cy", function(d){ return d.y; })
          });

function dragstarted(d) {
      if (!d3.event.active) simulation.alphaTarget(.03).restart();
      d.fx = d.x;
      d.fy = d.y;
    }

function dragged(d) {
      d.fx = d3.event.x;
      d.fy = d3.event.y;
    }

function dragended(d) {
      if (!d3.event.active) simulation.alphaTarget(.03);
      d.fx = null;
      d.fy = null;
    }

function types(d){
      d.gdp = +d.gdp;
      d.size = +d.gdp / sizeDivisor;
      d.size < 3 ? d.radius = 3 : d.radius = d.size;
      return d;
    }
    </script>
  </body>
</html>

https://d3js.org/d3.v4.min.js