Commits

Ralph Bean committed 6ede895

Nice sample.

Comments (0)

Files changed (2)

tw2/d3/samples.py

 WidgetBrowser.
 """
 
+import tw2.core as twc
+
 from widgets import (
     BarChart,
 )
     width = 450
     height = 120
 
+    # Top, Right, Bottom, Left
     padding = [30, 10, 10, 90]
 
+    # The redraw interval (in milliseconds).
+    interval = 1000
+
     data = collections.OrderedDict(
         oranges=42,
         kiwis=102,
         bananas=63,
     )
 
-    interval = 1000
+    # This only gets called just before the widget is displayed
+    def prepare(self):
+        super(DemoBarChart, self).prepare()
+        # Register a javascript call to a utility function that tw2.d3 provides.
+        # This one indicates that every element in the data should decay by a
+        # certain halflife (2000ms), that function should be run every 1000ms,
+        # and elements should just be removed if their value goes below a
+        # certain epsilon (0.001)
+        self.add_call(twc.js_function('tw2.d3.bar.schedule_halflife')(
+            self.attrs['id'],
+            2000,
+            1000,
+            0.001,
+        ))
+        # This registers another javascript callback that is just nice for
+        # testing.  It schedules a callback that runs every 100 milliseconds
+        # which adds random noise to the data elements.
+        self.add_call(twc.js_function('tw2.d3.util.schedule_bump_random')(
+            self.attrs['id'],
+            100
+        ))

tw2/d3/static/ext/bar.js

             // Generic utility.  Remove elements with 0 value from the list.
             // Equivalent to the following python:
             //     >>> data = [d for d in data if d.value > epsilon]
-            var epsilon = 0.001; 
+            if (typeof epsilon === 'undefined') { epsilon = 0.001; }
             for (var i = 0; i < data.length; i++) {
                 if (data[i].value <= epsilon) {
                     data.splice(i, 1);
             }
             return data;
         },
+        schedule_bump_random: function(selector, interval) {
+            // Schedule randomly bump data points for `selector`
+            setInterval(function() {
+                for (var i = 0; i < tw2.store[selector].data.length; i++) {
+                    tw2.store[selector].data[i].value += Math.random() * 3;
+                }
+            }, interval);
+        }
     },
+
     bar: {
         init: function (selector, data, width, height, padding, interval) {
             $(document).ready(function() {
         redraw: function(selector, easing) {
             if (typeof easing === 'undefined') { easing = 'linear'; }
 
-            tw2.store[selector].data[0].value -= 15;
-            tw2.store[selector].data = tw2.d3.util.filter(
-                tw2.store[selector].data
-            );
             var data = tw2.store[selector].data;
             var interval = tw2.store[selector].interval;
 
             tw2.store[selector].svg.selectAll("g.y")
             .transition().ease(easing).duration(interval).call(yAxis);
         },
+        decay_amount: function(selector, amount, epsilon) {
+            for (var i = 0; i < tw2.store[selector].data.length; i++) {
+                tw2.store[selector].data[i].value -= amount;
+            }
+            tw2.store[selector].data = tw2.d3.util.filter(
+                tw2.store[selector].data,
+                epsilon
+            );
+        },
+        schedule_halflife: function(selector, halflife, interval, epsilon) {
+            setInterval(function() {
+                // halflife means 'In this many milliseconds, the value should
+                // be half of what it was.'
+                var factor = 2 * halflife / interval;
+                var amount;
+                for (var i = 0; i < tw2.store[selector].data.length; i++) {
+                    amount = tw2.store[selector].data[i].value / factor;
+                    tw2.store[selector].data[i].value -= amount;
+                }
+                tw2.store[selector].data = tw2.d3.util.filter(
+                    tw2.store[selector].data,
+                    epsilon
+                );
+            }, interval);
+        },
     },
 });