Multiple sparkline transition strangeness

<!DOCTYPE html>
<html>
	<head>
		<title>Animated Sparkline</title>
		<script src="https://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>

Modified http://bost.ocks.org/mike/d3.v2.min.js to a secure url

https://bost.ocks.org/mike/d3.v2.min.js