updated d3 exampes

examples/d3.html

@@ -4,8 +4,12 @@
         <meta charset="utf-8">
         <meta http-equiv="X-UA-Compatible" content="IE=Edge">
         <!--[if lt IE 9]><script type="text/javascript" src="../aight.js"></script><![endif]-->
-        <script type="text/javascript" src="https://raw.github.com/mbostock/d3/master/d3.v2.js"></script>
+        <script type="text/javascript" src="https://raw.github.com/shawnbot/d3/master/d3.v2.min.js"></script>
         <style type="text/css">
+            .error {
+                background: #fcc;
+                padding: 2px 4px;
+            }
             #colored-boxes span {
                 margin-right: 2px;
             }
@@ -17,24 +21,41 @@ <h1>d3 + aight</h1>
         <h2>Text replacement</h2>
         <p>This is a random number: <tt id="random-number"></tt></p>
         <script type="text/javascript" defer>
-            d3.select("#random-number").text(Math.random() * 1000);
+        (function() {
+
+             d3.select("#random-number")
+                 .text(Math.random() * 1000);
+
+        })();
         </script>
 
-        <h2>Data binding</h2>
-        <p>There should be 5 list items here with text in them:</p>
+        <h2>Data binding, sorting</h2>
+        <p>There should be 4 list items here with text in them, sorted naturally ascending:</p>
         <ol id="text-list"></ol>
         <script type="text/javascript" defer>
-            d3.select("#text-list")
+        (function() {
+
+            var items = d3.select("#text-list")
                 .selectAll("li")
-                .data(["foo", "bar", "baz", "qux", "quux"])
+                .data(["foo", "bar", "baz", "qux"])
                 .enter().append("li")
                     .text(function(d) { return d; });
+
+            items.sort();
+
+            console.log("sorted c,a,b: ", ["c", "a", "b"].sort());
+
+        })();
         </script>
+        <p class="error"><strong>NOTE:</strong> <tt>d3.selection.sort()</tt> does
+        <strong>not</strong> work in IE8 at this time.</p>
 
-        <h2>Inline styles</h2>
+        <h2>Scales, inline styles</h2>
         <p>There should be a series of colored boxes below:</p>
         <p id="colored-boxes"></p>
         <script type="text/javascript" defer>
+        (function() {
+
             var scale = d3.scale.linear()
                     .domain([0, 1])
                     .range(["#f99", "#9cf"]),
@@ -48,6 +69,40 @@ <h2>Inline styles</h2>
                     .style("width", "20px")
                     .style("height", "20px")
                     .style("background", function(d) { return d; });
+
+        })();
+        </script>
+
+        <h2>DOM data binding with map(), text transitions</h2>
+        <p>These numbers should transition from 0 over 10 seconds:</p>
+        <ul id="transition-text">
+            <li data-end="1000">0</li>
+            <li data-end="5000">0</li>
+            <li data-end="1000000">0</li>
+        </ul>
+        <script type="text/javascript" defer>
+        (function() {
+
+            var format = d3.format(",d"),
+                numbers = d3.selectAll("#transition-text li")
+                    .map(function() {
+                        return {
+                            start: ~~this.textContent,
+                            end: ~~this.getAttribute("data-end")
+                        };
+                    });
+
+            numbers.transition()
+                .ease("linear")
+                .duration(2000)
+                .tween("text", function(d) {
+                    var i = d3.interpolate(d.start, d.end);
+                    return function(t) {
+                        this.textContent = format(i(t));
+                    };
+                });
+
+        })();
         </script>
 
     </body>