<!DOCTYPE html>
<html>
<head>
<title>Hello, sort!</title>
<script type="text/javascript" src="../../d3.js"></script>
<style type="text/css">
html, body, svg {
font: 14px Helvetica Neue;
margin: 0;
width: 100%;
height: 100%;
display: block;
}
circle {
fill: steelblue;
fill-opacity: .8;
stroke: #fff;
}
div {
position: fixed;
top: 10px;
left: 10px;
}
</style>
</head>
<body>
<div>
<input id="sort" type="checkbox" checked>
<label for="sort">Ascending</label>
</div>
<script type="text/javascript">
d3.select("body")
.append("svg:svg")
.attr("viewBox", "0 0 1000 1000");
d3.select("#sort")
.on("change", sort);
transform();
function transform() {
var circle = d3.select("svg")
.selectAll("circle")
.data(d3.range(400).map(Math.random));
circle.enter().append("svg:circle")
.attr("cx", function() { return 100 + Math.random() * 800; })
.attr("cy", function() { return 100 + Math.random() * 800; })
.attr("r", function(d) { return 50 * d; });
circle
.transition()
.duration(750)
.attr("r", function(d) { return 50 * d; });
sort();
}
function sort() {
d3.selectAll("circle")
.sort(d3.select("#sort").property("checked")
? function(a, b) { return b - a; }
: function(a, b) { return a - b; });
}
window.addEventListener("keypress", transform, false);
</script>
</body>
</html>