Custom Beeswarm & ForceLayout

This block is a continuation of a previous one.

This sequel experiments a way to vizualise the distribution of things (whatever it is) in a horizontal way (ie. along the x-axis), where constraints/objectives are:

to maintain the exact position of each datum (represented by a circle) along the x-axis
to be able to hover each circle to show related datum

This block produces a beeswarm in 2 stages:

define a first arrangement using a custom algorythm (cf. previous block)
then, use the ForceLayout in order to group extreme accumulations, or constraint the arrangement to a certain size

The ForceLayout is used only few times (5 iterations by default) in order to handle computation time. For comparison, with 600 points:

~1200 ms <== Force only with ~300 iterations
~ 100 ms <== custom only | extreme acc., no overlap, fast
~ 150 ms <== custom (100ms) + force with 5 iterations (50ms) |some overlap, no extreme acc., fast
~ 150ms <== Force only with ~20 iterations | cons: not so beautiful, some overlap, no extreme acc., fast

Acknowledgments to:

<!DOCTYPE html>
<meta charset="utf-8">
<style>
  
  #under-construction {
    display: none;
    position: absolute;
    top: 200px;
    left: 300px;
    font-size: 40px;
  }

circle {
    stroke-width: 1.5px;
  }

line {
    stroke: #999;
  }

</style>
<body>
  <div id="under-construction">
    UNDER CONSTRUCTION
  </div>
	<script src="https://d3js.org/d3.v3.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5.1/dat.gui.min.js"></script>
  <script>
    var width = 960,
        height = 500;
    var csvData = [];
		var config = {
      radius: 4,
      use_it: true,
      iterations: 5,
      gravity: 0.4,
      manyPoints: true
    };

insertControls();
    
    var fill = d3.scale.linear().domain([1,150]).range(['lightgreen', 'pink']);

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

svg.append("line")
    	.attr("id", "x-axis")
      .attr("x1", 0)
      .attr("y1", height/2)
      .attr("x2", width)
      .attr("y2", height/2)
      .style("stroke", "lightgrey");
    
    var nodeContainer = svg.append("g").attr("id", "node-container");
		
    var informationPanel, computationTimeInfo, dataLengthInfo, posibleCollidersInfo, placementInfo, visitedCollidersInfo;
    prepareInformationPanel();
		
    var tooltip, stem, rank, value;
    prepareTooltip();
    
    var minDistanceBetweenCircles,
      minSquareDistanceBetweenCircles,
      AAD,
      totalPossibleCollders, maxPossibleColliders,
      totalTestedPlacements,
      visitedColliderCount, totalVisitedColliders, maxVisitedColliders;
    
		function initPlacement() {
      minDistanceBetweenCircles = 2*config.radius;
      minSquareDistanceBetweenCircles = Math.pow(minDistanceBetweenCircles, 2);
      AAD = []; //already arranged data; window for collision detection
      //-->for metrics purpose
      totalPossibleColliders = maxPossibleColliders = 0;
      totalTestedPlacements = 0;
      visitedColliderCount = totalVisitedColliders = maxVisitedColliders =0;
      //<--for metrics purpose
    };
    
    function findPossibleColliders (datum) {
      //remove circles from AAD that are far away from datum
      var indexesToRemove = 0;
      AAD.every(function (aad) {
        if (Math.abs(datum.x-aad.x)>minDistanceBetweenCircles) {
          indexesToRemove++;
          return true;
        }
        return false;
      });
      AAD.splice(0,indexesToRemove);
      
      //-->for metrics purpose
      totalPossibleColliders += AAD.length;
      if (AAD.length > maxPossibleColliders) {
        maxPossibleColliders = AAD.length;
      }
      //<--for metrics purpose
    }

function isBetterPlacement(datum, bestYPosition) {
      return Math.abs(datum.y) < Math.abs(bestYPosition);
    }

function yPosRelativeToAad(aad, d) {
      // handle Float approximation with +1E-6
      return Math.sqrt(minSquareDistanceBetweenCircles-Math.pow(d.x-aad.x,2))+1E-6;
    }

function placeBelow(d, aad, relativeYPos) {
      d.y = aad.y - relativeYPos;
    }

function placeAbove(d, aad, relativeYPos) {
      d.y = aad.y + relativeYPos;
    }

function areCirclesColliding(d0, d1) {
      visitedColliderCount++ //for metrics prupose
      
      //first simple check (vertical positions)
      if (Math.abs(d1.y - d0.y) > minDistanceBetweenCircles) return false;
      
      //more advanced check
      var squareDistanceBetweenCircles = Math.pow(d1.y-d0.y, 2) + Math.pow(d1.x-d0.x, 2);
      return squareDistanceBetweenCircles < minSquareDistanceBetweenCircles;
    }

function collidesWithOther (data) {
      return AAD.some(function(aad) {
        return areCirclesColliding(aad, data);
      });
    }

function tick() {
        data.forEach(function(d){ d.x = d.originalX; }) //constrains x-position
      }

force.nodes(data)
        .on("tick", tick)
        .stop();

force.start();
      for (var i = 0; i < config.iterations; i++) { force.tick(); }
      force.stop();
    }
    
    function drawBeeswarm() {
      var data = config.manyPoints? double(double(copyCsvData())) : copyCsvData();
       
      var startTime = Date.now();
      if (config.use_it) {
	      placeCircles(data);
      	//showMetrics(data, (Date.now()-startTime));
      }
      
      applyForceLayout(data);
      
      showCircles(data);
    }

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

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