--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/toolkit/javascript/d3/examples/hello-world/hello-sort.html Thu Apr 10 14:20:23 2014 +0200
@@ -0,0 +1,75 @@
+<!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>