Moving Circles

This Moving Circles example shows a thousand black circles moving in random direction at a constant speed. Even though the SVG circle elements are not stationary, VisDock selection tools allow users to query them and observe the motion of the queried circles in a flight of time. The mechanism is simple: once VisDock creates a layer for a selected circle, the layer stays on top of the circle by implement a few more lines of code. The original example was built with D3.js (found here) by M. Bostock. For more information about VisDock, please cick on the link.

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
  </head>
  <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 type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@2.5.1/d3.js"></script>
<script type="text/javascript">

VisDock.init("body", {width: 1000, height: 700});
var viewport = VisDock.getViewport();
var w = 960,
    h = 500;

var svg = viewport;
var circle = svg.selectAll("circle")
    .data(d3.range(1000).map(function() {
      return {
        x: w * Math.random(),
        y: h * Math.random(),
        dx: Math.random() - .5,
        dy: Math.random() - .5
      };
    }))
  .enter().append("svg:circle")
    .attr("r", 2.5);

var text = svg.append("svg:text")
    .attr("x", 20)
    .attr("y", 20);

var start = Date.now(),
    frames = 0;

d3.timer(function() {
  VisDock.startChrome();
  // Update the FPS meter.
  var now = Date.now(), duration = now - start;
  text.text(~~(++frames * 1000 / duration));
  if (duration >= 1000) frames = 0, start = now;

// Update the circle positions.
  circle
      .attr("cx", function(d) { d.x += d.dx; if (d.x > w) d.x -= w; else if (d.x < 0) d.x += w; return d.x; })
      .attr("cy", function(d) { d.y += d.dy; if (d.y > h) d.y -= h; else if (d.y < 0) d.y += h; return d.y; });
  if (d3.selectAll(".VisDockEllipseLayer")[0].length > 0){ 
  d3.selectAll(".VisDockEllipseLayer")
      .attr("cx", function(d) {
      	 d.x += d.dx; if (d.x > w) d.x -= w; else if (d.x < 0) d.x += w; return d.x; })
      .attr("cy", function(d) {
      	 d.y += d.dy; if (d.y > h) d.y -= h; else if (d.y < 0) d.y += h; return d.y; });

}
  VisDock.finishChrome();
});

VisDock.eventHandler = {
		getHitsPolygon : function(points, inclusive) {
			var shapebound = new createPolygon(points);
			return shapebound.intersectEllipse(d3.selectAll("circle")[0], inclusive)
		},
		getHitsEllipse : function(points, inclusive) {
			var shapebound = new createEllipse(points);
			return shapebound.intersectEllipse(d3.selectAll("circle")[0], inclusive)						
		},
		getHitsLine : function(points, inclusive) {
			var shapebound = new createLine(points);
			return shapebound.intersectEllipse(d3.selectAll("circle")[0], inclusive)
		},
		setColor : function(hits) {
			var circleObjects = d3.selectAll("circle")[0];
			for (var i = 0; i < hits.length; i++) {
				VisDock.utils.addEllipseLayer(hits[i], null, num - 1);
				var l = d3.selectAll(".VisDockEllipseLayer")[0].length;
				d3.selectAll(".VisDockEllipseLayer")[0][l-1].__data__
					 = hits[i].__data__; 
			}
		},
		changeColor : function(color, query, index) {
			VisDock.utils.changeQueryColor(index, color)
			var visibility = VisDock.utils.getQueryVisibility(index);
			for (var i = 0; i < query.length; i++) {
				query[i].attr("style", "opacity: " + visibility + "; fill: " + color)
			}
		},
		changeVisibility : function(vis, query, index) {
			var color = VisDock.utils.getQueryColor(index);
			for (var i = 0; i < query.length; i++) {
				query[i].attr("style", "opacity: " + vis + "; fill: " + color)
			}
		},
		removeColor : function(hits, index) {
			for (var i = 0; i < hits.length; i++) {
				hits[i].remove();
			}
		},
	}
BirdView.init(viewport, 1000, 700)
d3.select(self.frameElement).style("width", "1000px")
d3.select(self.frameElement).style("height", "700px")
    </script>
  </body>
</html>

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

Modified http://mbostock.github.com/d3/d3.js?2.5.0 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

https://mbostock.github.com/d3/d3.js?2.5.0