Skip to content

Instantly share code, notes, and snippets.

@nategood

nategood/index.html

Last active November 6, 2015 18:02
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nategood/2d5d7537597e340f968d to your computer and use it in GitHub Desktop.
Save nategood/2d5d7537597e340f968d to your computer and use it in GitHub Desktop.
Download ZIP
Animate Multiple Paths
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Animate Multiple Paths</title>
<script src="http://d3js.org/d3.v3.min.js"></script>
<style type="text/css">
html, body {
font: 12px Helvetica;
margin: 0; padding: 0;
height: 100%;
}
path {
fill: none;
stroke: #333;
stroke-width: 1px;
}
</style>
</head>
<body>
<svg id="svg"></svg>
<script type="text/javascript">
var draw = function(data) {
var h = 500, w = 960;
var gh = h, gw = w;
var line = d3.svg.line();
var svg = d3.select("#svg")
.attr("width", w)
.attr("height", h)
.style("background", "#eee");
var g = svg.append("g");
var p = g.selectAll("path")
.data(data)
.enter()
.append("path")
.attr("d", function(d) {
return line(d);
})
.attr("stroke-dasharray", function() {
var totalLength = this.getTotalLength();
return totalLength + " " + totalLength;
})
.attr("stroke-dashoffset", function() {
var totalLength = this.getTotalLength();
return totalLength;
})
.transition()
.duration(function() { return Math.random() * 5000;})
.ease("linear")
.attr("stroke-dashoffset", 0);
};
var randomLineData = [[[0,10.064346285071224],[240,8.48040864802897],[480,9.162813588045537],[720,22.1472485573031],[960,37.4944165465422]],[[0,82.14539423352107],[240,94.72293140133843],[480,77.73345955647528],[720,74.82177526690066],[960,70.49363366095349]],[[0,131.29599790554494],[240,123.43528651399538],[480,140.34001843538135],[720,133.15290212631226],[960,111.83190263109282]],[[0,159.25968795781955],[240,193.61341412877664],[480,186.91670160042122],[720,184.6479948493652],[960,171.67417635209858]],[[0,201.06066697044298],[240,234.3012265744619],[480,232.37492330372334],[720,240.1316955103539],[960,229.69979882473126]],[[0,263.93598958384246],[240,258.10575175564736],[480,265.1164440205321],[720,269.10992617486045],[960,289.2667642910965]],[[0,316.68891006847844],[240,310.5963612906635],[480,319.9366423301399],[720,300.2589029725641],[960,331.62355626700446]],[[0,398.5653228126466],[240,385.4336130898446],[480,384.35006425715983],[720,384.1955269337632],[960,353.8314075092785]],[[0,408.2627289695665],[240,434.18496410595253],[480,401.3804081478156],[720,429.1491156676784],[960,437.59067045757547]],[[0,490.6879990710877],[240,494.284018187318],[480,499.9883345095441],[720,489.2879026941955],[960,465.65176501171663]]];
draw(randomLineData);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment