dc-js · daniel-gall · Jul 28, 2016 · Jul 28, 2016 · Jul 28, 2016 · Jul 28, 2016
diff --git a/src/scatter-plot.js b/src/scatter-plot.js
@@ -65,8 +65,7 @@ dc.scatterPlot = function (parent, chartGroup) {
 
     _chart.plotData = function () {
         var symbols = _chart.chartBodyG().selectAll('path.symbol')
-                .data(_chart.data());
-
+            .data(_chart.data());
         symbols
             .enter()
             .append('path')
@@ -75,6 +74,8 @@ dc.scatterPlot = function (parent, chartGroup) {
             .attr('fill', _chart.getColor)
             .attr('transform', _locator);
 
+        symbols.call(renderTitle, _chart.data());
+
         symbols.each(function (d, i) {
             _filtered[i] = !_chart.filter() || _chart.filter().isFiltered([d.key[0], d.key[1]]);
         });
@@ -256,6 +257,15 @@ dc.scatterPlot = function (parent, chartGroup) {
         return _chart;
     };
 
+    function renderTitle (symbol, d) {
+        if (_chart.renderTitle()) {
+            symbol.selectAll('title').remove();
+            symbol.append('title').text(function (d) {
+                return _chart.title()(d);
+            });
+        }
+    }
+
     _chart.legendables = function () {
         return [{chart: _chart, name: _chart._groupName, color: _chart.getColor()}];
     };

diff --git a/web/examples/align-axes.html b/web/examples/align-axes.html
@@ -16,6 +16,7 @@
       #hscroll {
           width: 100%;
           overflow: scroll;
+          padding-left: 20px;
       }
       #page {
           height: 95vh;

diff --git a/web/examples/header.js b/web/examples/header.js
@@ -9,8 +9,12 @@
         '<a href=".">all ' + dir + '</a>&emsp;<a href="',
         'https://github.com/dc-js/dc.js/tree/master/web/' + dir + '/' + filename,
         '">source</a>',
+        '<div style="float:right"><span id="version"></span></div>',
         '</div>',
         '<hr>',
         '</div>'
     ].join(''));
+    window.onload = function() {
+        d3.select('#version').text('v' + dc.version);
+    };
 }();
diff --git a/web/transitions/area-progression.html b/web/transitions/area-progression.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>dc.js - Area Progression Example</title>
+    <meta charset="UTF-8">
+    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
+    <link rel="stylesheet" type="text/css" href="../css/dc.css"/>
+  </head>
+  <body>
+    <div class="container">
+    <script type="text/javascript" src="../examples/header.js"></script>
+
+    <div id="test"></div>
+    <button class="btn" onclick="transitionTest.stop()">stop</button>
+    <button class="btn" onclick="button1()">forward</button>
+    <button class="btn" onclick="button2()">reverse</button>
+
+    <script type="text/javascript" src="../js/d3.js"></script>
+    <script type="text/javascript" src="../js/crossfilter.js"></script>
+    <script type="text/javascript" src="../js/dc.js"></script>
+    <script type="text/javascript" src="transition-test.js"></script>
+    <script type="text/javascript">
+
+      var chart = dc.lineChart("#test");
+      var progression = transitionTest.progression(5, 20);
+      var noDimension = {};
+      var progressGroup = {
+          all: function() {
+              return progression.data();
+          }
+      };
+
+      function sel_stack(i) {
+          return function(d) {
+              return d.value[i];
+          };
+      }
+      var doDots = transitionTest.querystring.dots!=="0",
+          doArea = transitionTest.querystring.area!=="0";
+
+      chart
+          .transitionDuration(transitionTest.duration)
+          .width(768)
+          .height(480)
+          .x(d3.scale.linear())
+          .elasticX(true)
+          .elasticY(true)
+          .margins({left: 50, top: 10, right: 10, bottom: 20})
+          .renderArea(doArea)
+          .brushOn(false)
+          .renderDataPoints(doDots)
+          .dimension(noDimension);
+
+      function all_stacks() {
+          chart.group(progressGroup, "0", sel_stack('0'));
+          for(var i = 1; i<5; ++i)
+              chart.stack(progressGroup, ''+i, sel_stack(i));
+      }
+      all_stacks();
+      chart.render();
+
+      window.button1 = function() {
+          progression
+              .reverse(false)
+              .start();
+      };
+      window.button2 = function() {
+          progression
+              .reverse(true)
+              .start();
+      };
+      window.button4 = transitionTest.oscillate(function() {
+          chart.group(progressGroup, '2', sel_stack('2'))
+              .stack(progressGroup, '4', sel_stack('4'));
+      }, all_stacks);
+
+    </script>
+    </div>
+  </body>
+</html>
diff --git a/web/transitions/bar-progression.html b/web/transitions/bar-progression.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>dc.js - Area Progression Example</title>
+    <meta charset="UTF-8">
+    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
+    <link rel="stylesheet" type="text/css" href="../css/dc.css"/>
+  </head>
+  <body>
+    <div class="container">
+    <script type="text/javascript" src="../examples/header.js"></script>
+
+    <div id="test"></div>
+    <button class="btn" onclick="transitionTest.stop()">stop</button>
+    <button class="btn" onclick="button1()">forward</button>
+    <button class="btn" onclick="button2()">reverse</button>
+
+    <script type="text/javascript" src="../js/d3.js"></script>
+    <script type="text/javascript" src="../js/crossfilter.js"></script>
+    <script type="text/javascript" src="../js/dc.js"></script>
+    <script type="text/javascript" src="transition-test.js"></script>
+    <script type="text/javascript">
+
+      var chart = dc.barChart("#test");
+      var progression = transitionTest.progression(5, 20);
+      var noDimension = {};
+      var progressGroup = {
+          all: function() {
+              return progression.data();
+          }
+      };
+
+      function sel_stack(i) {
+          return function(d) {
+              return d.value[i];
+          };
+      }
+
+      chart
+          .transitionDuration(transitionTest.duration)
+          .width(768)
+          .height(480)
+          .x(d3.scale.linear())
+          .elasticX(true)
+          .elasticY(true)
+          .margins({left: 50, top: 10, right: 10, bottom: 20})
+          .brushOn(false)
+          .dimension(noDimension);
+
+      function all_stacks() {
+          chart.group(progressGroup, "0", sel_stack('0'));
+          for(var i = 1; i<5; ++i)
+              chart.stack(progressGroup, ''+i, sel_stack(i));
+      }
+      all_stacks();
+      chart.render();
+
+      window.button1 = function() {
+          progression
+              .reverse(false)
+              .start();
+      };
+      window.button2 = function() {
+          progression
+              .reverse(true)
+              .start();
+      };
+      window.button4 = transitionTest.oscillate(function() {
+          chart.group(progressGroup, '2', sel_stack('2'))
+              .stack(progressGroup, '4', sel_stack('4'));
+      }, all_stacks);
+
+    </script>
+    </div>
+  </body>
+</html>
diff --git a/web/transitions/index.html b/web/transitions/index.html
@@ -8,16 +8,20 @@ <h2>Eyeball tests for dc.js transitions</h2>
 here</a>.</p>
 <table class="table">
   <tr>
