jasondavies/index.html

## index.html
<!DOCTYPE html>
<html>
	<head>
		<title>Animated Sparkline</title>
		<script src="http://bost.ocks.org/mike/d3.v2.min.js"></script>
		<style type="text/css">

			path {
				stroke: steelblue;
				stroke-width: 1;
				fill: none;
			}

			circle {
				fill: red;
				stroke: white;
                stroke-width: .75;
			}

            button {
                margin-top: 20px;
                margin-bottom: 20px;
            }

			div {
				width: 500px;
				height: 50px;
			}

		</style>
        <script type="text/javascript">
            var ballRadius = 2;  // need to take radius into account so we don't dip below or above visible area
			var duration = 5000;
            var data = [3, 6, 2, 7, 0, 2, 1, 3, 8, 9, 2, 5, 9, 3, 6, 3, 6, 2, 7, 5, 2, 0, 3, 10, 8, 9, 2, 5, 9, 2, 7, 5, 2, 1, 3, 8, 9, 2, 5, 9, 3, 10, 6, 2, 7, 5, 2, 1, 3, 8, 9, 2, 5, 9];

			var x = d3.scale.linear().domain([0, 1]).range([0, 500 / (data.length - 1)]);
			var y = d3.scale.linear().domain([0, 10]).range([ballRadius, 50 - ballRadius]);

			var line = d3.svg.line()
						.interpolate("linear")
						.x(function(d,i) { return x(i); })
						.y(function(d) { return 50 - y(d); });

			function refreshData() {
				d3.range(data.length).forEach(function(d, i) { data[i] = Math.random() * 10; });
			}

			function refreshLine() {
				d3.selectAll("path")
					.data([data, data])
					.transition()
					.duration(duration / 2)
					.ease("linear")
						.attr("d", line);
			}

			function refresh() {
				refreshData();
				refreshLine();
			}

			var id = 0;
			function drawSparkline(container) {
			   var graph = container.append("svg")
					.attr("width", "100%")
					.attr("height", "100%");

				graph.append("clipPath")
					.attr("id", "clippy" + ++id)
					.append("rect");

				var path = graph.append("g").attr("clip-path", "url(#clippy" + id + ")")
								.selectAll("path")
									.data([data])
									.enter().append("path")
										.attr("class", "path")
										.attr("d", line);

				var y_start = y(data[0]);
				var circle = graph.append("circle")
								.attr("class", "circle")
								.attr("cy", y_start)
								.attr("r", ballRadius);

				graph.selectAll("rect").attr("height", 50);


				var currentX = new Array(2);
				var transition = graph.transition()
									  .duration(duration)
									  .ease("linear");

				transition.selectAll("rect")
						.attrTween("width", function(d, i) {
							return function(t) {
								return currentX[i];
							};
						});

				transition.selectAll("circle")
						.attrTween("transform", function(d, i) {
							return function(t) {
								return followPath(path[i][0], t, i);
							};
						})
						.each("end", function() { this.style.display = "none"; });

				function followPath(pathElement, t, i) {
					var l = pathElement.getTotalLength();
					var p = pathElement.getPointAtLength(t * l);
					currentX[i] = p.x;
					return "translate(" + p.x + ", " + (p.y - y_start) + ")";
				}
			}
        </script>
	</head>
	<body>
		<button onclick="refresh();">Refresh</button>
		<div id="first"></div></br>
		<div id="second"></div>
        <script>
			drawSparkline(d3.select("div#first"));
			drawSparkline(d3.select("div#second"));
        </script>
    </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Animated Sparkline</title>
	<script src="http://bost.ocks.org/mike/d3.v2.min.js"></script>
	<style type="text/css">

	path {
	stroke: steelblue;
	stroke-width: 1;
	fill: none;
	}

	circle {
	fill: red;
	stroke: white;
	stroke-width: .75;
	}

	button {
	margin-top: 20px;
	margin-bottom: 20px;
	}

	div {
	width: 500px;
	height: 50px;
	}

	</style>
	<script type="text/javascript">
	var ballRadius = 2; // need to take radius into account so we don't dip below or above visible area
	var duration = 5000;
	var data = [3, 6, 2, 7, 0, 2, 1, 3, 8, 9, 2, 5, 9, 3, 6, 3, 6, 2, 7, 5, 2, 0, 3, 10, 8, 9, 2, 5, 9, 2, 7, 5, 2, 1, 3, 8, 9, 2, 5, 9, 3, 10, 6, 2, 7, 5, 2, 1, 3, 8, 9, 2, 5, 9];

	var x = d3.scale.linear().domain([0, 1]).range([0, 500 / (data.length - 1)]);
	var y = d3.scale.linear().domain([0, 10]).range([ballRadius, 50 - ballRadius]);

	var line = d3.svg.line()
	.interpolate("linear")
	.x(function(d,i) { return x(i); })
	.y(function(d) { return 50 - y(d); });

	function refreshData() {
	d3.range(data.length).forEach(function(d, i) { data[i] = Math.random() * 10; });
	}

	function refreshLine() {
	d3.selectAll("path")
	.data([data, data])
	.transition()
	.duration(duration / 2)
	.ease("linear")
	.attr("d", line);
	}

	function refresh() {
	refreshData();
	refreshLine();
	}

	var id = 0;
	function drawSparkline(container) {
	var graph = container.append("svg")
	.attr("width", "100%")
	.attr("height", "100%");

	graph.append("clipPath")
	.attr("id", "clippy" + ++id)
	.append("rect");

	var path = graph.append("g").attr("clip-path", "url(#clippy" + id + ")")
	.selectAll("path")
	.data([data])
	.enter().append("path")
	.attr("class", "path")
	.attr("d", line);

	var y_start = y(data[0]);
	var circle = graph.append("circle")
	.attr("class", "circle")
	.attr("cy", y_start)
	.attr("r", ballRadius);

	graph.selectAll("rect").attr("height", 50);


	var currentX = new Array(2);
	var transition = graph.transition()
	.duration(duration)
	.ease("linear");

	transition.selectAll("rect")
	.attrTween("width", function(d, i) {
	return function(t) {
	return currentX[i];
	};
	});

	transition.selectAll("circle")
	.attrTween("transform", function(d, i) {
	return function(t) {
	return followPath(path[i][0], t, i);
	};
	})
	.each("end", function() { this.style.display = "none"; });

	function followPath(pathElement, t, i) {
	var l = pathElement.getTotalLength();
	var p = pathElement.getPointAtLength(t * l);
	currentX[i] = p.x;
	return "translate(" + p.x + ", " + (p.y - y_start) + ")";
	}
	}
	</script>
	</head>
	<body>
	<button onclick="refresh();">Refresh</button>
	<div id="first"></div></br>
	<div id="second"></div>
	<script>
	drawSparkline(d3.select("div#first"));
	drawSparkline(d3.select("div#second"));
	</script>
	</body>
	</html>