Animate API

src/components/color/index.js

@@ -74,7 +74,10 @@ color.stroke = function(s, c) {
 
 color.fill = function(s, c) {
  var tc = tinycolor(c);
- s.style({'fill': color.tinyRGB(tc), 'fill-opacity': tc.getAlpha()});
+ s.style({
+ 'fill': color.tinyRGB(tc),
+ 'fill-opacity': tc.getAlpha()
+ });
 };
 
 // search container for colors with the deprecated rgb(fractions) format

src/components/drawing/index.js

@@ -46,18 +46,26 @@ 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) {
- // 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 + ')');
+drawing.translatePoint = function(d, sel, xa, ya) {
+ // 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);
+
+ if(isNumeric(x) && isNumeric(y)) {
+ // for multiline text this works better
+ if(this.nodeName === 'text') {
+ sel.node().attr('x', x).attr('y', y);
+ } else {
+ sel.attr('transform', 'translate(' + x + ',' + y + ')');
  }
- else p.remove();
+ }
+ else sel.remove();
+};
+
+drawing.translatePoints = function(s, xa, ya, trace) {
+ s.each(function(d) {
+ var sel = d3.select(this);
+ drawing.translatePoint(d, sel, xa, ya, trace);
  });
 };
 
@@ -80,6 +88,16 @@ drawing.crispRound = function(td, lineWidth, dflt) {
  return Math.round(lineWidth);
 };
 
+drawing.singleLineStyle = function(d, s, lw, lc, ld) {
+ s.style('fill', 'none');
+ var line = (((d || [])[0] || {}).trace || {}).line || {},
+ lw1 = lw || line.width||0,
+ dash = ld || line.dash || '';
+
+ Color.stroke(s, lc || line.color);
+ drawing.dashLine(s, dash, lw1);
+};
+
 drawing.lineGroupStyle = function(s, lw, lc, ld) {
  s.style('fill', 'none')
  .each(function(d) {
@@ -175,18 +193,13 @@ drawing.symbolNumber = function(v) {
  return Math.floor(Math.max(v, 0));
 };
 
-drawing.pointStyle = function(s, trace) {
- if(!s.size()) return;
-
- var marker = trace.marker,
- markerLine = marker.line;
-
+function singlePointStyle(d, sel, trace, markerScale, lineScale, marker, markerLine) {
  // only scatter & box plots get marker path and opacity
  // bars, histograms don't
  if(Registry.traceIs(trace, 'symbols')) {
  var sizeFn = makeBubbleSizeFn(trace);
 
-s.attr('d', function(d) {
+sel.attr('d', function(d) {
  var r;
 
  // handle multi-trace graph edit case
@@ -212,54 +225,75 @@ drawing.pointStyle = function(s, trace) {
  return (d.mo + 1 || marker.opacity + 1) - 1;
  });
  }
+
+ // 'so' is suspected outliers, for box plots
+ var fillColor,
+ lineColor,
+ lineWidth;
+ if(d.so) {
+ lineWidth = markerLine.outlierwidth;
+ lineColor = markerLine.outliercolor;
+ fillColor = marker.outliercolor;
+ }
+ else {
+ lineWidth = (d.mlw + 1 || markerLine.width + 1 ||
+ // TODO: we need the latter for legends... can we get rid of it?
+ (d.trace ? d.trace.marker.line.width : 0) + 1) - 1;
+
+ 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 lineColor = markerLine.color;
+
+ if('mc' in d) fillColor = d.mcc = markerScale(d.mc);
+ else if(Array.isArray(marker.color)) fillColor = Color.defaultLine;
+ else fillColor = marker.color || 'rgba(0,0,0,0)';
+ }
+
+ if(d.om) {
+ // open markers can't have zero linewidth, default to 1px,
+ // and use fill color as stroke color
+ sel.call(Color.stroke, fillColor)
+ .style({
+ 'stroke-width': (lineWidth || 1) + 'px',
+ fill: 'none'
+ });
+ }
+ else {
+ sel.style('stroke-width', lineWidth + 'px')
+ .call(Color.fill, fillColor);
+ if(lineWidth) {
+ sel.call(Color.stroke, lineColor);
+ }
+ }
+}
+
+drawing.singlePointStyle = function(d, sel, trace) {
+ var marker = trace.marker,
+ markerLine = marker.line;
+
  // allow array marker and marker line colors to be
  // scaled by given max and min to colorscales
  var markerIn = (trace._input || {}).marker || {},
  markerScale = drawing.tryColorscale(marker, markerIn, ''),
  lineScale = drawing.tryColorscale(marker, markerIn, 'line.');
 
- s.each(function(d) {
- // 'so' is suspected outliers, for box plots
- var fillColor,
- lineColor,
- lineWidth;
- if(d.so) {
- lineWidth = markerLine.outlierwidth;
- lineColor = markerLine.outliercolor;
- fillColor = marker.outliercolor;
- }
- else {
- lineWidth = (d.mlw + 1 || markerLine.width + 1 ||
- // TODO: we need the latter for legends... can we get rid of it?
- (d.trace ? d.trace.marker.line.width : 0) + 1) - 1;
-
- 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 lineColor = markerLine.color;
-
- if('mc' in d) fillColor = d.mcc = markerScale(d.mc);
- else if(Array.isArray(marker.color)) fillColor = Color.defaultLine;
- else fillColor = marker.color || 'rgba(0,0,0,0)';
- }
+ singlePointStyle(d, sel, trace, markerScale, lineScale, marker, markerLine);
 
- var p = d3.select(this);
- if(d.om) {
- // open markers can't have zero linewidth, default to 1px,
- // and use fill color as stroke color
- p.call(Color.stroke, fillColor)
- .style({
- 'stroke-width': (lineWidth || 1) + 'px',
- fill: 'none'
- });
- }
- else {
- p.style('stroke-width', lineWidth + 'px')
- .call(Color.fill, fillColor);
- if(lineWidth) {
- p.call(Color.stroke, lineColor);
- }
- }
+};
+
+drawing.pointStyle = function(s, trace) {
+ if(!s.size()) return;
+
+ // allow array marker and marker line colors to be
+ // scaled by given max and min to colorscales
+ var marker = trace.marker;
+ var markerIn = (trace._input || {}).marker || {},
+ markerScale = drawing.tryColorscale(marker, markerIn, ''),
+ lineScale = drawing.tryColorscale(marker, markerIn, 'line.');
+
+ s.each(function(d) {
+ drawing.singlePointStyle(d, d3.select(this), trace, markerScale, lineScale);
  });
 };
 

src/components/errorbars/plot.js

@@ -12,14 +12,15 @@
 var d3 = require('d3');
 var isNumeric = require('fast-isnumeric');
 
-var Lib = require('../../lib');
 var subTypes = require('../../traces/scatter/subtypes');
 
-
-module.exports = function plot(traces, plotinfo) {
+module.exports = function plot(traces, plotinfo, transitionOpts) {
+ var isNew;
  var xa = plotinfo.x(),
  ya = plotinfo.y();
 
+ var hasAnimation = transitionOpts && transitionOpts.duration > 0;
+
  traces.each(function(d) {
  var trace = d[0].trace,
  // || {} is in case the trace (specifically scatterternary)
@@ -29,6 +30,12 @@ module.exports = function plot(traces, plotinfo) {
  xObj = trace.error_x || {},
  yObj = trace.error_y || {};
 
+ var keyFunc;
+
+ if(trace.ids) {
+ keyFunc = function(d) {return d.id;};
+ }
+
  var sparse = (
  subTypes.hasMarkers(trace) &&
  trace.marker.maxdisplayed > 0
@@ -37,11 +44,21 @@ module.exports = function plot(traces, plotinfo) {
  if(!yObj.visible && !xObj.visible) return;
 
  var errorbars = d3.select(this).selectAll('g.errorbar')
- .data(Lib.identity);
+ .data(d, keyFunc);
+
+ errorbars.exit().remove();
 
- errorbars.enter().append('g')
+ errorbars.style('opacity', 1);
+
+ var enter = errorbars.enter().append('g')
  .classed('errorbar', true);
 
+ if(hasAnimation) {
+ enter.style('opacity', 0).transition()
+ .duration(transitionOpts.duration)
+ .style('opacity', 1);
+ }
+
  errorbars.each(function(d) {
  var errorbar = d3.select(this);
  var coords = errorCoords(d, xa, ya);
@@ -59,11 +76,24 @@ 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');
+
+ isNew = !yerror.size();
+
+ if(isNew) {
+ yerror = errorbar.append('path')
+ .classed('yerror', true);
+ } else if(hasAnimation) {
+ yerror = yerror
+ .transition()
+ .duration(transitionOpts.duration)
+ .ease(transitionOpts.easing);
+ }
+
+ yerror.attr('d', path);
  }
 
  if(xObj.visible && isNumeric(coords.y) &&
@@ -77,9 +107,21 @@ 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');
+
+ isNew = !xerror.size();
+
+ if(isNew) {
+ xerror = errorbar.append('path')
+ .classed('xerror', true);
+ } else if(hasAnimation) {
+ xerror = xerror
+ .transition()
+ .duration(transitionOpts.duration)
+ .ease(transitionOpts.easing);
+ }
+
+ xerror.attr('d', path);
  }
  });
  });

src/components/updatemenus/attributes.js

@@ -17,7 +17,7 @@ var buttonsAttrs = {
 
  method: {
  valType: 'enumerated',
- values: ['restyle', 'relayout'],
+ values: ['restyle', 'relayout', 'animate'],
  dflt: 'restyle',
  role: 'info',
  description: [

src/core.js

@@ -43,6 +43,9 @@ exports.register = require('./plot_api/register');
 exports.toImage = require('./plot_api/to_image');
 exports.downloadImage = require('./snapshot/download');
 exports.validate = require('./plot_api/validate');
+exports.addFrames = Plotly.addFrames;
+exports.deleteFrames = Plotly.deleteFrames;
+exports.animate = Plotly.animate;
 
 // scatter is the only trace included by default
 exports.register(require('./traces/scatter'));

src/lib/index.js

@@ -577,6 +577,40 @@ lib.objectFromPath = function(path, value) {
  return obj;
 };
 
+/**
+ * Iterate through an object in-place, converting dotted properties to objects.
+ *
+ * @example
+ * lib.expandObjectPaths({'nested.test.path': 'value'});
+ * // returns { nested: { test: {path: 'value'}}}
+ */
+
+// Store this to avoid recompiling regex on every prop since this may happen many
+// many times for animations.
+// TODO: Premature optimization? Remove?
+var dottedPropertyRegex = /^([^\.]*)\../;
+
+lib.expandObjectPaths = function(data) {
+ var match, key, prop, datum;
+ if(typeof data === 'object' && !Array.isArray(data)) {
+ for(key in data) {
+ if(data.hasOwnProperty(key)) {
+ if((match = key.match(dottedPropertyRegex))) {
+ datum = data[key];
+ prop = match[1];
+
+ delete data[key];
+
+ data[prop] = lib.extendDeepNoArrays(data[prop] || {}, lib.objectFromPath(key, lib.expandObjectPaths(datum))[prop]);
+ } else {
+ data[key] = lib.expandObjectPaths(data[key]);
+ }
+ }
+ }
+ }
+ return data;
+};
+
 /**
  * Converts value to string separated by the provided separators.
  *

src/components/color/index.js

@@ -74,7 +74,10 @@ color.stroke = function(s, c) {
 
 color.fill = function(s, c) {
  var tc = tinycolor(c);
- s.style({'fill': color.tinyRGB(tc), 'fill-opacity': tc.getAlpha()});
+ s.style({
+ 'fill': color.tinyRGB(tc),
+ 'fill-opacity': tc.getAlpha()
+ });
 };
 
 // search container for colors with the deprecated rgb(fractions) format

src/components/drawing/index.js

@@ -46,18 +46,26 @@ 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) {
- // 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 + ')');
+drawing.translatePoint = function(d, sel, xa, ya) {
+ // 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);
+
+ if(isNumeric(x) && isNumeric(y)) {
+ // for multiline text this works better
+ if(this.nodeName === 'text') {
+ sel.node().attr('x', x).attr('y', y);
+ } else {
+ sel.attr('transform', 'translate(' + x + ',' + y + ')');
  }
- else p.remove();
+ }
+ else sel.remove();
+};
+
+drawing.translatePoints = function(s, xa, ya, trace) {
+ s.each(function(d) {
+ var sel = d3.select(this);
+ drawing.translatePoint(d, sel, xa, ya, trace);
  });
 };
 
@@ -80,6 +88,16 @@ drawing.crispRound = function(td, lineWidth, dflt) {
  return Math.round(lineWidth);
 };
 
+drawing.singleLineStyle = function(d, s, lw, lc, ld) {
+ s.style('fill', 'none');
+ var line = (((d || [])[0] || {}).trace || {}).line || {},
+ lw1 = lw || line.width||0,
+ dash = ld || line.dash || '';
+
+ Color.stroke(s, lc || line.color);
+ drawing.dashLine(s, dash, lw1);
+};
+
 drawing.lineGroupStyle = function(s, lw, lc, ld) {
  s.style('fill', 'none')
  .each(function(d) {
@@ -175,18 +193,13 @@ drawing.symbolNumber = function(v) {
  return Math.floor(Math.max(v, 0));
 };
 
-drawing.pointStyle = function(s, trace) {
- if(!s.size()) return;
-
- var marker = trace.marker,
- markerLine = marker.line;
-
+function singlePointStyle(d, sel, trace, markerScale, lineScale, marker, markerLine) {
  // only scatter & box plots get marker path and opacity
  // bars, histograms don't
  if(Registry.traceIs(trace, 'symbols')) {
  var sizeFn = makeBubbleSizeFn(trace);
 
-s.attr('d', function(d) {
+sel.attr('d', function(d) {
  var r;
 
  // handle multi-trace graph edit case
@@ -212,54 +225,75 @@ drawing.pointStyle = function(s, trace) {
  return (d.mo + 1 || marker.opacity + 1) - 1;
  });
  }
+
+ // 'so' is suspected outliers, for box plots
+ var fillColor,
+ lineColor,
+ lineWidth;
+ if(d.so) {
+ lineWidth = markerLine.outlierwidth;
+ lineColor = markerLine.outliercolor;
+ fillColor = marker.outliercolor;
+ }
+ else {
+ lineWidth = (d.mlw + 1 || markerLine.width + 1 ||
+ // TODO: we need the latter for legends... can we get rid of it?
+ (d.trace ? d.trace.marker.line.width : 0) + 1) - 1;
+
+ 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 lineColor = markerLine.color;
+
+ if('mc' in d) fillColor = d.mcc = markerScale(d.mc);
+ else if(Array.isArray(marker.color)) fillColor = Color.defaultLine;
+ else fillColor = marker.color || 'rgba(0,0,0,0)';
+ }
+
+ if(d.om) {
+ // open markers can't have zero linewidth, default to 1px,
+ // and use fill color as stroke color
+ sel.call(Color.stroke, fillColor)
+ .style({
+ 'stroke-width': (lineWidth || 1) + 'px',
+ fill: 'none'
+ });
+ }
+ else {
+ sel.style('stroke-width', lineWidth + 'px')
+ .call(Color.fill, fillColor);
+ if(lineWidth) {
+ sel.call(Color.stroke, lineColor);
+ }
+ }
+}
+
+drawing.singlePointStyle = function(d, sel, trace) {
+ var marker = trace.marker,
+ markerLine = marker.line;
+
  // allow array marker and marker line colors to be
  // scaled by given max and min to colorscales
  var markerIn = (trace._input || {}).marker || {},
  markerScale = drawing.tryColorscale(marker, markerIn, ''),
  lineScale = drawing.tryColorscale(marker, markerIn, 'line.');
 
- s.each(function(d) {
- // 'so' is suspected outliers, for box plots
- var fillColor,
- lineColor,
- lineWidth;
- if(d.so) {
- lineWidth = markerLine.outlierwidth;
- lineColor = markerLine.outliercolor;
- fillColor = marker.outliercolor;
- }
- else {
- lineWidth = (d.mlw + 1 || markerLine.width + 1 ||
- // TODO: we need the latter for legends... can we get rid of it?
- (d.trace ? d.trace.marker.line.width : 0) + 1) - 1;
-
- 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 lineColor = markerLine.color;
-
- if('mc' in d) fillColor = d.mcc = markerScale(d.mc);
- else if(Array.isArray(marker.color)) fillColor = Color.defaultLine;
- else fillColor = marker.color || 'rgba(0,0,0,0)';
- }
+ singlePointStyle(d, sel, trace, markerScale, lineScale, marker, markerLine);
 
- var p = d3.select(this);
- if(d.om) {
- // open markers can't have zero linewidth, default to 1px,
- // and use fill color as stroke color
- p.call(Color.stroke, fillColor)
- .style({
- 'stroke-width': (lineWidth || 1) + 'px',
- fill: 'none'
- });
- }
- else {
- p.style('stroke-width', lineWidth + 'px')
- .call(Color.fill, fillColor);
- if(lineWidth) {
- p.call(Color.stroke, lineColor);
- }
- }
+};
+
+drawing.pointStyle = function(s, trace) {
+ if(!s.size()) return;
+
+ // allow array marker and marker line colors to be
+ // scaled by given max and min to colorscales
+ var marker = trace.marker;
+ var markerIn = (trace._input || {}).marker || {},
+ markerScale = drawing.tryColorscale(marker, markerIn, ''),
+ lineScale = drawing.tryColorscale(marker, markerIn, 'line.');
+
+ s.each(function(d) {
+ drawing.singlePointStyle(d, d3.select(this), trace, markerScale, lineScale);
  });
 };
 

src/components/errorbars/plot.js

@@ -12,14 +12,15 @@
 var d3 = require('d3');
 var isNumeric = require('fast-isnumeric');
 
-var Lib = require('../../lib');
 var subTypes = require('../../traces/scatter/subtypes');
 
-
-module.exports = function plot(traces, plotinfo) {
+module.exports = function plot(traces, plotinfo, transitionOpts) {
+ var isNew;
  var xa = plotinfo.x(),
  ya = plotinfo.y();
 
+ var hasAnimation = transitionOpts && transitionOpts.duration > 0;
+
  traces.each(function(d) {
  var trace = d[0].trace,
  // || {} is in case the trace (specifically scatterternary)
@@ -29,6 +30,12 @@ module.exports = function plot(traces, plotinfo) {
  xObj = trace.error_x || {},
  yObj = trace.error_y || {};
 
+ var keyFunc;
+
+ if(trace.ids) {
+ keyFunc = function(d) {return d.id;};
+ }
+
  var sparse = (
  subTypes.hasMarkers(trace) &&
  trace.marker.maxdisplayed > 0
@@ -37,11 +44,21 @@ module.exports = function plot(traces, plotinfo) {
  if(!yObj.visible && !xObj.visible) return;
 
  var errorbars = d3.select(this).selectAll('g.errorbar')
- .data(Lib.identity);
+ .data(d, keyFunc);
+
+ errorbars.exit().remove();
 
- errorbars.enter().append('g')
+ errorbars.style('opacity', 1);
+
+ var enter = errorbars.enter().append('g')
  .classed('errorbar', true);
 
+ if(hasAnimation) {
+ enter.style('opacity', 0).transition()
+ .duration(transitionOpts.duration)
+ .style('opacity', 1);
+ }
+
  errorbars.each(function(d) {
  var errorbar = d3.select(this);
  var coords = errorCoords(d, xa, ya);
@@ -59,11 +76,24 @@ 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');
+
+ isNew = !yerror.size();
+
+ if(isNew) {
+ yerror = errorbar.append('path')
+ .classed('yerror', true);
+ } else if(hasAnimation) {
+ yerror = yerror
+ .transition()
+ .duration(transitionOpts.duration)
+ .ease(transitionOpts.easing);
+ }
+
+ yerror.attr('d', path);
  }
 
  if(xObj.visible && isNumeric(coords.y) &&
@@ -77,9 +107,21 @@ 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');
+
+ isNew = !xerror.size();
+
+ if(isNew) {
+ xerror = errorbar.append('path')
+ .classed('xerror', true);
+ } else if(hasAnimation) {
+ xerror = xerror
+ .transition()
+ .duration(transitionOpts.duration)
+ .ease(transitionOpts.easing);
+ }
+
+ xerror.attr('d', path);
  }
  });
  });

src/components/updatemenus/attributes.js

@@ -17,7 +17,7 @@ var buttonsAttrs = {
 
  method: {
  valType: 'enumerated',
- values: ['restyle', 'relayout'],
+ values: ['restyle', 'relayout', 'animate'],
  dflt: 'restyle',
  role: 'info',
  description: [

src/core.js

@@ -43,6 +43,9 @@ exports.register = require('./plot_api/register');
 exports.toImage = require('./plot_api/to_image');
 exports.downloadImage = require('./snapshot/download');
 exports.validate = require('./plot_api/validate');
+exports.addFrames = Plotly.addFrames;
+exports.deleteFrames = Plotly.deleteFrames;
+exports.animate = Plotly.animate;
 
 // scatter is the only trace included by default
 exports.register(require('./traces/scatter'));

src/lib/index.js

@@ -577,6 +577,40 @@ lib.objectFromPath = function(path, value) {
  return obj;
 };
 
+/**
+ * Iterate through an object in-place, converting dotted properties to objects.
+ *
+ * @example
+ * lib.expandObjectPaths({'nested.test.path': 'value'});
+ * // returns { nested: { test: {path: 'value'}}}
+ */
+
+// Store this to avoid recompiling regex on every prop since this may happen many
+// many times for animations.
+// TODO: Premature optimization? Remove?
+var dottedPropertyRegex = /^([^\.]*)\../;
+
+lib.expandObjectPaths = function(data) {
+ var match, key, prop, datum;
+ if(typeof data === 'object' && !Array.isArray(data)) {
+ for(key in data) {
+ if(data.hasOwnProperty(key)) {
+ if((match = key.match(dottedPropertyRegex))) {
+ datum = data[key];
+ prop = match[1];
+
+ delete data[key];
+
+ data[prop] = lib.extendDeepNoArrays(data[prop] || {}, lib.objectFromPath(key, lib.expandObjectPaths(datum))[prop]);
+ } else {
+ data[key] = lib.expandObjectPaths(data[key]);
+ }
+ }
+ }
+ }
+ return data;
+};
+
 /**
  * Converts value to string separated by the provided separators.
  *

src/components/color/index.js

@@ -74,7 +74,10 @@ color.stroke = function(s, c) {
 
 color.fill = function(s, c) {
  var tc = tinycolor(c);
- s.style({'fill': color.tinyRGB(tc), 'fill-opacity': tc.getAlpha()});
+ s.style({
+ 'fill': color.tinyRGB(tc),
+ 'fill-opacity': tc.getAlpha()
+ });
 };
 
 // search container for colors with the deprecated rgb(fractions) format

src/components/drawing/index.js

@@ -46,18 +46,26 @@ 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) {
- // 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 + ')');
+drawing.translatePoint = function(d, sel, xa, ya) {
+ // 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);
+
+ if(isNumeric(x) && isNumeric(y)) {
+ // for multiline text this works better
+ if(this.nodeName === 'text') {
+ sel.node().attr('x', x).attr('y', y);
+ } else {
+ sel.attr('transform', 'translate(' + x + ',' + y + ')');
  }
- else p.remove();
+ }
+ else sel.remove();
+};
+
+drawing.translatePoints = function(s, xa, ya, trace) {
+ s.each(function(d) {
+ var sel = d3.select(this);
+ drawing.translatePoint(d, sel, xa, ya, trace);
  });
 };
 
@@ -80,6 +88,16 @@ drawing.crispRound = function(td, lineWidth, dflt) {
  return Math.round(lineWidth);
 };
 
+drawing.singleLineStyle = function(d, s, lw, lc, ld) {
+ s.style('fill', 'none');
+ var line = (((d || [])[0] || {}).trace || {}).line || {},
+ lw1 = lw || line.width||0,
+ dash = ld || line.dash || '';
+
+ Color.stroke(s, lc || line.color);
+ drawing.dashLine(s, dash, lw1);
+};
+
 drawing.lineGroupStyle = function(s, lw, lc, ld) {
  s.style('fill', 'none')
  .each(function(d) {
@@ -175,18 +193,13 @@ drawing.symbolNumber = function(v) {
  return Math.floor(Math.max(v, 0));
 };
 
-drawing.pointStyle = function(s, trace) {
- if(!s.size()) return;
-
- var marker = trace.marker,
- markerLine = marker.line;
-
+function singlePointStyle(d, sel, trace, markerScale, lineScale, marker, markerLine) {
  // only scatter & box plots get marker path and opacity
  // bars, histograms don't
  if(Registry.traceIs(trace, 'symbols')) {
  var sizeFn = makeBubbleSizeFn(trace);
 
-s.attr('d', function(d) {
+sel.attr('d', function(d) {
  var r;
 
  // handle multi-trace graph edit case
@@ -212,54 +225,75 @@ drawing.pointStyle = function(s, trace) {
  return (d.mo + 1 || marker.opacity + 1) - 1;
  });
  }
+
+ // 'so' is suspected outliers, for box plots
+ var fillColor,
+ lineColor,
+ lineWidth;
+ if(d.so) {
+ lineWidth = markerLine.outlierwidth;
+ lineColor = markerLine.outliercolor;
+ fillColor = marker.outliercolor;
+ }
+ else {
+ lineWidth = (d.mlw + 1 || markerLine.width + 1 ||
+ // TODO: we need the latter for legends... can we get rid of it?
+ (d.trace ? d.trace.marker.line.width : 0) + 1) - 1;
+
+ 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 lineColor = markerLine.color;
+
+ if('mc' in d) fillColor = d.mcc = markerScale(d.mc);
+ else if(Array.isArray(marker.color)) fillColor = Color.defaultLine;
+ else fillColor = marker.color || 'rgba(0,0,0,0)';
+ }
+
+ if(d.om) {
+ // open markers can't have zero linewidth, default to 1px,
+ // and use fill color as stroke color
+ sel.call(Color.stroke, fillColor)
+ .style({
+ 'stroke-width': (lineWidth || 1) + 'px',
+ fill: 'none'
+ });
+ }
+ else {
+ sel.style('stroke-width', lineWidth + 'px')
+ .call(Color.fill, fillColor);
+ if(lineWidth) {
+ sel.call(Color.stroke, lineColor);
+ }
+ }
+}
+
+drawing.singlePointStyle = function(d, sel, trace) {
+ var marker = trace.marker,
+ markerLine = marker.line;
+
  // allow array marker and marker line colors to be
  // scaled by given max and min to colorscales
  var markerIn = (trace._input || {}).marker || {},
  markerScale = drawing.tryColorscale(marker, markerIn, ''),
  lineScale = drawing.tryColorscale(marker, markerIn, 'line.');
 
- s.each(function(d) {
- // 'so' is suspected outliers, for box plots
- var fillColor,
- lineColor,
- lineWidth;
- if(d.so) {
- lineWidth = markerLine.outlierwidth;
- lineColor = markerLine.outliercolor;
- fillColor = marker.outliercolor;
- }
- else {
- lineWidth = (d.mlw + 1 || markerLine.width + 1 ||
- // TODO: we need the latter for legends... can we get rid of it?
- (d.trace ? d.trace.marker.line.width : 0) + 1) - 1;
-
- 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 lineColor = markerLine.color;
-
- if('mc' in d) fillColor = d.mcc = markerScale(d.mc);
- else if(Array.isArray(marker.color)) fillColor = Color.defaultLine;
- else fillColor = marker.color || 'rgba(0,0,0,0)';
- }
+ singlePointStyle(d, sel, trace, markerScale, lineScale, marker, markerLine);
 
- var p = d3.select(this);
- if(d.om) {
- // open markers can't have zero linewidth, default to 1px,
- // and use fill color as stroke color
- p.call(Color.stroke, fillColor)
- .style({
- 'stroke-width': (lineWidth || 1) + 'px',
- fill: 'none'
- });
- }
- else {
- p.style('stroke-width', lineWidth + 'px')
- .call(Color.fill, fillColor);
- if(lineWidth) {
- p.call(Color.stroke, lineColor);
- }
- }
+};
+
+drawing.pointStyle = function(s, trace) {
+ if(!s.size()) return;
+
+ // allow array marker and marker line colors to be
+ // scaled by given max and min to colorscales
+ var marker = trace.marker;
+ var markerIn = (trace._input || {}).marker || {},
+ markerScale = drawing.tryColorscale(marker, markerIn, ''),
+ lineScale = drawing.tryColorscale(marker, markerIn, 'line.');
+
+ s.each(function(d) {
+ drawing.singlePointStyle(d, d3.select(this), trace, markerScale, lineScale);
  });
 };
 

src/components/errorbars/plot.js

@@ -12,14 +12,15 @@
 var d3 = require('d3');
 var isNumeric = require('fast-isnumeric');
 
-var Lib = require('../../lib');
 var subTypes = require('../../traces/scatter/subtypes');
 
-
-module.exports = function plot(traces, plotinfo) {
+module.exports = function plot(traces, plotinfo, transitionOpts) {
+ var isNew;
  var xa = plotinfo.x(),
  ya = plotinfo.y();
 
+ var hasAnimation = transitionOpts && transitionOpts.duration > 0;
+
  traces.each(function(d) {
  var trace = d[0].trace,
  // || {} is in case the trace (specifically scatterternary)
@@ -29,6 +30,12 @@ module.exports = function plot(traces, plotinfo) {
  xObj = trace.error_x || {},
  yObj = trace.error_y || {};
 
+ var keyFunc;
+
+ if(trace.ids) {
+ keyFunc = function(d) {return d.id;};
+ }
+
  var sparse = (
  subTypes.hasMarkers(trace) &&
  trace.marker.maxdisplayed > 0
@@ -37,11 +44,21 @@ module.exports = function plot(traces, plotinfo) {
  if(!yObj.visible && !xObj.visible) return;
 
  var errorbars = d3.select(this).selectAll('g.errorbar')
- .data(Lib.identity);
+ .data(d, keyFunc);
+
+ errorbars.exit().remove();
 
- errorbars.enter().append('g')
+ errorbars.style('opacity', 1);
+
+ var enter = errorbars.enter().append('g')
  .classed('errorbar', true);
 
+ if(hasAnimation) {
+ enter.style('opacity', 0).transition()
+ .duration(transitionOpts.duration)
+ .style('opacity', 1);
+ }
+
  errorbars.each(function(d) {
  var errorbar = d3.select(this);
  var coords = errorCoords(d, xa, ya);
@@ -59,11 +76,24 @@ 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');
+
+ isNew = !yerror.size();
+
+ if(isNew) {
+ yerror = errorbar.append('path')
+ .classed('yerror', true);
+ } else if(hasAnimation) {
+ yerror = yerror
+ .transition()
+ .duration(transitionOpts.duration)
+ .ease(transitionOpts.easing);
+ }
+
+ yerror.attr('d', path);
  }
 
  if(xObj.visible && isNumeric(coords.y) &&
@@ -77,9 +107,21 @@ 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');
+
+ isNew = !xerror.size();
+
+ if(isNew) {
+ xerror = errorbar.append('path')
+ .classed('xerror', true);
+ } else if(hasAnimation) {
+ xerror = xerror
+ .transition()
+ .duration(transitionOpts.duration)
+ .ease(transitionOpts.easing);
+ }
+
+ xerror.attr('d', path);
  }
  });
  });

src/components/updatemenus/attributes.js

@@ -17,7 +17,7 @@ var buttonsAttrs = {
 
  method: {
  valType: 'enumerated',
- values: ['restyle', 'relayout'],
+ values: ['restyle', 'relayout', 'animate'],
  dflt: 'restyle',
  role: 'info',
  description: [

src/core.js

@@ -43,6 +43,9 @@ exports.register = require('./plot_api/register');
 exports.toImage = require('./plot_api/to_image');
 exports.downloadImage = require('./snapshot/download');
 exports.validate = require('./plot_api/validate');
+exports.addFrames = Plotly.addFrames;
+exports.deleteFrames = Plotly.deleteFrames;
+exports.animate = Plotly.animate;
 
 // scatter is the only trace included by default
 exports.register(require('./traces/scatter'));

src/lib/index.js

@@ -577,6 +577,40 @@ lib.objectFromPath = function(path, value) {
  return obj;
 };
 
+/**
+ * Iterate through an object in-place, converting dotted properties to objects.
+ *
+ * @example
+ * lib.expandObjectPaths({'nested.test.path': 'value'});
+ * // returns { nested: { test: {path: 'value'}}}
+ */
+
+// Store this to avoid recompiling regex on every prop since this may happen many
+// many times for animations.
+// TODO: Premature optimization? Remove?
+var dottedPropertyRegex = /^([^\.]*)\../;
+
+lib.expandObjectPaths = function(data) {
+ var match, key, prop, datum;
+ if(typeof data === 'object' && !Array.isArray(data)) {
+ for(key in data) {
+ if(data.hasOwnProperty(key)) {
+ if((match = key.match(dottedPropertyRegex))) {
+ datum = data[key];
+ prop = match[1];
+
+ delete data[key];
+
+ data[prop] = lib.extendDeepNoArrays(data[prop] || {}, lib.objectFromPath(key, lib.expandObjectPaths(datum))[prop]);
+ } else {
+ data[key] = lib.expandObjectPaths(data[key]);
+ }
+ }
+ }
+ }
+ return data;
+};
+
 /**
  * Converts value to string separated by the provided separators.
  *

src/components/color/index.js

@@ -74,7 +74,10 @@ color.stroke = function(s, c) {
 
 color.fill = function(s, c) {
  var tc = tinycolor(c);
- s.style({'fill': color.tinyRGB(tc), 'fill-opacity': tc.getAlpha()});
+ s.style({
+ 'fill': color.tinyRGB(tc),
+ 'fill-opacity': tc.getAlpha()
+ });
 };
 
 // search container for colors with the deprecated rgb(fractions) format

src/components/drawing/index.js

@@ -46,18 +46,26 @@ 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) {
- // 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 + ')');
+drawing.translatePoint = function(d, sel, xa, ya) {
+ // 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);
+
+ if(isNumeric(x) && isNumeric(y)) {
+ // for multiline text this works better
+ if(this.nodeName === 'text') {
+ sel.node().attr('x', x).attr('y', y);
+ } else {
+ sel.attr('transform', 'translate(' + x + ',' + y + ')');
  }
- else p.remove();
+ }
+ else sel.remove();
+};
+
+drawing.translatePoints = function(s, xa, ya, trace) {
+ s.each(function(d) {
+ var sel = d3.select(this);
+ drawing.translatePoint(d, sel, xa, ya, trace);
  });
 };
 
@@ -80,6 +88,16 @@ drawing.crispRound = function(td, lineWidth, dflt) {
  return Math.round(lineWidth);
 };
 
+drawing.singleLineStyle = function(d, s, lw, lc, ld) {
+ s.style('fill', 'none');
+ var line = (((d || [])[0] || {}).trace || {}).line || {},
+ lw1 = lw || line.width||0,
+ dash = ld || line.dash || '';
+
+ Color.stroke(s, lc || line.color);
+ drawing.dashLine(s, dash, lw1);
+};
+
 drawing.lineGroupStyle = function(s, lw, lc, ld) {
  s.style('fill', 'none')
  .each(function(d) {
@@ -175,18 +193,13 @@ drawing.symbolNumber = function(v) {
  return Math.floor(Math.max(v, 0));
 };
 
-drawing.pointStyle = function(s, trace) {
- if(!s.size()) return;
-
- var marker = trace.marker,
- markerLine = marker.line;
-
+function singlePointStyle(d, sel, trace, markerScale, lineScale, marker, markerLine) {
  // only scatter & box plots get marker path and opacity
  // bars, histograms don't
  if(Registry.traceIs(trace, 'symbols')) {
  var sizeFn = makeBubbleSizeFn(trace);
 
-s.attr('d', function(d) {
+sel.attr('d', function(d) {
  var r;
 
  // handle multi-trace graph edit case
@@ -212,54 +225,75 @@ drawing.pointStyle = function(s, trace) {
  return (d.mo + 1 || marker.opacity + 1) - 1;
  });
  }
+
+ // 'so' is suspected outliers, for box plots
+ var fillColor,
+ lineColor,
+ lineWidth;
+ if(d.so) {
+ lineWidth = markerLine.outlierwidth;
+ lineColor = markerLine.outliercolor;
+ fillColor = marker.outliercolor;
+ }
+ else {
+ lineWidth = (d.mlw + 1 || markerLine.width + 1 ||
+ // TODO: we need the latter for legends... can we get rid of it?
+ (d.trace ? d.trace.marker.line.width : 0) + 1) - 1;
+
+ 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 lineColor = markerLine.color;
+
+ if('mc' in d) fillColor = d.mcc = markerScale(d.mc);
+ else if(Array.isArray(marker.color)) fillColor = Color.defaultLine;
+ else fillColor = marker.color || 'rgba(0,0,0,0)';
+ }
+
+ if(d.om) {
+ // open markers can't have zero linewidth, default to 1px,
+ // and use fill color as stroke color
+ sel.call(Color.stroke, fillColor)
+ .style({
+ 'stroke-width': (lineWidth || 1) + 'px',
+ fill: 'none'
+ });
+ }
+ else {
+ sel.style('stroke-width', lineWidth + 'px')
+ .call(Color.fill, fillColor);
+ if(lineWidth) {
+ sel.call(Color.stroke, lineColor);
+ }
+ }
+}
+
+drawing.singlePointStyle = function(d, sel, trace) {
+ var marker = trace.marker,
+ markerLine = marker.line;
+
  // allow array marker and marker line colors to be
  // scaled by given max and min to colorscales
  var markerIn = (trace._input || {}).marker || {},
  markerScale = drawing.tryColorscale(marker, markerIn, ''),
  lineScale = drawing.tryColorscale(marker, markerIn, 'line.');
 
- s.each(function(d) {
- // 'so' is suspected outliers, for box plots
- var fillColor,
- lineColor,
- lineWidth;
- if(d.so) {
- lineWidth = markerLine.outlierwidth;
- lineColor = markerLine.outliercolor;
- fillColor = marker.outliercolor;
- }
- else {
- lineWidth = (d.mlw + 1 || markerLine.width + 1 ||
- // TODO: we need the latter for legends... can we get rid of it?
- (d.trace ? d.trace.marker.line.width : 0) + 1) - 1;
-
- 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 lineColor = markerLine.color;
-
- if('mc' in d) fillColor = d.mcc = markerScale(d.mc);
- else if(Array.isArray(marker.color)) fillColor = Color.defaultLine;
- else fillColor = marker.color || 'rgba(0,0,0,0)';
- }
+ singlePointStyle(d, sel, trace, markerScale, lineScale, marker, markerLine);
 
- var p = d3.select(this);
- if(d.om) {
- // open markers can't have zero linewidth, default to 1px,
- // and use fill color as stroke color
- p.call(Color.stroke, fillColor)
- .style({
- 'stroke-width': (lineWidth || 1) + 'px',
- fill: 'none'
- });
- }
- else {
- p.style('stroke-width', lineWidth + 'px')
- .call(Color.fill, fillColor);
- if(lineWidth) {
- p.call(Color.stroke, lineColor);
- }
- }
+};
+
+drawing.pointStyle = function(s, trace) {
+ if(!s.size()) return;
+
+ // allow array marker and marker line colors to be
+ // scaled by given max and min to colorscales
+ var marker = trace.marker;
+ var markerIn = (trace._input || {}).marker || {},
+ markerScale = drawing.tryColorscale(marker, markerIn, ''),
+ lineScale = drawing.tryColorscale(marker, markerIn, 'line.');
+
+ s.each(function(d) {
+ drawing.singlePointStyle(d, d3.select(this), trace, markerScale, lineScale);
  });
 };
 

src/components/errorbars/plot.js

@@ -12,14 +12,15 @@
 var d3 = require('d3');
 var isNumeric = require('fast-isnumeric');
 
-var Lib = require('../../lib');
 var subTypes = require('../../traces/scatter/subtypes');
 
-
-module.exports = function plot(traces, plotinfo) {
+module.exports = function plot(traces, plotinfo, transitionOpts) {
+ var isNew;
  var xa = plotinfo.x(),
  ya = plotinfo.y();
 
+ var hasAnimation = transitionOpts && transitionOpts.duration > 0;
+
  traces.each(function(d) {
  var trace = d[0].trace,
  // || {} is in case the trace (specifically scatterternary)
@@ -29,6 +30,12 @@ module.exports = function plot(traces, plotinfo) {
  xObj = trace.error_x || {},
  yObj = trace.error_y || {};
 
+ var keyFunc;
+
+ if(trace.ids) {
+ keyFunc = function(d) {return d.id;};
+ }
+
  var sparse = (
  subTypes.hasMarkers(trace) &&
  trace.marker.maxdisplayed > 0
@@ -37,11 +44,21 @@ module.exports = function plot(traces, plotinfo) {
  if(!yObj.visible && !xObj.visible) return;
 
  var errorbars = d3.select(this).selectAll('g.errorbar')
- .data(Lib.identity);
+ .data(d, keyFunc);
+
+ errorbars.exit().remove();
 
- errorbars.enter().append('g')
+ errorbars.style('opacity', 1);
+
+ var enter = errorbars.enter().append('g')
  .classed('errorbar', true);
 
+ if(hasAnimation) {
+ enter.style('opacity', 0).transition()
+ .duration(transitionOpts.duration)
+ .style('opacity', 1);
+ }
+
  errorbars.each(function(d) {
  var errorbar = d3.select(this);
  var coords = errorCoords(d, xa, ya);
@@ -59,11 +76,24 @@ 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');
+
+ isNew = !yerror.size();
+
+ if(isNew) {
+ yerror = errorbar.append('path')
+ .classed('yerror', true);
+ } else if(hasAnimation) {
+ yerror = yerror
+ .transition()
+ .duration(transitionOpts.duration)
+ .ease(transitionOpts.easing);
+ }
+
+ yerror.attr('d', path);
  }
 
  if(xObj.visible && isNumeric(coords.y) &&
@@ -77,9 +107,21 @@ 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');
+
+ isNew = !xerror.size();
+
+ if(isNew) {
+ xerror = errorbar.append('path')
+ .classed('xerror', true);
+ } else if(hasAnimation) {
+ xerror = xerror
+ .transition()
+ .duration(transitionOpts.duration)
+ .ease(transitionOpts.easing);
+ }
+
+ xerror.attr('d', path);
  }
  });
  });

src/components/updatemenus/attributes.js

@@ -17,7 +17,7 @@ var buttonsAttrs = {
 
  method: {
  valType: 'enumerated',
- values: ['restyle', 'relayout'],
+ values: ['restyle', 'relayout', 'animate'],
  dflt: 'restyle',
  role: 'info',
  description: [

src/core.js

@@ -43,6 +43,9 @@ exports.register = require('./plot_api/register');
 exports.toImage = require('./plot_api/to_image');
 exports.downloadImage = require('./snapshot/download');
 exports.validate = require('./plot_api/validate');
+exports.addFrames = Plotly.addFrames;
+exports.deleteFrames = Plotly.deleteFrames;
+exports.animate = Plotly.animate;
 
 // scatter is the only trace included by default
 exports.register(require('./traces/scatter'));

src/lib/index.js

@@ -577,6 +577,40 @@ lib.objectFromPath = function(path, value) {
  return obj;
 };
 
+/**
+ * Iterate through an object in-place, converting dotted properties to objects.
+ *
+ * @example
+ * lib.expandObjectPaths({'nested.test.path': 'value'});
+ * // returns { nested: { test: {path: 'value'}}}
+ */
+
+// Store this to avoid recompiling regex on every prop since this may happen many
+// many times for animations.
+// TODO: Premature optimization? Remove?
+var dottedPropertyRegex = /^([^\.]*)\../;
+
+lib.expandObjectPaths = function(data) {
+ var match, key, prop, datum;
+ if(typeof data === 'object' && !Array.isArray(data)) {
+ for(key in data) {
+ if(data.hasOwnProperty(key)) {
+ if((match = key.match(dottedPropertyRegex))) {
+ datum = data[key];
+ prop = match[1];
+
+ delete data[key];
+
+ data[prop] = lib.extendDeepNoArrays(data[prop] || {}, lib.objectFromPath(key, lib.expandObjectPaths(datum))[prop]);
+ } else {
+ data[key] = lib.expandObjectPaths(data[key]);
+ }
+ }
+ }
+ }
+ return data;
+};
+
 /**
  * Converts value to string separated by the provided separators.
  *

src/components/color/index.js

@@ -74,7 +74,10 @@ color.stroke = function(s, c) {
 
 color.fill = function(s, c) {
  var tc = tinycolor(c);
- s.style({'fill': color.tinyRGB(tc), 'fill-opacity': tc.getAlpha()});
+ s.style({
+ 'fill': color.tinyRGB(tc),
+ 'fill-opacity': tc.getAlpha()
+ });
 };
 
 // search container for colors with the deprecated rgb(fractions) format

src/components/drawing/index.js

@@ -46,18 +46,26 @@ 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) {
- // 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 + ')');
+drawing.translatePoint = function(d, sel, xa, ya) {
+ // 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);
+
+ if(isNumeric(x) && isNumeric(y)) {
+ // for multiline text this works better
+ if(this.nodeName === 'text') {
+ sel.node().attr('x', x).attr('y', y);
+ } else {
+ sel.attr('transform', 'translate(' + x + ',' + y + ')');
  }
- else p.remove();
+ }
+ else sel.remove();
+};
+
+drawing.translatePoints = function(s, xa, ya, trace) {
+ s.each(function(d) {
+ var sel = d3.select(this);
+ drawing.translatePoint(d, sel, xa, ya, trace);
  });
 };
 
@@ -80,6 +88,16 @@ drawing.crispRound = function(td, lineWidth, dflt) {
  return Math.round(lineWidth);
 };
 
+drawing.singleLineStyle = function(d, s, lw, lc, ld) {
+ s.style('fill', 'none');
+ var line = (((d || [])[0] || {}).trace || {}).line || {},
+ lw1 = lw || line.width||0,
+ dash = ld || line.dash || '';
+
+ Color.stroke(s, lc || line.color);
+ drawing.dashLine(s, dash, lw1);
+};
+
 drawing.lineGroupStyle = function(s, lw, lc, ld) {
  s.style('fill', 'none')
  .each(function(d) {
@@ -175,18 +193,13 @@ drawing.symbolNumber = function(v) {
  return Math.floor(Math.max(v, 0));
 };
 
-drawing.pointStyle = function(s, trace) {
- if(!s.size()) return;
-
- var marker = trace.marker,
- markerLine = marker.line;
-
+function singlePointStyle(d, sel, trace, markerScale, lineScale, marker, markerLine) {
  // only scatter & box plots get marker path and opacity
  // bars, histograms don't
  if(Registry.traceIs(trace, 'symbols')) {
  var sizeFn = makeBubbleSizeFn(trace);
 
-s.attr('d', function(d) {
+sel.attr('d', function(d) {
  var r;
 
  // handle multi-trace graph edit case
@@ -212,54 +225,75 @@ drawing.pointStyle = function(s, trace) {
  return (d.mo + 1 || marker.opacity + 1) - 1;
  });
  }
+
+ // 'so' is suspected outliers, for box plots
+ var fillColor,
+ lineColor,
+ lineWidth;
+ if(d.so) {
+ lineWidth = markerLine.outlierwidth;
+ lineColor = markerLine.outliercolor;
+ fillColor = marker.outliercolor;
+ }
+ else {
+ lineWidth = (d.mlw + 1 || markerLine.width + 1 ||
+ // TODO: we need the latter for legends... can we get rid of it?
+ (d.trace ? d.trace.marker.line.width : 0) + 1) - 1;
+
+ 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 lineColor = markerLine.color;
+
+ if('mc' in d) fillColor = d.mcc = markerScale(d.mc);
+ else if(Array.isArray(marker.color)) fillColor = Color.defaultLine;
+ else fillColor = marker.color || 'rgba(0,0,0,0)';
+ }
+
+ if(d.om) {
+ // open markers can't have zero linewidth, default to 1px,
+ // and use fill color as stroke color
+ sel.call(Color.stroke, fillColor)
+ .style({
+ 'stroke-width': (lineWidth || 1) + 'px',
+ fill: 'none'
+ });
+ }
+ else {
+ sel.style('stroke-width', lineWidth + 'px')
+ .call(Color.fill, fillColor);
+ if(lineWidth) {
+ sel.call(Color.stroke, lineColor);
+ }
+ }
+}
+
+drawing.singlePointStyle = function(d, sel, trace) {
+ var marker = trace.marker,
+ markerLine = marker.line;
+
  // allow array marker and marker line colors to be
  // scaled by given max and min to colorscales
  var markerIn = (trace._input || {}).marker || {},
  markerScale = drawing.tryColorscale(marker, markerIn, ''),
  lineScale = drawing.tryColorscale(marker, markerIn, 'line.');
 
- s.each(function(d) {
- // 'so' is suspected outliers, for box plots
- var fillColor,
- lineColor,
- lineWidth;
- if(d.so) {
- lineWidth = markerLine.outlierwidth;
- lineColor = markerLine.outliercolor;
- fillColor = marker.outliercolor;
- }
- else {
- lineWidth = (d.mlw + 1 || markerLine.width + 1 ||
- // TODO: we need the latter for legends... can we get rid of it?
- (d.trace ? d.trace.marker.line.width : 0) + 1) - 1;
-
- 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 lineColor = markerLine.color;
-
- if('mc' in d) fillColor = d.mcc = markerScale(d.mc);
- else if(Array.isArray(marker.color)) fillColor = Color.defaultLine;
- else fillColor = marker.color || 'rgba(0,0,0,0)';
- }
+ singlePointStyle(d, sel, trace, markerScale, lineScale, marker, markerLine);
 
- var p = d3.select(this);
- if(d.om) {
- // open markers can't have zero linewidth, default to 1px,
- // and use fill color as stroke color
- p.call(Color.stroke, fillColor)
- .style({
- 'stroke-width': (lineWidth || 1) + 'px',
- fill: 'none'
- });
- }
- else {
- p.style('stroke-width', lineWidth + 'px')
- .call(Color.fill, fillColor);
- if(lineWidth) {
- p.call(Color.stroke, lineColor);
- }
- }
+};
+
+drawing.pointStyle = function(s, trace) {
+ if(!s.size()) return;
+
+ // allow array marker and marker line colors to be
+ // scaled by given max and min to colorscales
+ var marker = trace.marker;
+ var markerIn = (trace._input || {}).marker || {},
+ markerScale = drawing.tryColorscale(marker, markerIn, ''),
+ lineScale = drawing.tryColorscale(marker, markerIn, 'line.');
+
+ s.each(function(d) {
+ drawing.singlePointStyle(d, d3.select(this), trace, markerScale, lineScale);
  });
 };
 

src/components/errorbars/plot.js

@@ -12,14 +12,15 @@
 var d3 = require('d3');
 var isNumeric = require('fast-isnumeric');
 
-var Lib = require('../../lib');
 var subTypes = require('../../traces/scatter/subtypes');
 
-
-module.exports = function plot(traces, plotinfo) {
+module.exports = function plot(traces, plotinfo, transitionOpts) {
+ var isNew;
  var xa = plotinfo.x(),
  ya = plotinfo.y();
 
+ var hasAnimation = transitionOpts && transitionOpts.duration > 0;
+
  traces.each(function(d) {
  var trace = d[0].trace,
  // || {} is in case the trace (specifically scatterternary)
@@ -29,6 +30,12 @@ module.exports = function plot(traces, plotinfo) {
  xObj = trace.error_x || {},
  yObj = trace.error_y || {};
 
+ var keyFunc;
+
+ if(trace.ids) {
+ keyFunc = function(d) {return d.id;};
+ }
+
  var sparse = (
  subTypes.hasMarkers(trace) &&
  trace.marker.maxdisplayed > 0
@@ -37,11 +44,21 @@ module.exports = function plot(traces, plotinfo) {
  if(!yObj.visible && !xObj.visible) return;
 
  var errorbars = d3.select(this).selectAll('g.errorbar')
- .data(Lib.identity);
+ .data(d, keyFunc);
+
+ errorbars.exit().remove();
 
- errorbars.enter().append('g')
+ errorbars.style('opacity', 1);
+
+ var enter = errorbars.enter().append('g')
  .classed('errorbar', true);
 
+ if(hasAnimation) {
+ enter.style('opacity', 0).transition()
+ .duration(transitionOpts.duration)
+ .style('opacity', 1);
+ }
+
  errorbars.each(function(d) {
  var errorbar = d3.select(this);
  var coords = errorCoords(d, xa, ya);
@@ -59,11 +76,24 @@ 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');
+
+ isNew = !yerror.size();
+
+ if(isNew) {
+ yerror = errorbar.append('path')
+ .classed('yerror', true);
+ } else if(hasAnimation) {
+ yerror = yerror
+ .transition()
+ .duration(transitionOpts.duration)
+ .ease(transitionOpts.easing);
+ }
+
+ yerror.attr('d', path);
  }
 
  if(xObj.visible && isNumeric(coords.y) &&
@@ -77,9 +107,21 @@ 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');
+
+ isNew = !xerror.size();
+
+ if(isNew) {
+ xerror = errorbar.append('path')
+ .classed('xerror', true);
+ } else if(hasAnimation) {
+ xerror = xerror
+ .transition()
+ .duration(transitionOpts.duration)
+ .ease(transitionOpts.easing);
+ }
+
+ xerror.attr('d', path);
  }
  });
  });

src/components/updatemenus/attributes.js

@@ -17,7 +17,7 @@ var buttonsAttrs = {
 
  method: {
  valType: 'enumerated',
- values: ['restyle', 'relayout'],
+ values: ['restyle', 'relayout', 'animate'],
  dflt: 'restyle',
  role: 'info',
  description: [

src/core.js

@@ -43,6 +43,9 @@ exports.register = require('./plot_api/register');
 exports.toImage = require('./plot_api/to_image');
 exports.downloadImage = require('./snapshot/download');
 exports.validate = require('./plot_api/validate');
+exports.addFrames = Plotly.addFrames;
+exports.deleteFrames = Plotly.deleteFrames;
+exports.animate = Plotly.animate;
 
 // scatter is the only trace included by default
 exports.register(require('./traces/scatter'));

src/lib/index.js

@@ -577,6 +577,40 @@ lib.objectFromPath = function(path, value) {
  return obj;
 };
 
+/**
+ * Iterate through an object in-place, converting dotted properties to objects.
+ *
+ * @example
+ * lib.expandObjectPaths({'nested.test.path': 'value'});
+ * // returns { nested: { test: {path: 'value'}}}
+ */
+
+// Store this to avoid recompiling regex on every prop since this may happen many
+// many times for animations.
+// TODO: Premature optimization? Remove?
+var dottedPropertyRegex = /^([^\.]*)\../;
+
+lib.expandObjectPaths = function(data) {
+ var match, key, prop, datum;
+ if(typeof data === 'object' && !Array.isArray(data)) {
+ for(key in data) {
+ if(data.hasOwnProperty(key)) {
+ if((match = key.match(dottedPropertyRegex))) {
+ datum = data[key];
+ prop = match[1];
+
+ delete data[key];
+
+ data[prop] = lib.extendDeepNoArrays(data[prop] || {}, lib.objectFromPath(key, lib.expandObjectPaths(datum))[prop]);
+ } else {
+ data[key] = lib.expandObjectPaths(data[key]);
+ }
+ }
+ }
+ }
+ return data;
+};
+
 /**
  * Converts value to string separated by the provided separators.
  *

src/components/color/index.js

@@ -74,7 +74,10 @@ color.stroke = function(s, c) {
 
 color.fill = function(s, c) {
  var tc = tinycolor(c);
- s.style({'fill': color.tinyRGB(tc), 'fill-opacity': tc.getAlpha()});
+ s.style({
+ 'fill': color.tinyRGB(tc),
+ 'fill-opacity': tc.getAlpha()
+ });
 };
 
 // search container for colors with the deprecated rgb(fractions) format

src/components/drawing/index.js

@@ -46,18 +46,26 @@ 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) {
- // 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 + ')');
+drawing.translatePoint = function(d, sel, xa, ya) {
+ // 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);
+
+ if(isNumeric(x) && isNumeric(y)) {
+ // for multiline text this works better
+ if(this.nodeName === 'text') {
+ sel.node().attr('x', x).attr('y', y);
+ } else {
+ sel.attr('transform', 'translate(' + x + ',' + y + ')');
  }
- else p.remove();
+ }
+ else sel.remove();
+};
+
+drawing.translatePoints = function(s, xa, ya, trace) {
+ s.each(function(d) {
+ var sel = d3.select(this);
+ drawing.translatePoint(d, sel, xa, ya, trace);
  });
 };
 
@@ -80,6 +88,16 @@ drawing.crispRound = function(td, lineWidth, dflt) {
  return Math.round(lineWidth);
 };
 
+drawing.singleLineStyle = function(d, s, lw, lc, ld) {
+ s.style('fill', 'none');
+ var line = (((d || [])[0] || {}).trace || {}).line || {},
+ lw1 = lw || line.width||0,
+ dash = ld || line.dash || '';
+
+ Color.stroke(s, lc || line.color);
+ drawing.dashLine(s, dash, lw1);
+};
+
 drawing.lineGroupStyle = function(s, lw, lc, ld) {
  s.style('fill', 'none')
  .each(function(d) {
@@ -175,18 +193,13 @@ drawing.symbolNumber = function(v) {
  return Math.floor(Math.max(v, 0));
 };
 
-drawing.pointStyle = function(s, trace) {
- if(!s.size()) return;
-
- var marker = trace.marker,
- markerLine = marker.line;
-
+function singlePointStyle(d, sel, trace, markerScale, lineScale, marker, markerLine) {
  // only scatter & box plots get marker path and opacity
  // bars, histograms don't
  if(Registry.traceIs(trace, 'symbols')) {
  var sizeFn = makeBubbleSizeFn(trace);
 
-s.attr('d', function(d) {
+sel.attr('d', function(d) {
  var r;
 
  // handle multi-trace graph edit case
@@ -212,54 +225,75 @@ drawing.pointStyle = function(s, trace) {
  return (d.mo + 1 || marker.opacity + 1) - 1;
  });
  }
+
+ // 'so' is suspected outliers, for box plots
+ var fillColor,
+ lineColor,
+ lineWidth;
+ if(d.so) {
+ lineWidth = markerLine.outlierwidth;
+ lineColor = markerLine.outliercolor;
+ fillColor = marker.outliercolor;
+ }
+ else {
+ lineWidth = (d.mlw + 1 || markerLine.width + 1 ||
+ // TODO: we need the latter for legends... can we get rid of it?
+ (d.trace ? d.trace.marker.line.width : 0) + 1) - 1;
+
+ 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 lineColor = markerLine.color;
+
+ if('mc' in d) fillColor = d.mcc = markerScale(d.mc);
+ else if(Array.isArray(marker.color)) fillColor = Color.defaultLine;
+ else fillColor = marker.color || 'rgba(0,0,0,0)';
+ }
+
+ if(d.om) {
+ // open markers can't have zero linewidth, default to 1px,
+ // and use fill color as stroke color
+ sel.call(Color.stroke, fillColor)
+ .style({
+ 'stroke-width': (lineWidth || 1) + 'px',
+ fill: 'none'
+ });
+ }
+ else {
+ sel.style('stroke-width', lineWidth + 'px')
+ .call(Color.fill, fillColor);
+ if(lineWidth) {
+ sel.call(Color.stroke, lineColor);
+ }
+ }
+}
+
+drawing.singlePointStyle = function(d, sel, trace) {
+ var marker = trace.marker,
+ markerLine = marker.line;
+
  // allow array marker and marker line colors to be
  // scaled by given max and min to colorscales
  var markerIn = (trace._input || {}).marker || {},
  markerScale = drawing.tryColorscale(marker, markerIn, ''),
  lineScale = drawing.tryColorscale(marker, markerIn, 'line.');
 
- s.each(function(d) {
- // 'so' is suspected outliers, for box plots
- var fillColor,
- lineColor,
- lineWidth;
- if(d.so) {
- lineWidth = markerLine.outlierwidth;
- lineColor = markerLine.outliercolor;
- fillColor = marker.outliercolor;
- }
- else {
- lineWidth = (d.mlw + 1 || markerLine.width + 1 ||
- // TODO: we need the latter for legends... can we get rid of it?
- (d.trace ? d.trace.marker.line.width : 0) + 1) - 1;
-
- 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 lineColor = markerLine.color;
-
- if('mc' in d) fillColor = d.mcc = markerScale(d.mc);
- else if(Array.isArray(marker.color)) fillColor = Color.defaultLine;
- else fillColor = marker.color || 'rgba(0,0,0,0)';
- }
+ singlePointStyle(d, sel, trace, markerScale, lineScale, marker, markerLine);
 
- var p = d3.select(this);
- if(d.om) {
- // open markers can't have zero linewidth, default to 1px,
- // and use fill color as stroke color
- p.call(Color.stroke, fillColor)
- .style({
- 'stroke-width': (lineWidth || 1) + 'px',
- fill: 'none'
- });
- }
- else {
- p.style('stroke-width', lineWidth + 'px')
- .call(Color.fill, fillColor);
- if(lineWidth) {
- p.call(Color.stroke, lineColor);
- }
- }
+};
+
+drawing.pointStyle = function(s, trace) {
+ if(!s.size()) return;
+
+ // allow array marker and marker line colors to be
+ // scaled by given max and min to colorscales
+ var marker = trace.marker;
+ var markerIn = (trace._input || {}).marker || {},
+ markerScale = drawing.tryColorscale(marker, markerIn, ''),
+ lineScale = drawing.tryColorscale(marker, markerIn, 'line.');
+
+ s.each(function(d) {
+ drawing.singlePointStyle(d, d3.select(this), trace, markerScale, lineScale);
  });
 };
 

src/components/errorbars/plot.js

@@ -12,14 +12,15 @@
 var d3 = require('d3');
 var isNumeric = require('fast-isnumeric');
 
-var Lib = require('../../lib');
 var subTypes = require('../../traces/scatter/subtypes');
 
-
-module.exports = function plot(traces, plotinfo) {
+module.exports = function plot(traces, plotinfo, transitionOpts) {
+ var isNew;
  var xa = plotinfo.x(),
  ya = plotinfo.y();
 
+ var hasAnimation = transitionOpts && transitionOpts.duration > 0;
+
  traces.each(function(d) {
  var trace = d[0].trace,
  // || {} is in case the trace (specifically scatterternary)
@@ -29,6 +30,12 @@ module.exports = function plot(traces, plotinfo) {
  xObj = trace.error_x || {},
  yObj = trace.error_y || {};
 
+ var keyFunc;
+
+ if(trace.ids) {
+ keyFunc = function(d) {return d.id;};
+ }
+
  var sparse = (
  subTypes.hasMarkers(trace) &&
  trace.marker.maxdisplayed > 0
@@ -37,11 +44,21 @@ module.exports = function plot(traces, plotinfo) {
  if(!yObj.visible && !xObj.visible) return;
 
  var errorbars = d3.select(this).selectAll('g.errorbar')
- .data(Lib.identity);
+ .data(d, keyFunc);
+
+ errorbars.exit().remove();
 
- errorbars.enter().append('g')
+ errorbars.style('opacity', 1);
+
+ var enter = errorbars.enter().append('g')
  .classed('errorbar', true);
 
+ if(hasAnimation) {
+ enter.style('opacity', 0).transition()
+ .duration(transitionOpts.duration)
+ .style('opacity', 1);
+ }
+
  errorbars.each(function(d) {
  var errorbar = d3.select(this);
  var coords = errorCoords(d, xa, ya);
@@ -59,11 +76,24 @@ 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');
+
+ isNew = !yerror.size();
+
+ if(isNew) {
+ yerror = errorbar.append('path')
+ .classed('yerror', true);
+ } else if(hasAnimation) {
+ yerror = yerror
+ .transition()
+ .duration(transitionOpts.duration)
+ .ease(transitionOpts.easing);
+ }
+
+ yerror.attr('d', path);
  }
 
  if(xObj.visible && isNumeric(coords.y) &&
@@ -77,9 +107,21 @@ 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');
+
+ isNew = !xerror.size();
+
+ if(isNew) {
+ xerror = errorbar.append('path')
+ .classed('xerror', true);
+ } else if(hasAnimation) {
+ xerror = xerror
+ .transition()
+ .duration(transitionOpts.duration)
+ .ease(transitionOpts.easing);
+ }
+
+ xerror.attr('d', path);
  }
  });
  });

src/components/updatemenus/attributes.js

@@ -17,7 +17,7 @@ var buttonsAttrs = {
 
  method: {
  valType: 'enumerated',
- values: ['restyle', 'relayout'],
+ values: ['restyle', 'relayout', 'animate'],
  dflt: 'restyle',
  role: 'info',
  description: [

src/core.js

@@ -43,6 +43,9 @@ exports.register = require('./plot_api/register');
 exports.toImage = require('./plot_api/to_image');
 exports.downloadImage = require('./snapshot/download');
 exports.validate = require('./plot_api/validate');
+exports.addFrames = Plotly.addFrames;
+exports.deleteFrames = Plotly.deleteFrames;
+exports.animate = Plotly.animate;
 
 // scatter is the only trace included by default
 exports.register(require('./traces/scatter'));

src/lib/index.js

@@ -577,6 +577,40 @@ lib.objectFromPath = function(path, value) {
  return obj;
 };
 
+/**
+ * Iterate through an object in-place, converting dotted properties to objects.
+ *
+ * @example
+ * lib.expandObjectPaths({'nested.test.path': 'value'});
+ * // returns { nested: { test: {path: 'value'}}}
+ */
+
+// Store this to avoid recompiling regex on every prop since this may happen many
+// many times for animations.
+// TODO: Premature optimization? Remove?
+var dottedPropertyRegex = /^([^\.]*)\../;
+
+lib.expandObjectPaths = function(data) {
+ var match, key, prop, datum;
+ if(typeof data === 'object' && !Array.isArray(data)) {
+ for(key in data) {
+ if(data.hasOwnProperty(key)) {
+ if((match = key.match(dottedPropertyRegex))) {
+ datum = data[key];
+ prop = match[1];
+
+ delete data[key];
+
+ data[prop] = lib.extendDeepNoArrays(data[prop] || {}, lib.objectFromPath(key, lib.expandObjectPaths(datum))[prop]);
+ } else {
+ data[key] = lib.expandObjectPaths(data[key]);
+ }
+ }
+ }
+ }
+ return data;
+};
+
 /**
  * Converts value to string separated by the provided separators.
  *

src/components/color/index.js

@@ -74,7 +74,10 @@ color.stroke = function(s, c) {
 
 color.fill = function(s, c) {
  var tc = tinycolor(c);
- s.style({'fill': color.tinyRGB(tc), 'fill-opacity': tc.getAlpha()});
+ s.style({
+ 'fill': color.tinyRGB(tc),
+ 'fill-opacity': tc.getAlpha()
+ });
 };
 
 // search container for colors with the deprecated rgb(fractions) format

src/components/drawing/index.js

@@ -46,18 +46,26 @@ 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) {
- // 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 + ')');
+drawing.translatePoint = function(d, sel, xa, ya) {
+ // 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);
+
+ if(isNumeric(x) && isNumeric(y)) {
+ // for multiline text this works better
+ if(this.nodeName === 'text') {
+ sel.node().attr('x', x).attr('y', y);
+ } else {
+ sel.attr('transform', 'translate(' + x + ',' + y + ')');
  }
- else p.remove();
+ }
+ else sel.remove();
+};
+
+drawing.translatePoints = function(s, xa, ya, trace) {
+ s.each(function(d) {
+ var sel = d3.select(this);
+ drawing.translatePoint(d, sel, xa, ya, trace);
  });
 };
 
@@ -80,6 +88,16 @@ drawing.crispRound = function(td, lineWidth, dflt) {
  return Math.round(lineWidth);
 };
 
+drawing.singleLineStyle = function(d, s, lw, lc, ld) {
+ s.style('fill', 'none');
+ var line = (((d || [])[0] || {}).trace || {}).line || {},
+ lw1 = lw || line.width||0,
+ dash = ld || line.dash || '';
+
+ Color.stroke(s, lc || line.color);
+ drawing.dashLine(s, dash, lw1);
+};
+
 drawing.lineGroupStyle = function(s, lw, lc, ld) {
  s.style('fill', 'none')
  .each(function(d) {
@@ -175,18 +193,13 @@ drawing.symbolNumber = function(v) {
  return Math.floor(Math.max(v, 0));
 };
 
-drawing.pointStyle = function(s, trace) {
- if(!s.size()) return;
-
- var marker = trace.marker,
- markerLine = marker.line;
-
+function singlePointStyle(d, sel, trace, markerScale, lineScale, marker, markerLine) {
  // only scatter & box plots get marker path and opacity
  // bars, histograms don't
  if(Registry.traceIs(trace, 'symbols')) {
  var sizeFn = makeBubbleSizeFn(trace);
 
-s.attr('d', function(d) {
+sel.attr('d', function(d) {
  var r;
 
  // handle multi-trace graph edit case
@@ -212,54 +225,75 @@ drawing.pointStyle = function(s, trace) {
  return (d.mo + 1 || marker.opacity + 1) - 1;
  });
  }
+
+ // 'so' is suspected outliers, for box plots
+ var fillColor,
+ lineColor,
+ lineWidth;
+ if(d.so) {
+ lineWidth = markerLine.outlierwidth;
+ lineColor = markerLine.outliercolor;
+ fillColor = marker.outliercolor;
+ }
+ else {
+ lineWidth = (d.mlw + 1 || markerLine.width + 1 ||
+ // TODO: we need the latter for legends... can we get rid of it?
+ (d.trace ? d.trace.marker.line.width : 0) + 1) - 1;
+
+ 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 lineColor = markerLine.color;
+
+ if('mc' in d) fillColor = d.mcc = markerScale(d.mc);
+ else if(Array.isArray(marker.color)) fillColor = Color.defaultLine;
+ else fillColor = marker.color || 'rgba(0,0,0,0)';
+ }
+
+ if(d.om) {
+ // open markers can't have zero linewidth, default to 1px,
+ // and use fill color as stroke color
+ sel.call(Color.stroke, fillColor)
+ .style({
+ 'stroke-width': (lineWidth || 1) + 'px',
+ fill: 'none'
+ });
+ }
+ else {
+ sel.style('stroke-width', lineWidth + 'px')
+ .call(Color.fill, fillColor);
+ if(lineWidth) {
+ sel.call(Color.stroke, lineColor);
+ }
+ }
+}
+
+drawing.singlePointStyle = function(d, sel, trace) {
+ var marker = trace.marker,
+ markerLine = marker.line;
+
  // allow array marker and marker line colors to be
  // scaled by given max and min to colorscales
  var markerIn = (trace._input || {}).marker || {},
  markerScale = drawing.tryColorscale(marker, markerIn, ''),
  lineScale = drawing.tryColorscale(marker, markerIn, 'line.');
 
- s.each(function(d) {
- // 'so' is suspected outliers, for box plots
- var fillColor,
- lineColor,
- lineWidth;
- if(d.so) {
- lineWidth = markerLine.outlierwidth;
- lineColor = markerLine.outliercolor;
- fillColor = marker.outliercolor;
- }
- else {
- lineWidth = (d.mlw + 1 || markerLine.width + 1 ||
- // TODO: we need the latter for legends... can we get rid of it?
- (d.trace ? d.trace.marker.line.width : 0) + 1) - 1;
-
- 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 lineColor = markerLine.color;
-
- if('mc' in d) fillColor = d.mcc = markerScale(d.mc);
- else if(Array.isArray(marker.color)) fillColor = Color.defaultLine;
- else fillColor = marker.color || 'rgba(0,0,0,0)';
- }
+ singlePointStyle(d, sel, trace, markerScale, lineScale, marker, markerLine);
 
- var p = d3.select(this);
- if(d.om) {
- // open markers can't have zero linewidth, default to 1px,
- // and use fill color as stroke color
- p.call(Color.stroke, fillColor)
- .style({
- 'stroke-width': (lineWidth || 1) + 'px',
- fill: 'none'
- });
- }
- else {
- p.style('stroke-width', lineWidth + 'px')
- .call(Color.fill, fillColor);
- if(lineWidth) {
- p.call(Color.stroke, lineColor);
- }
- }
+};
+
+drawing.pointStyle = function(s, trace) {
+ if(!s.size()) return;
+
+ // allow array marker and marker line colors to be
+ // scaled by given max and min to colorscales
+ var marker = trace.marker;
+ var markerIn = (trace._input || {}).marker || {},
+ markerScale = drawing.tryColorscale(marker, markerIn, ''),
+ lineScale = drawing.tryColorscale(marker, markerIn, 'line.');
+
+ s.each(function(d) {
+ drawing.singlePointStyle(d, d3.select(this), trace, markerScale, lineScale);
  });
 };
 

src/components/errorbars/plot.js

@@ -12,14 +12,15 @@
 var d3 = require('d3');
 var isNumeric = require('fast-isnumeric');
 
-var Lib = require('../../lib');
 var subTypes = require('../../traces/scatter/subtypes');
 
-
-module.exports = function plot(traces, plotinfo) {
+module.exports = function plot(traces, plotinfo, transitionOpts) {
+ var isNew;
  var xa = plotinfo.x(),
  ya = plotinfo.y();
 
+ var hasAnimation = transitionOpts && transitionOpts.duration > 0;
+
  traces.each(function(d) {
  var trace = d[0].trace,
  // || {} is in case the trace (specifically scatterternary)
@@ -29,6 +30,12 @@ module.exports = function plot(traces, plotinfo) {
  xObj = trace.error_x || {},
  yObj = trace.error_y || {};
 
+ var keyFunc;
+
+ if(trace.ids) {
+ keyFunc = function(d) {return d.id;};
+ }
+
  var sparse = (
  subTypes.hasMarkers(trace) &&
  trace.marker.maxdisplayed > 0
@@ -37,11 +44,21 @@ module.exports = function plot(traces, plotinfo) {
  if(!yObj.visible && !xObj.visible) return;
 
  var errorbars = d3.select(this).selectAll('g.errorbar')
- .data(Lib.identity);
+ .data(d, keyFunc);
+
+ errorbars.exit().remove();
 
- errorbars.enter().append('g')
+ errorbars.style('opacity', 1);
+
+ var enter = errorbars.enter().append('g')
  .classed('errorbar', true);
 
+ if(hasAnimation) {
+ enter.style('opacity', 0).transition()
+ .duration(transitionOpts.duration)
+ .style('opacity', 1);
+ }
+
  errorbars.each(function(d) {
  var errorbar = d3.select(this);
  var coords = errorCoords(d, xa, ya);
@@ -59,11 +76,24 @@ 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');
+
+ isNew = !yerror.size();
+
+ if(isNew) {
+ yerror = errorbar.append('path')
+ .classed('yerror', true);
+ } else if(hasAnimation) {
+ yerror = yerror
+ .transition()
+ .duration(transitionOpts.duration)
+ .ease(transitionOpts.easing);
+ }
+
+ yerror.attr('d', path);
  }
 
  if(xObj.visible && isNumeric(coords.y) &&
@@ -77,9 +107,21 @@ 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');
+
+ isNew = !xerror.size();
+
+ if(isNew) {
+ xerror = errorbar.append('path')
+ .classed('xerror', true);
+ } else if(hasAnimation) {
+ xerror = xerror
+ .transition()
+ .duration(transitionOpts.duration)
+ .ease(transitionOpts.easing);
+ }
+
+ xerror.attr('d', path);
  }
  });
  });

src/components/updatemenus/attributes.js

@@ -17,7 +17,7 @@ var buttonsAttrs = {
 
  method: {
  valType: 'enumerated',
- values: ['restyle', 'relayout'],
+ values: ['restyle', 'relayout', 'animate'],
  dflt: 'restyle',
  role: 'info',
  description: [

src/core.js

@@ -43,6 +43,9 @@ exports.register = require('./plot_api/register');
 exports.toImage = require('./plot_api/to_image');
 exports.downloadImage = require('./snapshot/download');
 exports.validate = require('./plot_api/validate');
+exports.addFrames = Plotly.addFrames;
+exports.deleteFrames = Plotly.deleteFrames;
+exports.animate = Plotly.animate;
 
 // scatter is the only trace included by default
 exports.register(require('./traces/scatter'));

src/lib/index.js

@@ -577,6 +577,40 @@ lib.objectFromPath = function(path, value) {
  return obj;
 };
 
+/**
+ * Iterate through an object in-place, converting dotted properties to objects.
+ *
+ * @example
+ * lib.expandObjectPaths({'nested.test.path': 'value'});
+ * // returns { nested: { test: {path: 'value'}}}
+ */
+
+// Store this to avoid recompiling regex on every prop since this may happen many
+// many times for animations.
+// TODO: Premature optimization? Remove?
+var dottedPropertyRegex = /^([^\.]*)\../;
+
+lib.expandObjectPaths = function(data) {
+ var match, key, prop, datum;
+ if(typeof data === 'object' && !Array.isArray(data)) {
+ for(key in data) {
+ if(data.hasOwnProperty(key)) {
+ if((match = key.match(dottedPropertyRegex))) {
+ datum = data[key];
+ prop = match[1];
+
+ delete data[key];
+
+ data[prop] = lib.extendDeepNoArrays(data[prop] || {}, lib.objectFromPath(key, lib.expandObjectPaths(datum))[prop]);
+ } else {
+ data[key] = lib.expandObjectPaths(data[key]);
+ }
+ }
+ }
+ }
+ return data;
+};
+
 /**
  * Converts value to string separated by the provided separators.
  *

src/components/color/index.js

@@ -74,7 +74,10 @@ color.stroke = function(s, c) {
 
 color.fill = function(s, c) {
  var tc = tinycolor(c);
- s.style({'fill': color.tinyRGB(tc), 'fill-opacity': tc.getAlpha()});
+ s.style({
+ 'fill': color.tinyRGB(tc),
+ 'fill-opacity': tc.getAlpha()
+ });
 };
 
 // search container for colors with the deprecated rgb(fractions) format

src/components/drawing/index.js

@@ -46,18 +46,26 @@ 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) {
- // 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 + ')');
+drawing.translatePoint = function(d, sel, xa, ya) {
+ // 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);
+
+ if(isNumeric(x) && isNumeric(y)) {
+ // for multiline text this works better
+ if(this.nodeName === 'text') {
+ sel.node().attr('x', x).attr('y', y);
+ } else {
+ sel.attr('transform', 'translate(' + x + ',' + y + ')');
  }
- else p.remove();
+ }
+ else sel.remove();
+};
+
+drawing.translatePoints = function(s, xa, ya, trace) {
+ s.each(function(d) {
+ var sel = d3.select(this);
+ drawing.translatePoint(d, sel, xa, ya, trace);
  });
 };
 
@@ -80,6 +88,16 @@ drawing.crispRound = function(td, lineWidth, dflt) {
  return Math.round(lineWidth);
 };
 
+drawing.singleLineStyle = function(d, s, lw, lc, ld) {
+ s.style('fill', 'none');
+ var line = (((d || [])[0] || {}).trace || {}).line || {},
+ lw1 = lw || line.width||0,
+ dash = ld || line.dash || '';
+
+ Color.stroke(s, lc || line.color);
+ drawing.dashLine(s, dash, lw1);
+};
+
 drawing.lineGroupStyle = function(s, lw, lc, ld) {
  s.style('fill', 'none')
  .each(function(d) {
@@ -175,18 +193,13 @@ drawing.symbolNumber = function(v) {
  return Math.floor(Math.max(v, 0));
 };
 
-drawing.pointStyle = function(s, trace) {
- if(!s.size()) return;
-
- var marker = trace.marker,
- markerLine = marker.line;
-
+function singlePointStyle(d, sel, trace, markerScale, lineScale, marker, markerLine) {
  // only scatter & box plots get marker path and opacity
  // bars, histograms don't
  if(Registry.traceIs(trace, 'symbols')) {
  var sizeFn = makeBubbleSizeFn(trace);
 
-s.attr('d', function(d) {
+sel.attr('d', function(d) {
  var r;
 
  // handle multi-trace graph edit case
@@ -212,54 +225,75 @@ drawing.pointStyle = function(s, trace) {
  return (d.mo + 1 || marker.opacity + 1) - 1;
  });
  }
+
+ // 'so' is suspected outliers, for box plots
+ var fillColor,
+ lineColor,
+ lineWidth;
+ if(d.so) {
+ lineWidth = markerLine.outlierwidth;
+ lineColor = markerLine.outliercolor;
+ fillColor = marker.outliercolor;
+ }
+ else {
+ lineWidth = (d.mlw + 1 || markerLine.width + 1 ||
+ // TODO: we need the latter for legends... can we get rid of it?
+ (d.trace ? d.trace.marker.line.width : 0) + 1) - 1;
+
+ 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 lineColor = markerLine.color;
+
+ if('mc' in d) fillColor = d.mcc = markerScale(d.mc);
+ else if(Array.isArray(marker.color)) fillColor = Color.defaultLine;
+ else fillColor = marker.color || 'rgba(0,0,0,0)';
+ }
+
+ if(d.om) {
+ // open markers can't have zero linewidth, default to 1px,
+ // and use fill color as stroke color
+ sel.call(Color.stroke, fillColor)
+ .style({
+ 'stroke-width': (lineWidth || 1) + 'px',
+ fill: 'none'
+ });
+ }
+ else {
+ sel.style('stroke-width', lineWidth + 'px')
+ .call(Color.fill, fillColor);
+ if(lineWidth) {
+ sel.call(Color.stroke, lineColor);
+ }
+ }
+}
+
+drawing.singlePointStyle = function(d, sel, trace) {
+ var marker = trace.marker,
+ markerLine = marker.line;
+
  // allow array marker and marker line colors to be
  // scaled by given max and min to colorscales
  var markerIn = (trace._input || {}).marker || {},
  markerScale = drawing.tryColorscale(marker, markerIn, ''),
  lineScale = drawing.tryColorscale(marker, markerIn, 'line.');
 
- s.each(function(d) {
- // 'so' is suspected outliers, for box plots
- var fillColor,
- lineColor,
- lineWidth;
- if(d.so) {
- lineWidth = markerLine.outlierwidth;
- lineColor = markerLine.outliercolor;
- fillColor = marker.outliercolor;
- }
- else {
- lineWidth = (d.mlw + 1 || markerLine.width + 1 ||
- // TODO: we need the latter for legends... can we get rid of it?
- (d.trace ? d.trace.marker.line.width : 0) + 1) - 1;
-
- 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 lineColor = markerLine.color;
-
- if('mc' in d) fillColor = d.mcc = markerScale(d.mc);
- else if(Array.isArray(marker.color)) fillColor = Color.defaultLine;
- else fillColor = marker.color || 'rgba(0,0,0,0)';
- }
+ singlePointStyle(d, sel, trace, markerScale, lineScale, marker, markerLine);
 
- var p = d3.select(this);
- if(d.om) {
- // open markers can't have zero linewidth, default to 1px,
- // and use fill color as stroke color
- p.call(Color.stroke, fillColor)
- .style({
- 'stroke-width': (lineWidth || 1) + 'px',
- fill: 'none'
- });
- }
- else {
- p.style('stroke-width', lineWidth + 'px')
- .call(Color.fill, fillColor);
- if(lineWidth) {
- p.call(Color.stroke, lineColor);
- }
- }
+};
+
+drawing.pointStyle = function(s, trace) {
+ if(!s.size()) return;
+
+ // allow array marker and marker line colors to be
+ // scaled by given max and min to colorscales
+ var marker = trace.marker;
+ var markerIn = (trace._input || {}).marker || {},
+ markerScale = drawing.tryColorscale(marker, markerIn, ''),
+ lineScale = drawing.tryColorscale(marker, markerIn, 'line.');
+
+ s.each(function(d) {
+ drawing.singlePointStyle(d, d3.select(this), trace, markerScale, lineScale);
  });
 };
 

src/components/errorbars/plot.js

@@ -12,14 +12,15 @@
 var d3 = require('d3');
 var isNumeric = require('fast-isnumeric');
 
-var Lib = require('../../lib');
 var subTypes = require('../../traces/scatter/subtypes');
 
-
-module.exports = function plot(traces, plotinfo) {
+module.exports = function plot(traces, plotinfo, transitionOpts) {
+ var isNew;
  var xa = plotinfo.x(),
  ya = plotinfo.y();
 
+ var hasAnimation = transitionOpts && transitionOpts.duration > 0;
+
  traces.each(function(d) {
  var trace = d[0].trace,
  // || {} is in case the trace (specifically scatterternary)
@@ -29,6 +30,12 @@ module.exports = function plot(traces, plotinfo) {
  xObj = trace.error_x || {},
  yObj = trace.error_y || {};
 
+ var keyFunc;
+
+ if(trace.ids) {
+ keyFunc = function(d) {return d.id;};
+ }
+
  var sparse = (
  subTypes.hasMarkers(trace) &&
  trace.marker.maxdisplayed > 0
@@ -37,11 +44,21 @@ module.exports = function plot(traces, plotinfo) {
  if(!yObj.visible && !xObj.visible) return;
 
  var errorbars = d3.select(this).selectAll('g.errorbar')
- .data(Lib.identity);
+ .data(d, keyFunc);
+
+ errorbars.exit().remove();
 
- errorbars.enter().append('g')
+ errorbars.style('opacity', 1);
+
+ var enter = errorbars.enter().append('g')
  .classed('errorbar', true);
 
+ if(hasAnimation) {
+ enter.style('opacity', 0).transition()
+ .duration(transitionOpts.duration)
+ .style('opacity', 1);
+ }
+
  errorbars.each(function(d) {
  var errorbar = d3.select(this);
  var coords = errorCoords(d, xa, ya);
@@ -59,11 +76,24 @@ 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');
+
+ isNew = !yerror.size();
+
+ if(isNew) {
+ yerror = errorbar.append('path')
+ .classed('yerror', true);
+ } else if(hasAnimation) {
+ yerror = yerror
+ .transition()
+ .duration(transitionOpts.duration)
+ .ease(transitionOpts.easing);
+ }
+
+ yerror.attr('d', path);
  }
 
  if(xObj.visible && isNumeric(coords.y) &&
@@ -77,9 +107,21 @@ 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');
+
+ isNew = !xerror.size();
+
+ if(isNew) {
+ xerror = errorbar.append('path')
+ .classed('xerror', true);
+ } else if(hasAnimation) {
+ xerror = xerror
+ .transition()
+ .duration(transitionOpts.duration)
+ .ease(transitionOpts.easing);
+ }
+
+ xerror.attr('d', path);
  }
  });
  });

src/components/updatemenus/attributes.js

@@ -17,7 +17,7 @@ var buttonsAttrs = {
 
  method: {
  valType: 'enumerated',
- values: ['restyle', 'relayout'],
+ values: ['restyle', 'relayout', 'animate'],
  dflt: 'restyle',
  role: 'info',
  description: [

src/core.js

@@ -43,6 +43,9 @@ exports.register = require('./plot_api/register');
 exports.toImage = require('./plot_api/to_image');
 exports.downloadImage = require('./snapshot/download');
 exports.validate = require('./plot_api/validate');
+exports.addFrames = Plotly.addFrames;
+exports.deleteFrames = Plotly.deleteFrames;
+exports.animate = Plotly.animate;
 
 // scatter is the only trace included by default
 exports.register(require('./traces/scatter'));

src/lib/index.js

@@ -577,6 +577,40 @@ lib.objectFromPath = function(path, value) {
  return obj;
 };
 
+/**
+ * Iterate through an object in-place, converting dotted properties to objects.
+ *
+ * @example
+ * lib.expandObjectPaths({'nested.test.path': 'value'});
+ * // returns { nested: { test: {path: 'value'}}}
+ */
+
+// Store this to avoid recompiling regex on every prop since this may happen many
+// many times for animations.
+// TODO: Premature optimization? Remove?
+var dottedPropertyRegex = /^([^\.]*)\../;
+
+lib.expandObjectPaths = function(data) {
+ var match, key, prop, datum;
+ if(typeof data === 'object' && !Array.isArray(data)) {
+ for(key in data) {
+ if(data.hasOwnProperty(key)) {
+ if((match = key.match(dottedPropertyRegex))) {
+ datum = data[key];
+ prop = match[1];
+
+ delete data[key];
+
+ data[prop] = lib.extendDeepNoArrays(data[prop] || {}, lib.objectFromPath(key, lib.expandObjectPaths(datum))[prop]);
+ } else {
+ data[key] = lib.expandObjectPaths(data[key]);
+ }
+ }
+ }
+ }
+ return data;
+};
+
 /**
  * Converts value to string separated by the provided separators.
  *