Force Layout - faster final arrangement

In a previous block, I was not interesting in viewing the live arrangement of the Force Layout, because (even if it is beautifull and amazing) it takes some times to have the final arrangement.

Hence, this block (hummm ... the last lines of the code of this block) explains :

how you can use the D3's Force Layout to compute the final arrangement,
how you can omit the live arrangement, and display only the final arrangement
having all these things in less time that it takes to write it

Acknowledgments to:

D3.js (v3.5.5)
blockbuilder.org
dat.gui
This block is a continuation of a previous one

forked from Kcnarf's block: Force Layout - faster final arrangement

<!DOCTYPE html>
<meta charset="utf-8">
<style>

circle {
  stroke-width: 1.5px;
}

line {
  stroke: #999;
}

</style>
<body>
	<script src="//d3js.org/d3.v3.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5.1/dat.gui.min.js"></script>
  <script>
    var width = 960,
        height = 500,
        radius = 4
        csvData = [],
        config = {
          manyPoints: false
        };
		
    insertControls();
    
    var fill = d3.scale.linear().domain([1,150]).range(['lightgreen', 'pink']);

var force = d3.layout.force()
        .gravity(0.2)
        .charge(-(radius*radius-radius))
        .size([width, height])
        .friction(0.7)

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

svg.append("line")
        .attr({x1: 0, y1: height/2, x2: width, y2: height/2})
        .style("stroke", "lightgrey");

function dottype(d) {
        d.stem = d.stem;
        d.rank = +d.rank;
        d.trend = +d.trend;
        d.originalX = width/2+d.trend*6000;
        d.x = d.originalX;
        d.y = height/2;
        csvData.push(d);
        return d;
      }

d3.csv("data.csv", dottype, function(error, foo) {
      if (error) throw error;
      
      draw();
    });
    
    function draw() {
      var data = copyData(csvData);
      if (config.manyPoints) { data = quadruple(data); }
			
      svg.selectAll("circle").remove();
      var node = svg.selectAll("circle")
          .data(data)
        .enter().append("circle")
          .attr("r", radius - .75)
          .attr("cx", function(d) { return d.x; })
          .attr("cy", height/2)
          .style("fill", function(d) { return fill(d.rank); })
          .style("stroke", function(d) { return d3.rgb(fill(d.rank)).darker(); })
          .style("opacity", 0)
          //.call(force.drag) don't need drag behaviour
          .on("mouseenter", function(d) {
            stem.text(d.stem);
            rank.text(d.rank);
            value.text(d.trend);
            tooltip.transition().duration(0).style("opacity", 1); // remove fade out transition on mouseleave
            })
            .on("mouseleave", function(d) {
              tooltip.transition().duration(1000).style("opacity", 0);
            });

var iterations=0;
      var startTime = Date.now();

force
        .nodes(data)
        .on("tick", tick)
        .on("end", function() {
          console.log("iterations: "+iterations);
          console.log("time: "+(Date.now()-startTime));
        });

// Use the d3's Force Layout to compute final position of nodes:
      //   usually, after calling force.start(), an internal Timer calls each 'tick()'; this Timer lets enought time for the tick() function to redraw each node's position; the drawback is that it takes some time (~5s) to have the final arrangement
      //   Instead, we explicitly call the tick() function (and no longer rely on the Timer); the tick() function no longer updates each node's position at each tick; this will be done once, when the force layout ends

force.stop().start();
      for (var i = 0; i < 20; ++i) force.tick();
      force.stop();
      function tick() {
        iterations++;
        node.each(function(d){d.x = d.originalX; }) //constrains/fixes x-position

// The code below is no longer used
        /*
        node.attr("cx", function(d) {return d.x = Math.max(radius, Math.min(width - radius, d.x)); })
        .attr("cy", function(d) {return d.y = Math.max(radius, Math.min(height - radius, d.y)); });
        */
      }

//Now that we know the final position of each node, we can update each node's position in any way we want
      node.transition()
          .delay(function(d,i) {return 2*i})
          .style("opacity", 1)
          .attr("cx", function(d) {return d.x = Math.max(radius, Math.min(width - radius, d.x)); })
          .attr("cy", function(d) {return d.y = Math.max(radius, Math.min(height - radius, d.y)); });
    };
    
    function copyData(data) {
      return data.map(function(d) {
        return {
          id: d.id,
          stem: d.stem,
          rank: d.rank,
          trend: d.trend,
          originalX: d.originalX,
          x: d.originalX,
          y: d.y
        }
      });
    };

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

https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5.1/dat.gui.min.js