D3 Examples - Spermatozoa before VisDock integration

xxxxxxxxxx
 
<!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 spermatozoa = d3.range(n).map(function() {
  var x = Math.random() * width,
      y = Math.random() * height;
  return {
    vx: Math.random() * 2 - 1,
    vy: Math.random() * 2 - 1,
    path: d3.range(m).map(function() { return [x, y]; }),
    count: 0
  };
});
​
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>
    