[DO NOT MERGE] Animations

.editorconfig

@@ -0,0 +1,3 @@
+[*.js]
+indent_style = space
+indent_size = 4

src/components/drawing/index.js

@@ -46,16 +46,61 @@ drawing.setRect = function(s, x, y, w, h) {
     s.call(drawing.setPosition, x, y).call(drawing.setSize, w, h);
 };
 
-drawing.translatePoints = function(s, xa, ya) {
-    s.each(function(d) {
+drawing.translatePoints = function(s, xa, ya, trace, transitionConfig, joinDirection) {
+
+    var hasTransition = transitionConfig && (transitionConfig || {}).duration > 0;
+
+    if (hasTransition) {
+        var size = s.size();
+    }
+
+    s.each(function(d, i) {
         // put xp and yp into d if pixel scaling is already done
         var x = d.xp || xa.c2p(d.x),
             y = d.yp || ya.c2p(d.y),
             p = d3.select(this);
         if(isNumeric(x) && isNumeric(y)) {
             // for multiline text this works better
-            if(this.nodeName === 'text') p.attr('x', x).attr('y', y);
-            else p.attr('transform', 'translate(' + x + ',' + y + ')');
+            if(this.nodeName==='text') {
+              p.attr('x',x).attr('y',y);
+            } else {
+              if (hasTransition) {
+                var trans;
+                if (!joinDirection) {
+                    trans = p.transition()
+                        .delay(transitionConfig.delay + transitionConfig.cascade / size * i)
+                        .duration(transitionConfig.duration)
+                        .ease(transitionConfig.easing)
+                        .attr('transform', 'translate('+x+','+y+')')
+
+                    if (trace) {
+                      trans.call(drawing.pointStyle, trace)
+                    }
+                } else if (joinDirection === -1) {
+                    trans = p.style('opacity', 1)
+                        .transition()
+                            .duration(transitionConfig.duration)
+                            .ease(transitionConfig.easing)
+                            .style('opacity', 0)
+                            .remove();
+                } else if (joinDirection === 1) {
+                    trans = p.attr('transform', 'translate('+x+','+y+')')
+
+                    if (trace) {
+                      trans.call(drawing.pointStyle, trace)
+                    }
+
+                    trans.style('opacity', 0)
+                        .transition()
+                            .duration(transitionConfig.duration)
+                            .ease(transitionConfig.easing)
+                            .style('opacity', 1)
+                }
+
+              } else {
+                  p.attr('transform', 'translate('+x+','+y+')');
+              }
+            }
         }
         else p.remove();
     });
@@ -218,7 +263,7 @@ drawing.pointStyle = function(s, trace) {
         markerScale = drawing.tryColorscale(marker, markerIn, ''),
         lineScale = drawing.tryColorscale(marker, markerIn, 'line.');
 
-    s.each(function(d) {
+    s.each(function(d, i) {
         // 'so' is suspected outliers, for box plots
         var fillColor,
             lineColor,
@@ -235,11 +280,11 @@ drawing.pointStyle = function(s, trace) {
 
             if('mlc' in d) lineColor = d.mlcc = lineScale(d.mlc);
             // weird case: array wasn't long enough to apply to every point
-            else if(Array.isArray(markerLine.color)) lineColor = Color.defaultLine;
+            else if(Array.isArray(markerLine.color)) lineColor = marker.color[i];
             else lineColor = markerLine.color;
 
             if('mc' in d) fillColor = d.mcc = markerScale(d.mc);
-            else if(Array.isArray(marker.color)) fillColor = Color.defaultLine;
+            else if(Array.isArray(marker.color)) fillColor = marker.color[i];
             else fillColor = marker.color || 'rgba(0,0,0,0)';
         }
 

src/components/errorbars/plot.js

@@ -14,12 +14,17 @@ var isNumeric = require('fast-isnumeric');
 
 var Lib = require('../../lib');
 var subTypes = require('../../traces/scatter/subtypes');
+var styleError = require('./style');
 
 
-module.exports = function plot(traces, plotinfo) {
+module.exports = function plot(traces, plotinfo, transitionConfig) {
     var xa = plotinfo.x(),
         ya = plotinfo.y();
 
+
+    transitionConfig = transitionConfig || {};
+    var hasAnimation = isNumeric(transitionConfig.duration) && transitionConfig.duration > 0
+
     traces.each(function(d) {
         var trace = d[0].trace,
             // || {} is in case the trace (specifically scatterternary)
@@ -29,19 +34,37 @@ module.exports = function plot(traces, plotinfo) {
             xObj = trace.error_x || {},
             yObj = trace.error_y || {};
 
+        var keyFunc;
+
+        if (trace.key) {
+            keyFunc = function (d) { return d.key };
+        }
+
         var sparse = (
             subTypes.hasMarkers(trace) &&
             trace.marker.maxdisplayed > 0
         );
 
         if(!yObj.visible && !xObj.visible) return;
 
+
         var errorbars = d3.select(this).selectAll('g.errorbar')
-            .data(Lib.identity);
+            .data(Lib.identity, keyFunc);
 
         errorbars.enter().append('g')
             .classed('errorbar', true);
 
+        if (hasAnimation) {
+            errorbars.exit()
+                .style('opacity', 1)
+                .transition()
+                    .duration(transitionConfig.duration)
+                    .style('opacity', 0)
+                    .remove();
+        } else {
+            errorbars.exit().remove();
+        }
+
         errorbars.each(function(d) {
             var errorbar = d3.select(this);
             var coords = errorCoords(d, xa, ya);
@@ -59,14 +82,37 @@ module.exports = function plot(traces, plotinfo) {
                     coords.yh + 'h' + (2 * yw) + // hat
                     'm-' + yw + ',0V' + coords.ys; // bar
 
+
                 if(!coords.noYS) path += 'm-' + yw + ',0h' + (2 * yw); // shoe
 
-                errorbar.append('path')
-                    .classed('yerror', true)
-                    .attr('d', path);
+                var yerror = errorbar.select('path.yerror');
+
+                var isNew = !yerror.size();
+
+                if (isNew) {
+                    yerror = errorbar.append('path')
+                        .classed('yerror', true);
+
+                    if (hasAnimation) {
+                        yerror = yerror.style('opacity', 0);
+                    }
+                } else if (hasAnimation) {
+                    yerror = yerror.transition()
+                        .duration(transitionConfig.duration)
+                        .ease(transitionConfig.easing)
+                        .delay(transitionConfig.delay)
+                }
+
+                yerror.attr('d', path);
+
+                if (isNew && hasAnimation) {
+                    yerror = yerror.transition()
+                        .duration(transitionConfig.duration)
+                        .style('opacity', 1);
+                }
             }
 
-            if(xObj.visible && isNumeric(coords.y) &&
+            if(xObj.visible && isNumeric(coords.x) &&
                     isNumeric(coords.xh) &&
                     isNumeric(coords.xs)) {
                 var xw = (xObj.copy_ystyle ? yObj : xObj).width;
@@ -77,11 +123,35 @@ module.exports = function plot(traces, plotinfo) {
 
                 if(!coords.noXS) path += 'm0,-' + xw + 'v' + (2 * xw); // shoe
 
-                errorbar.append('path')
-                    .classed('xerror', true)
-                    .attr('d', path);
+                var xerror = errorbar.select('path.xerror');
+
+                var isNew = !xerror.size();
+
+                if (isNew) {
+                    xerror = errorbar.append('path')
+                        .classed('xerror', true);
+
+                    if (hasAnimation) {
+                        xerror = xerror.style('opacity', 0);
+                    }
+                } else if (hasAnimation) {
+                    xerror = xerror.transition()
+                        .duration(transitionConfig.duration)
+                        .ease(transitionConfig.easing)
+                        .delay(transitionConfig.delay)
+                }
+
+                xerror.attr('d', path);
+
+                if (isNew && hasAnimation) {
+                    xerror = xerror.transition()
+                        .duration(transitionConfig.duration)
+                        .style('opacity', 1);
+                }
             }
         });
+
+        d3.select(this).call(styleError);
     });
 };
 

src/core.js

@@ -21,6 +21,7 @@ exports.version = '1.13.0';
 exports.plot = Plotly.plot;
 exports.newPlot = Plotly.newPlot;
 exports.restyle = Plotly.restyle;
+exports.animate = Plotly.animate;
 exports.relayout = Plotly.relayout;
 exports.redraw = Plotly.redraw;
 exports.extendTraces = Plotly.extendTraces;

src/lib/index.js

@@ -585,3 +585,89 @@ lib.numSeparate = function(value, separators) {
 
     return x1 + x2;
 };
+
+/*
+ * Deep copy of an object, subject to some caveats. Adapted from
+ * http://stackoverflow.com/questions/10728412/in-javascript-when-performing-a-deep-copy-how-do-i-avoid-a-cycle-due-to-a-pro#answer-10729242
+ *
+ * It does some basics like avoiding infinite loops, but leaves some gaps
+ * regarding prototypes and functions. But those shouldn't be part of the
+ * layout anyway, which is the intended use.
+ *
+ * @param   {object}    object         the object to be cloned
+ * @param   {function}  shallowFilter  a callback executed on each attribute name
+ * @param   {Array}     path           a stack representing the current attr path
+ *
+ * @return  {object}    the cloned object
+ */
+lib.deepClone = function deepClone (object, shallowFilter, path) {
+    var nextPath, isShallow;
+    var gdcc = "__getDeepCircularCopy__";
+    if (object !== Object(object)) {
+        return object; // primitive value
+    }
+
+    var set = gdcc in object;
+    var cache = object[gdcc];
+    var result;
+    if (set && typeof cache == "function") {
+        return cache();
+    }
+    // else
+    object[gdcc] = function () { return result; }; // overwrite
+
+    if (object instanceof Array) {
+        result = [];
+        for (var i=0; i<object.length; i++) {
+            nextPath = path ? (path + '.' + i) : i;
+            result[i] = deepClone(object[i], shallowFilter, nextPath);
+        }
+    } else {
+        result = {};
+        for (var attr in object) {
+            nextPath = path ? (path + '.' + attr) : attr;
+
+            if (attr !== gdcc) {
+                isShallow = shallowFilter && shallowFilter(nextPath);
+
+                if (isShallow) {
+                    result[attr] = object[attr];
+                } else {
+                    result[attr] = deepClone(object[attr], shallowFilter, nextPath);
+                }
+            } else if (set) {
+                result[attr] = deepClone(cache, shallowFilter, nextPath);
+            }
+        }
+    }
+    if (set) {
+        object[gdcc] = cache; // reset
+    } else {
+        delete object[gdcc]; // unset again
+    }
+    return result;
+};
+
+/*
+ * Deep copy of a trace, excluding deep copies of data arrays, to which the
+ * original reference is preserved.
+ *
+ * @param   {object}    trace    the trace to copy
+ * @param   {object}    schema   the corresponding schema, e.g.
+ *                               Plotly.PlotSchema.get().traces['scatter']
+ *
+ * @return  {object}    the cloned trace
+ */
+lib.deepCloneTrace = function deepCloneTrace (trace, schema) {
+    // This is intentionally allowed to fail if the schema is bad because
+    // the schema shouldn't be bad:
+    //
+    // var attrs = (!!schema ? schema.attributes : {}) || {};
+    //
+    var attrs = schema.attributes;
+
+    return lib.deepClone(trace, function (attr) {
+        var props = lib.nestedProperty(attrs, attr).get();
+        return props && props.valType === 'data_array';
+    });
+};