tomshanley/index.html

## readme.md

      
    Raw
  

              readme.md
            
          
    Adapted from http://bl.ocks.org/mbostock/2647924, to show one single moving dot

  
## index.html
<!DOCTYPE html>

<html>
<head>
<title>Movement</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link type="text/css" rel="stylesheet" href="css/style.css">

</head>
<body>
    <h1>Perception of movement</h1>

	<div id='circles'></div>


<script src="http://d3js.org/d3.v3.min.js"></script>

<script>

var w = 1200,
    h = 500;

var svg = d3.select("#circles").append("svg:svg")
    .attr("width", w)
    .attr("height", h);

//d3.select("h1").on("click", startCircles);

var circle = svg.selectAll("circle")
    .data(d3.range(50).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)
	.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; });

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


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


	d3.timer(function() {

	  // Update the FPS meter.
	  var now = Date.now(), duration = now - start;

	  if (duration >= 1000) frames = 0, start = now;

	  // Update the circle positions.
	  moving
		  .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; });

	});


</script>

</body>
</html>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>

	<html>
	<head>
	<title>Movement</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<link type="text/css" rel="stylesheet" href="css/style.css">

	</head>
	<body>
	<h1>Perception of movement</h1>

	<div id='circles'></div>



	<script src="http://d3js.org/d3.v3.min.js"></script>

	<script>

	var w = 1200,
	h = 500;

	var svg = d3.select("#circles").append("svg:svg")
	.attr("width", w)
	.attr("height", h);

	//d3.select("h1").on("click", startCircles);

	var circle = svg.selectAll("circle")
	.data(d3.range(50).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)
	.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; });

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



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



	d3.timer(function() {

	// Update the FPS meter.
	var now = Date.now(), duration = now - start;

	if (duration >= 1000) frames = 0, start = now;

	// Update the circle positions.
	moving
	.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; });

	});



	</script>

	</body>
	</html>