Spermatozoa before VisDock integration

Spermatozoa is an example before VisDock integration. Originally built by Michael Bostock, the example shows objects moving in random directions with random velocities.

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

ellipse {
  fill: #000;
}

path {
  fill: none;
  stroke: black;
  stroke-linecap: round;
}

.mid {
  stroke-width: 4px;
}

.tail {
  stroke-width: 2px;
}

</style>
<body>
<link href="https://rawgithub.com/VisDockHub/NewVisDock/master/master/visdock.css" rel="stylesheet" type="text/css"/>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://rawgithub.com/visdockhub/newvisdock/master/master/visdock.js"></script>
<script src="https://rawgithub.com/visdockhub/newvisdock/master/master/2d.js"></script>
<script src="https://rawgithub.com/visdockhub/newvisdock/master/master/intersectionutilities.js"></script>
<script src="https://rawgithub.com/visdockhub/newvisdock/master/master/visdock.utils.js"></script>
<script>

var width = 960,
    height = 500;

//VisDock.init("body", {width: 1000, height: 700});
//var viewport = VisDock.getViewport();
AnnotatedByData.layerTypes = ["ellipse"];
var n = 100,
    m = 12,
    degrees = 180 / Math.PI;

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
var g = svg.selectAll("g")
    .data(spermatozoa)
  .enter().append("g");

var head = g.append("ellipse")
    .attr("rx", 6.5)
    .attr("ry", 4);

g.append("path")
    .datum(function(d) { return d.path.slice(0, 3); })
    .attr("class", "mid");

var id = 0;
g.append("path")
    .datum(function(d) { return d.path; })
    .attr("class", "tail")
    .attr("id", function(){
    	return id++;
    });

var tail = g.selectAll("path");

d3.timer(function() {
  //VisDock.startChrome();
  for (var i = -1; ++i < n;) {
    var spermatozoon = spermatozoa[i],
        path = spermatozoon.path,
        dx = spermatozoon.vx,
        dy = spermatozoon.vy,
        x = path[0][0] += dx,
        y = path[0][1] += dy,
        speed = Math.sqrt(dx * dx + dy * dy),
        count = speed * 10,
        k1 = -5 - speed / 3;

// Bounce off the walls.
    if (x < 0 || x > width) spermatozoon.vx *= -1;
    if (y < 0 || y > height) spermatozoon.vy *= -1;

// Swim!
    for (var j = 0; ++j < m;) {
      var vx = x - path[j][0],
          vy = y - path[j][1],
          k2 = Math.sin(((spermatozoon.count += count) + j * 3) / 300) / speed;
      path[j][0] = (x += dx / speed * k1) - dy * k2;
      path[j][1] = (y += dy / speed * k1) + dx * k2;
      speed = Math.sqrt((dx = vx) * dx + (dy = vy) * dy);
    }
  }

head.attr("transform", headTransform);
  tail.attr("d", tailPath);
  //VisDock.updateLayers();
  //AnnotatedByData.update();
  //VisDock.finishChrome();
});

function headTransform(d) {
  return "translate(" + d.path[0] + ")rotate(" + Math.atan2(d.vy, d.vx) * degrees + ")";
}

function tailPath(d) {
  return "M" + d.join("L");
}

VisDock.eventHandler = {
	getHitsPolygon : function(points, inclusive) {
		var shapebound = new createPolygon(points);
		return shapebound.intersectPath(d3.selectAll(".tail")[0], inclusive)
	},
	getHitsLine : function(points, inclusive) {
		var shapebound = new createLine(points);
		return shapebound.intersectPath(d3.selectAll(".tail")[0], inclusive)
	},
	getHitsEllipse : function(points, inclusive) {
		var shapebound = new createEllipse(points);
		return shapebound.intersectPath(d3.selectAll(".tail")[0], inclusive)
	},
	setColor : function(hits) {
		for (var i = 0; i < hits.length; i++) {
			VisDock.utils.addPathLayer(hits[i], "fill: none; stroke: " + VisDock.color[num - 1] + "; opacity: 1; pointer-events: none", num - 1);
		}
	},
	changeColor : function(color, query, index) {
		for (var i = 0; i < query.length; i++) {
			var vis = query[i].attr("style").split("opacity: ")[1].split(";")[0]
			query[i][0][0].setAttributeNS(null, "style", "stroke: " + color + "; fill:none; opacity: " + vis)
		}
	},
	changeVisibility : function(vis, query, index) {
		for (var i = 0; i < query.length; i++) {
			var color = query[i].attr("style").split("stroke: ")[1].split(";")[0]
			query[i][0][0].setAttributeNS(null, "style", "fill: " + color + "; opacity: " + vis)
		}
	},
	removeColor : function(hits, index) {
		for (var i = 0; i < hits.length; i++) {
			hits[i].remove();
		}
	},
	QueryClick : function(query, index) {

}
}
//BirdView.init(viewport, 1000, 700)
d3.select(self.frameElement).style("width", "960px")
d3.select(self.frameElement).style("height", "500px")
</script>

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://rawgithub.com/VisDockHub/NewVisDock/master/master/visdock.js to a secure url

Modified http://rawgithub.com/VisDockHub/NewVisDock/master/master/2D.js to a secure url

Modified http://rawgithub.com/VisDockHub/NewVisDock/master/master/IntersectionUtilities.js to a secure url

Modified http://rawgithub.com/VisDockHub/NewVisDock/master/master/visdock.utils.js to a secure url

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

https://rawgithub.com/VisDockHub/NewVisDock/master/master/visdock.js

https://rawgithub.com/VisDockHub/NewVisDock/master/master/2D.js

https://rawgithub.com/VisDockHub/NewVisDock/master/master/IntersectionUtilities.js

https://rawgithub.com/VisDockHub/NewVisDock/master/master/visdock.utils.js