Skip to content

Instantly share code, notes, and snippets.

@bycoffe

bycoffe/index.html

Created June 19, 2014 13:56
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 bycoffe/21061661b1450a4db92a to your computer and use it in GitHub Desktop.
Save bycoffe/21061661b1450a4db92a to your computer and use it in GitHub Desktop.
Download ZIP
Sort & animate divs
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.resort {
padding: 10px;
border: 1px solid black;
background: #ccc;
cursor: pointer;
width: 100px;
margin-bottom: 20px;
}
.data {
position: fixed;
border: 1px solid black;
width: 100px;
}
</style>
</head>
<body>
<div class="resort">Re-sort</div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript">
;(function() {
var data = d3.range(0, 10),
body = d3.select("body");
function reSort() {
body.selectAll("div.data").sort(function(a, b) {
return d3.ascending(Math.random(), Math.random());
})
.transition().duration(500)
.style({
top: function(d, i) {
return 60 + ((i*30)) + "px";
}
})
}
d3.select(".resort").on("click", reSort);
div = body.selectAll("div.data")
.data(data)
.enter().append("div")
.attr({
"class": "data"
})
.style({
top: function(d, i) {
return 60 + ((i*30)) + "px";
}
})
.html(function(d, i) { return d; });
}());
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment