Skip to content

Instantly share code, notes, and snippets.

@jasondavies
Forked from scameron/index.html
Created March 2, 2012 10:06
Show Gist options
  • Save jasondavies/1957481 to your computer and use it in GitHub Desktop.
Save jasondavies/1957481 to your computer and use it in GitHub Desktop.
Multiple sparkline transition strangeness
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment