GerHobbelt/.gitignore

## .gitignore
# Editor backup files
*.bak
*~

## index.html
<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.9.1"></script>
    <style type="text/css">

circle {
  fill: #ccc;
  fill-opacity: .5;
  stroke: #999;
}

    </style>
  </head>
  <body>
    <script type="text/javascript">

var w = 960,
    h = 500,
    y = d3.scale.ordinal().domain(d3.range(50)).rangePoints([20, h - 20]),
    t0 = Date.now(),
    d = y.domain();

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

var circle = svg.selectAll("circle")
    .data(d)
  .enter().append("svg:circle")
    .attr("r", 16)
    .attr("cx", 20)
    .attr("cy", y)
    .each(slide(20, w - 20));

var el_count = d3.max(d) - d3.min(d) + 1;

function slide(x0, x1, t) {
  return function(d, i, j) {
    t0 += 50;
    t = t || t0;
    t += 50 * el_count;
    d3.select(this).transition()
        .duration(t - Date.now())
        .attr("cx", x1)
        .each("end", slide(x1, x0, t));
  };
}

    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.9.1"></script>
	<style type="text/css">

	circle {
	fill: #ccc;
	fill-opacity: .5;
	stroke: #999;
	}

	</style>
	</head>
	<body>
	<script type="text/javascript">

	var w = 960,
	h = 500,
	y = d3.scale.ordinal().domain(d3.range(50)).rangePoints([20, h - 20]),
	t0 = Date.now(),
	d = y.domain();

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

	var circle = svg.selectAll("circle")
	.data(d)
	.enter().append("svg:circle")
	.attr("r", 16)
	.attr("cx", 20)
	.attr("cy", y)
	.each(slide(20, w - 20));

	var el_count = d3.max(d) - d3.min(d) + 1;

	function slide(x0, x1, t) {
	return function(d, i, j) {
	t0 += 50;
	t = t \|\| t0;
	t += 50 * el_count;
	d3.select(this).transition()
	.duration(t - Date.now())
	.attr("cx", x1)
	.each("end", slide(x1, x0, t));
	};
	}

	</script>
	</body>
	</html>