Ralph Bean avatar Ralph Bean committed c413f1f

Configurable interval. Better animation.

Comments (0)

Files changed (3)

tw2/d3/samples.py

         apples=21,
         bananas=63,
     )
+
+    interval = 1000

tw2/d3/static/ext/bar.js

         filter: function(data) {
             // Generic utility.  Remove elements with 0 value from the list.
             // Equivalent to the following python:
-            //     >>> data = [d for d in data if d.value > 0]
+            //     >>> data = [d for d in data if d.value > epsilon]
+            var epsilon = 0.001; 
             for (var i = 0; i < data.length; i++) {
-                if (data[i].value <= 0) {
+                if (data[i].value <= epsilon) {
                     data.splice(i, 1);
                 }
             }
         },
     },
     bar: {
-        init: function (selector, data, width, height, padding) {
+        init: function (selector, data, width, height, padding, interval) {
             $(document).ready(function() {
-                tw2.d3.bar._init(selector, data, width, height, padding);
+                tw2.d3.bar._init(selector, data, width, height, padding, interval);
             });
         },
-        _init: function (selector, data, width, height, padding) {
+        _init: function (selector, data, width, height, padding, interval) {
             var w = width - padding[1] - padding[3];
             var h = height - padding[0] - padding[2];
 
                 width: width,
                 height: height,
                 padding: padding,
+                interval: interval,
             };
 
             svg.append("g").attr("class", "x axis")
             svg.append("g").attr("class", "y axis")
 
-            tw2.d3.bar.redraw(selector)
-            setInterval(function() { tw2.d3.bar.redraw(selector)}, 1000);
+            tw2.d3.bar.redraw(selector, 'cubic-in-out')
+            if (interval > 0) {
+                setInterval(function() {tw2.d3.bar.redraw(selector)}, interval);
+            }
         },
-        redraw: function(selector) {
+        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;
 
             var w =
             tw2.store[selector].width - 
 
             bar.exit().remove();
 
-            bar.transition().duration(750).attr("transform", function(d) {
+            bar.transition().duration(interval).attr("transform", function(d) {
                 return "translate(0," + y(d.key) + ")";
             });
 
             bar.selectAll("rect")
             .data(data, function(d) { return d.key })
             .attr("height", y.rangeBand())
-            .transition()
+            .transition().ease(easing).duration(interval)
             .attr("width", function(d) { return x(d.value); });
 
             tw2.store[selector].svg.selectAll("g.x")
-            .transition().duration(750).call(xAxis);
+            .transition().ease(easing).duration(interval).call(xAxis);
             tw2.store[selector].svg.selectAll("g.y")
-            .transition().duration(750).call(yAxis);
+            .transition().ease(easing).duration(interval).call(yAxis);
         },
     },
 });

tw2/d3/widgets.py

     padding = twc.Param("A list of ints [top, right, bottom, left]",
                         default=[30, 10, 10, 30])
 
+    interval = twc.Param("Redraw-interval in milliseconds.", default=0)
+
     def prepare(self):
 
         # Check the types of everything
         int(self.width)
         int(self.height)
+        int(self.interval)
         self.padding = [int(ele) for ele in self.padding]
 
         if self.data == None:
             self.width,
             self.height,
             self.padding,
+            self.interval,
         ))
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.