meriororen/index.html

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<svg width="500px" height="500px"></svg>
<script>

var g = [{x:10, y:10}, {x:20, y:20}, {x:30, y:30}];
var svg = d3.select("svg");
var svgAll = svg.selectAll("circle");
var svgEnter = svgAll.data(g).enter();
var circles = svgEnter.append("circle")
               .attr("fill", function(d,i) { return "rgb("+100*i+",200,232)";})
               .attr("cx", function(d) { return d.x; })
               .attr("cy", function(d) { return d.y; })
               .attr("r", 5);

  // create lines
var l = [];
for (var i = 0; i < g.length; i++) {
   if (i+1 < g.length) l.push([g[i], g[i+1]]);
   else l.push([g[i], g[0]]);
}

var lineAll = svg.selectAll("line");

var lines = lineAll.data(l).enter().append("line");
lines.attr("x1", function(d) { return d[0].x; })
    .attr("x2", function(d) { return d[1].x; })
    .attr("y1", function(d) { return d[0].y; })
    .attr("y2", function(d) { return d[1].y; })
    .style("stroke", "#000");

function rand() {
  return Math.floor(Math.random() * 300 + 1);
};

function update() {
  // update points
    g = g.map(function(d) {
        d.x = rand();
        d.y = rand();
        return d;
    });

    l = [];
    for (var i = 0; i < g.length; i++) {
       if (i+1 < g.length) l.push([g[i], g[i+1]]);
       else l.push([g[i], g[0]]);
    }

    lines.transition().attr("transform", "translate(0,0)")
    .attr("x1", function(d) { return d[0].x; })
    .attr("x2", function(d) { return d[1].x; })
    .attr("y1", function(d) { return d[0].y; })
    .attr("y2", function(d) { return d[1].y; })
    .style("stroke", "rgb(0,200,232)");

  circles.transition()
  .attr("cx", function(d) { return d.x })
  .attr("cy", function(d) { return d.y });
};

setInterval(function() {update()}, 100);
</script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<svg width="500px" height="500px"></svg>
	<script>

	var g = [{x:10, y:10}, {x:20, y:20}, {x:30, y:30}];
	var svg = d3.select("svg");
	var svgAll = svg.selectAll("circle");
	var svgEnter = svgAll.data(g).enter();
	var circles = svgEnter.append("circle")
	.attr("fill", function(d,i) { return "rgb("+100*i+",200,232)";})
	.attr("cx", function(d) { return d.x; })
	.attr("cy", function(d) { return d.y; })
	.attr("r", 5);

	// create lines
	var l = [];
	for (var i = 0; i < g.length; i++) {
	if (i+1 < g.length) l.push([g[i], g[i+1]]);
	else l.push([g[i], g[0]]);
	}

	var lineAll = svg.selectAll("line");

	var lines = lineAll.data(l).enter().append("line");
	lines.attr("x1", function(d) { return d[0].x; })
	.attr("x2", function(d) { return d[1].x; })
	.attr("y1", function(d) { return d[0].y; })
	.attr("y2", function(d) { return d[1].y; })
	.style("stroke", "#000");

	function rand() {
	return Math.floor(Math.random() * 300 + 1);
	};

	function update() {
	// update points
	g = g.map(function(d) {
	d.x = rand();
	d.y = rand();
	return d;
	});

	l = [];
	for (var i = 0; i < g.length; i++) {
	if (i+1 < g.length) l.push([g[i], g[i+1]]);
	else l.push([g[i], g[0]]);
	}

	lines.transition().attr("transform", "translate(0,0)")
	.attr("x1", function(d) { return d[0].x; })
	.attr("x2", function(d) { return d[1].x; })
	.attr("y1", function(d) { return d[0].y; })
	.attr("y2", function(d) { return d[1].y; })
	.style("stroke", "rgb(0,200,232)");

	circles.transition()
	.attr("cx", function(d) { return d.x })
	.attr("cy", function(d) { return d.y });
	};

	setInterval(function() {update()}, 100);
	</script>