+    <td><a href="area-progression.html">area progression</a></td>
     <td><a href="area-transitions.html">area transitions</a></td>
+    <td><a href="bar-progression.html">bar progression</a></td>
     <td><a href="bar-transitions.html">bar transitions</a></td>
     <td><a href="number-transitions.html">number transitions</a></td>
-    <td><a href="ordinal-bar-transitions.html">ordinal bar transitions</a></td>
-    <td><a href="ordinal-line-transitions.html">ordinal line transitions</a></td>
 <tr>
   <tr>
+    <td><a href="ordinal-bar-transitions.html">ordinal bar transitions</a></td>
+    <td><a href="ordinal-line-transitions.html">ordinal line transitions</a></td>
     <td><a href="ordinal-row-transitions.html">ordinal row transitions</a></td>
     <td><a href="pie-external-label-transitions.html">pie external label transitions</a></td>
     <td><a href="pie-transitions.html">pie transitions</a></td>
+<tr>
+  <tr>
     <td><a href="stacked-bar-transitions.html">stacked bar transitions</a></td>
 <tr>
 </table>

diff --git a/web/transitions/transition-test.js b/web/transitions/transition-test.js
@@ -20,6 +20,7 @@ var transitionTest = (function() {
     if(isNaN(pause)) pause = 500;
     function stop() {
         window.clearInterval(inter);
+        inter = null;
     }
     function oscillate(f1, f2) {
         return function() {
@@ -36,11 +37,86 @@ var transitionTest = (function() {
             }, duration+pause);
         };
     }
+    // generate continuous data
+    function progression(N, initial) {
+        var _steps = 5, // number of data points to add each tick
+            _interval = 1, // distance in x between points
+            _magnitude = 1, // maximum change in y per observation
+            _reverse = false; // whether to regress instead of progress
+        var _data = [];
+        var rand = d3.random.normal();
+        function startval() { // .fill() (when can we drop ie?)
+            var a = new Array(N);
+            for(var i = 0; i<N; ++i) {
+                a[i] = _magnitude*2;
+            }
+            return a;
+        }
+        function drop() {
+            _data.splice(_reverse ? _data.length-1 : 0, 1);
+        }
+        function generate() {
+            var basis = _data.length ?
+                    _data[_reverse ? 0 : _data.length-1] :
+                {key: 0, value: startval()};
+            var obs = [], key = basis.key + (_reverse ? -1 : 1) * _interval;
+            for(var i = 0; i<N; ++i) {
+                obs[i] = Math.max(basis.value[i] + rand() * _magnitude, 0);
+            }
+            var datum = {key: key, value: obs};
+            if(_reverse)
+                _data.unshift(datum);
+            else
+                _data.push(datum);
+        }
+        while(initial--) generate();
+        return {
+            steps: function(steps) {
+                if(!arguments.length)
+                    return _steps;
+                _steps = steps;
+                return this;
+            },
+            interval: function(interval) {
+                if(!arguments.length)
+                    return _interval;
+                _interval = interval;
+                return this;
+            },
+            magnitude: function(magnitude) {
+                if(!arguments.length)
+                    return _magnitude;
+                _magnitude = magnitude;
+                return this;
+            },
+            reverse: function(reverse) {
+                if(!arguments.length)
+                    return _reverse;
+                _reverse = reverse;
+                return this;
+            },
+            start: function() {
+                stop();
+                dc.redrawAll();
+                inter = window.setInterval(function() {
+                    for(var i = 0; i < _steps; ++i) {
+                        generate();
+                        drop();
+                    }
+                    dc.redrawAll();
+                }, duration+pause);
+            },
+            data: function() {
+                return _data;
+            }
+        };
+    }
     return {
         querystring : querystring,
         duration: duration,
         pause: pause,
         stop: stop,
-        oscillate: oscillate
+        oscillate: oscillate,
+        progression: progression
     };
 })();