VisDockHub/README.md

## README.md

      
    Raw
  

              README.md
            
          
    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.

  
## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
  </head>
  <body>
<link href="http://rawgithub.com/VisDockHub/NewVisDock/master/master/visdock.css" rel="stylesheet" type="text/css"/>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://rawgithub.com/VisDockHub/NewVisDock/master/master/visdock.js"></script>
<script src="http://rawgithub.com/VisDockHub/NewVisDock/master/master/2D.js"></script>
<script src="http://rawgithub.com/VisDockHub/NewVisDock/master/master/IntersectionUtilities.js"></script>
<script src="http://rawgithub.com/VisDockHub/NewVisDock/master/master/visdock.utils.js"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.5.0"></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>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	</head>
	<body>
	<link href="http://rawgithub.com/VisDockHub/NewVisDock/master/master/visdock.css" rel="stylesheet" type="text/css"/>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://rawgithub.com/VisDockHub/NewVisDock/master/master/visdock.js"></script>
	<script src="http://rawgithub.com/VisDockHub/NewVisDock/master/master/2D.js"></script>
	<script src="http://rawgithub.com/VisDockHub/NewVisDock/master/master/IntersectionUtilities.js"></script>
	<script src="http://rawgithub.com/VisDockHub/NewVisDock/master/master/visdock.utils.js"></script>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.5.0"></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>
No results found