Perception of Movement

Adapted from /mbostock/2647924, to show one single moving dot

<!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>

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 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>

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

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