diff --git a/package.json b/package.json
index 961010dc589..427e2721d71 100644
--- a/package.json
+++ b/package.json
@@ -52,7 +52,7 @@
     "arraytools": "^1.0.0",
     "convex-hull": "^1.0.3",
     "country-regex": "^1.0.0",
-    "d3": "^3.5.12",
+    "d3": "^4.2.1",
     "delaunay-triangulate": "^1.1.6",
     "es6-promise": "^3.0.2",
     "fast-isnumeric": "^1.1.1",
diff --git a/src/components/annotations/index.js b/src/components/annotations/index.js
index 3fc49527908..1ab7ba6bebb 100644
--- a/src/components/annotations/index.js
+++ b/src/components/annotations/index.js
@@ -381,7 +381,7 @@ annotations.draw = function(gd, index, opt, value) {
 
     function textLayout(s) {
         s.call(Drawing.font, font)
-        .attr({
+        .attrs({
             'text-anchor': {
                 left: 'start',
                 right: 'end'
@@ -396,7 +396,7 @@ annotations.draw = function(gd, index, opt, value) {
 
         // make sure lines are aligned the way they will be
         // at the end, even if their position changes
-        anntext.selectAll('tspan.line').attr({y: 0, x: 0});
+        anntext.selectAll('tspan.line').attrs({y: 0, x: 0});
 
         var mathjaxGroup = ann.select('.annotation-math-group'),
             hasMathjax = !mathjaxGroup.empty(),
@@ -522,11 +522,11 @@ annotations.draw = function(gd, index, opt, value) {
             textx = borderfull - anntextBB.left;
 
         if(hasMathjax) {
-            mathjaxGroup.select('svg').attr({x: borderfull - 1, y: borderfull});
+            mathjaxGroup.select('svg').attrs({x: borderfull - 1, y: borderfull});
         }
         else {
-            anntext.attr({x: textx, y: texty});
-            anntext.selectAll('tspan.line').attr({y: texty, x: textx});
+            anntext.attrs({x: textx, y: texty});
+            anntext.selectAll('tspan.line').attrs({y: texty, x: textx});
         }
 
         annbg.call(Drawing.setRect, borderwidth / 2, borderwidth / 2,
@@ -618,7 +618,7 @@ annotations.draw = function(gd, index, opt, value) {
                 arrowColor = options.arrowcolor;
 
             var arrowgroup = anngroup.append('g')
-                .style({opacity: Color.opacity(arrowColor)})
+                .styles({opacity: Color.opacity(arrowColor)})
                 .classed('annotation-arrow-g', true)
                 .attr('data-index', String(index));
 
@@ -632,7 +632,7 @@ annotations.draw = function(gd, index, opt, value) {
             var arrowdrag = arrowgroup.append('path')
                 .classed('annotation', true)
                 .classed('anndrag', true)
-                .attr({
+                .attrs({
                     'data-index': String(index),
                     d: 'M3,3H-3V-3H3ZM0,0L' + (arrowX0 - arrowX) + ',' + (arrowY0 - arrowY),
                     transform: 'translate(' + arrowX + ',' + arrowY + ')'
@@ -688,7 +688,7 @@ annotations.draw = function(gd, index, opt, value) {
                               (1 - ((arrowY + dy - gs.t) / gs.h));
                         }
 
-                        anng.attr({
+                        anng.attrs({
                             transform: 'rotate(' + textangle + ',' +
                                    xcenter + ',' + ycenter + ')'
                         });
@@ -777,7 +777,7 @@ annotations.draw = function(gd, index, opt, value) {
 
                     ann.call(Lib.setTranslate, x0 + dx, y0 + dy);
 
-                    anng.attr({
+                    anng.attrs({
                         transform: 'rotate(' + textangle + ',' +
                                x1 + ',' + y1 + ')'
                     });
@@ -801,7 +801,7 @@ annotations.draw = function(gd, index, opt, value) {
             .call(textLayout)
             .on('edit', function(_text) {
                 options.text = _text;
-                this.attr({'data-unformatted': options.text});
+                this.attrs({'data-unformatted': options.text});
                 this.call(textLayout);
                 var update = {};
                 update['annotations[' + index + '].text'] = options.text;
@@ -817,7 +817,7 @@ annotations.draw = function(gd, index, opt, value) {
     else anntext.call(textLayout);
 
     // rotate and position text and background
-    anng.attr({transform: 'rotate(' + textangle + ',' +
+    anng.attrs({transform: 'rotate(' + textangle + ',' +
                         annPosPx.x + ',' + annPosPx.y + ')'})
         .call(Drawing.setPosition, annPosPx.x, annPosPx.y);
 };
@@ -857,12 +857,12 @@ annotations.arrowhead = function(el3, style, ends, mag) {
             if(doStart) {
                 start.x -= backOffX;
                 start.y -= backOffY;
-                el3.attr({x1: start.x, y1: start.y});
+                el3.attrs({x1: start.x, y1: start.y});
             }
             if(doEnd) {
                 end.x += backOffX;
                 end.y += backOffY;
-                el3.attr({x2: end.x, y2: end.y});
+                el3.attrs({x2: end.x, y2: end.y});
             }
         }
     }
@@ -901,7 +901,7 @@ annotations.arrowhead = function(el3, style, ends, mag) {
     var drawhead = function(p, rot) {
         if(style > 5) rot = 0; // don't rotate square or circle
         d3.select(el.parentElement).append('path')
-            .attr({
+            .attrs({
                 'class': el3.attr('class'),
                 d: headStyle.path,
                 transform:
@@ -909,7 +909,7 @@ annotations.arrowhead = function(el3, style, ends, mag) {
                     'rotate(' + (rot * 180 / Math.PI) + ')' +
                     'scale(' + scale + ')'
             })
-            .style({
+            .styles({
                 fill: stroke,
                 opacity: opacity,
                 'stroke-width': 0
diff --git a/src/components/color/index.js b/src/components/color/index.js
index 35ac2a0552e..b33bada5c95 100644
--- a/src/components/color/index.js
+++ b/src/components/color/index.js
@@ -69,12 +69,12 @@ color.contrast = function(cstr, lightAmount, darkAmount) {
 
 color.stroke = function(s, c) {
     var tc = tinycolor(c);
-    s.style({'stroke': color.tinyRGB(tc), 'stroke-opacity': tc.getAlpha()});
+    s.styles({'stroke': color.tinyRGB(tc), 'stroke-opacity': tc.getAlpha()});
 };
 
 color.fill = function(s, c) {
     var tc = tinycolor(c);
-    s.style({'fill': color.tinyRGB(tc), 'fill-opacity': tc.getAlpha()});
+    s.styles({'fill': color.tinyRGB(tc), 'fill-opacity': tc.getAlpha()});
 };
 
 // search container for colors with the deprecated rgb(fractions) format
diff --git a/src/components/colorbar/draw.js b/src/components/colorbar/draw.js
index 3d287532a51..fd9fda6aed8 100644
--- a/src/components/colorbar/draw.js
+++ b/src/components/colorbar/draw.js
@@ -366,7 +366,7 @@ module.exports = function draw(gd, id) {
 
                 // Colorbar cannot currently support opacities so we
                 // use an opaque fill even when alpha channels present
-                d3.select(this).attr({
+                d3.select(this).attrs({
                     x: xLeft,
                     width: Math.max(thickPx, 2),
                     y: d3.min(z),
@@ -495,7 +495,7 @@ module.exports = function draw(gd, id) {
                     opts.borderwidth + opts.outlinewidth / 2,
                 outerheight = yBottomPx - yTopPx;
 
-            container.select('.cbbg').attr({
+            container.select('.cbbg').attrs({
                 x: xLeft - opts.xpad -
                     (opts.borderwidth + opts.outlinewidth) / 2,
                 y: yTopPx - yExtraPx,
@@ -504,9 +504,9 @@ module.exports = function draw(gd, id) {
             })
             .call(Color.fill, opts.bgcolor)
             .call(Color.stroke, opts.bordercolor)
-            .style({'stroke-width': opts.borderwidth});
+            .styles({'stroke-width': opts.borderwidth});
 
-            container.selectAll('.cboutline').attr({
+            container.selectAll('.cboutline').attrs({
                 x: xLeft,
                 y: yTopPx + opts.ypad +
                     (opts.titleside === 'top' ? titleHeight : 0),
@@ -514,7 +514,7 @@ module.exports = function draw(gd, id) {
                 height: Math.max(outerheight - 2 * opts.ypad - titleHeight, 2)
             })
             .call(Color.stroke, opts.outlinecolor)
-            .style({
+            .styles({
                 fill: 'None',
                 'stroke-width': opts.outlinewidth
             });
diff --git a/src/components/drawing/index.js b/src/components/drawing/index.js
index 2c9a6a6261c..7aa0551eb30 100644
--- a/src/components/drawing/index.js
+++ b/src/components/drawing/index.js
@@ -108,7 +108,7 @@ drawing.dashLine = function(s, dash, lineWidth) {
     }
     // otherwise user wrote the dasharray themselves - leave it be
 
-    s.style({
+    s.styles({
         'stroke-dasharray': dash,
         'stroke-width': lineWidth + 'px'
     });
@@ -248,7 +248,7 @@ drawing.pointStyle = function(s, trace) {
             // open markers can't have zero linewidth, default to 1px,
             // and use fill color as stroke color
             p.call(Color.stroke, fillColor)
-                .style({
+                .styles({
                     'stroke-width': (lineWidth || 1) + 'px',
                     fill: 'none'
                 });
@@ -346,7 +346,7 @@ drawing.textPointStyle = function(s, trace) {
 
         // then fix multiline text
         if(numLines > 1) {
-            tspans.attr({ x: p.attr('x'), y: p.attr('y') });
+            tspans.attrs({ x: p.attr('x'), y: p.attr('y') });
         }
     });
 };
@@ -456,8 +456,8 @@ drawing.makeTester = function(gd) {
 
     tester.enter().append('svg')
         .attr('id', 'js-plotly-tester')
-        .attr(xmlnsNamespaces.svgAttrs)
-        .style({
+        .attrs(xmlnsNamespaces.svgAttrs)
+        .styles({
             position: 'absolute',
             left: '-10000px',
             top: '-10000px',
@@ -465,6 +465,7 @@ drawing.makeTester = function(gd) {
             height: '9000px',
             'z-index': '1'
         });
+    tester = d3.select('body').select('#js-plotly-tester');
 
     // browsers differ on how they describe the bounding rect of
     // the svg if its contents spill over... so make a 1x1px
@@ -473,14 +474,15 @@ drawing.makeTester = function(gd) {
     testref.enter().append('path')
         .classed('js-reference-point', true)
         .attr('d', 'M0,0H1V1H0Z')
-        .style({
+        .styles({
             'stroke-width': 0,
             fill: 'black'
         });
+    testref = tester.select('.js-reference-point');
 
-    if(!tester.node()._cache) {
-        tester.node()._cache = {};
-    }
+    //if(!tester.node()._cache) {
+        //tester.node()._cache = {};
+    //}
 
     gd._tester = tester;
     gd._testref = testref;
@@ -507,7 +509,7 @@ drawing.bBox = function(node) {
     var testNode = node.cloneNode(true);
     tester.appendChild(testNode);
     // standardize its position... do we really want to do this?
-    d3.select(testNode).attr({
+    d3.select(testNode).attrs({
         x: 0,
         y: 0,
         transform: ''
diff --git a/src/components/images/draw.js b/src/components/images/draw.js
index 323847a5b5f..44d5a7a1213 100644
--- a/src/components/images/draw.js
+++ b/src/components/images/draw.js
@@ -125,7 +125,7 @@ module.exports = function draw(gd) {
                 break;
         }
 
-        thisImage.attr({
+        thisImage.attrs({
             x: xPos,
             y: yPos,
             width: width,
diff --git a/src/components/legend/draw.js b/src/components/legend/draw.js
index 0e8d9f88600..244df127fdd 100644
--- a/src/components/legend/draw.js
+++ b/src/components/legend/draw.js
@@ -43,63 +43,62 @@ module.exports = function draw(gd) {
         return;
     }
 
-    var legend = fullLayout._infolayer.selectAll('g.legend')
-        .data([0]);
+    fullLayout._infolayer.selectAll('g.legend').data([0])
+        .enter().append('g')
+            .attrs({
+                'class': 'legend',
+                'pointer-events': 'all'
+            });
 
-    legend.enter().append('g')
-        .attr({
-            'class': 'legend',
-            'pointer-events': 'all'
-        });
+    var legend = fullLayout._infolayer.selectAll('g.legend');
 
-    var clipPath = fullLayout._topdefs.selectAll('#' + clipId)
-        .data([0]);
+    fullLayout._topdefs.selectAll('#' + clipId).data([0])
+        .enter().append('clipPath')
+            .attr('id', clipId)
+            .append('rect');
 
-    clipPath.enter().append('clipPath')
-        .attr('id', clipId)
-        .append('rect');
+    var clipPath = fullLayout._topdefs.selectAll('#' + clipId);
 
-    var bg = legend.selectAll('rect.bg')
-        .data([0]);
 
-    bg.enter().append('rect').attr({
-        'class': 'bg',
-        'shape-rendering': 'crispEdges'
-    });
+    legend.selectAll('rect.bg').data([0])
+        .enter().append('rect').attrs({
+            'class': 'bg',
+            'shape-rendering': 'crispEdges'
+        });
+
+    var bg = legend.selectAll('rect.bg');
 
     bg.call(Color.stroke, opts.bordercolor);
     bg.call(Color.fill, opts.bgcolor);
     bg.style('stroke-width', opts.borderwidth + 'px');
 
-    var scrollBox = legend.selectAll('g.scrollbox')
-        .data([0]);
+    legend.selectAll('g.scrollbox').data([0])
+        .enter().append('g')
+            .attr('class', 'scrollbox');
 
-    scrollBox.enter().append('g')
-        .attr('class', 'scrollbox');
+    var scrollBox = legend.selectAll('g.scrollbox');
 
-    var scrollBar = legend.selectAll('rect.scrollbar')
-        .data([0]);
+    legend.selectAll('rect.scrollbar').data([0])
+        .enter().append('rect')
+            .attrs({
+                'class': 'scrollbar',
+                'rx': 20,
+                'ry': 2,
+                'width': 0,
+                'height': 0
+            })
+            .call(Color.fill, '#808BA4');
 
-    scrollBar.enter().append('rect')
-        .attr({
-            'class': 'scrollbar',
-            'rx': 20,
-            'ry': 2,
-            'width': 0,
-            'height': 0
-        })
-        .call(Color.fill, '#808BA4');
+    var scrollBar = legend.selectAll('rect.scrollbar');
 
-    var groups = scrollBox.selectAll('g.groups')
-        .data(legendData);
+    var groups = scrollBox.selectAll('g.groups').data(legendData);
 
     groups.enter().append('g')
         .attr('class', 'groups');
 
     groups.exit().remove();
 
-    var traces = groups.selectAll('g.traces')
-        .data(Lib.identity);
+    var traces = groups.selectAll('g.traces').data(Lib.identity);
 
     traces.enter().append('g').attr('class', 'traces');
     traces.exit().remove();
@@ -205,7 +204,7 @@ module.exports = function draw(gd) {
 
     if(opts.height <= legendHeight || gd._context.staticPlot) {
         // if scrollbar should not be shown.
-        bg.attr({
+        bg.attrs({
             width: legendWidth - opts.borderwidth,
             height: legendHeight - opts.borderwidth,
             x: opts.borderwidth / 2,
@@ -214,7 +213,7 @@ module.exports = function draw(gd) {
 
         Lib.setTranslate(scrollBox, 0, 0);
 
-        clipPath.select('rect').attr({
+        clipPath.select('rect').attrs({
             width: legendWidth - 2 * opts.borderwidth,
             height: legendHeight - 2 * opts.borderwidth,
             x: opts.borderwidth,
@@ -229,7 +228,7 @@ module.exports = function draw(gd) {
 
         // increase the background and clip-path width
         // by the scrollbar width and margin
-        bg.attr({
+        bg.attrs({
             width: legendWidth -
                 2 * opts.borderwidth +
                 constants.scrollBarWidth +
@@ -239,7 +238,7 @@ module.exports = function draw(gd) {
             y: opts.borderwidth / 2
         });
 
-        clipPath.select('rect').attr({
+        clipPath.select('rect').attrs({
             width: legendWidth -
                 2 * opts.borderwidth +
                 constants.scrollBarWidth +
@@ -296,7 +295,7 @@ module.exports = function draw(gd) {
             constants.scrollBarWidth,
             constants.scrollBarHeight
         );
-        clipPath.select('rect').attr({
+        clipPath.select('rect').attrs({
             y: opts.borderwidth - scrollBoxY
         });
     }
@@ -340,10 +339,13 @@ function drawTexts(g, gd) {
         traceIndex = trace.index,
         name = isPie ? legendItem.label : trace.name;
 
-    var text = g.selectAll('text.legendtext')
-        .data([0]);
-    text.enter().append('text').classed('legendtext', true);
-    text.attr({
+    g.selectAll('text.legendtext')
+        .data([0])
+        .enter().append('text').classed('legendtext', true);
+
+    var text = g.selectAll('text.legendtext');
+
+    text.attrs({
         x: 40,
         y: 0,
         'data-unformatted': name
@@ -355,7 +357,7 @@ function drawTexts(g, gd) {
 
     function textLayout(s) {
         Plotly.util.convertToTspans(s, function() {
-            s.selectAll('tspan.line').attr({x: s.attr('x')});
+            s.selectAll('tspan.line').attrs({x: s.attr('x')});
             g.call(computeTextDimensions, gd);
         });
     }
@@ -364,7 +366,7 @@ function drawTexts(g, gd) {
         text.call(Plotly.util.makeEditable)
             .call(textLayout)
             .on('edit', function(text) {
-                this.attr({'data-unformatted': text});
+                this.attrs({'data-unformatted': text});
                 this.text(text)
                     .call(textLayout);
                 if(!this.text()) text = ' \u0020\u0020 ';
@@ -379,14 +381,15 @@ function setupTraceToggle(g, gd) {
         gd._fullLayout.hiddenlabels.slice() :
         [];
 
-    var traceToggle = g.selectAll('rect')
-        .data([0]);
+    g.selectAll('rect')
+        .data([0])
+        .enter().append('rect')
+            .classed('legendtoggle', true)
+            .style('cursor', 'pointer')
+            .attr('pointer-events', 'all')
+            .call(Color.fill, 'rgba(0,0,0,0)');
 
-    traceToggle.enter().append('rect')
-        .classed('legendtoggle', true)
-        .style('cursor', 'pointer')
-        .attr('pointer-events', 'all')
-        .call(Color.fill, 'rgba(0,0,0,0)');
+    var traceToggle = g.selectAll('rect');
 
     traceToggle.on('click', function() {
         if(gd._dragged) return;
@@ -464,7 +467,7 @@ function computeTextDimensions(g, gd) {
 
     height = Math.max(height, 16) + 3;
 
-    bg.attr({x: 0, y: -height / 2, height: height});
+    bg.attrs({x: 0, y: -height / 2, height: height});
 
     legendItem.height = height;
     legendItem.width = width;
diff --git a/src/components/rangeselector/draw.js b/src/components/rangeselector/draw.js
index 53c499781cd..9b2b06de131 100644
--- a/src/components/rangeselector/draw.js
+++ b/src/components/rangeselector/draw.js
@@ -34,7 +34,7 @@ module.exports = function draw(gd) {
 
     selectors.exit().remove();
 
-    selectors.style({
+    selectors.styles({
         cursor: 'pointer',
         'pointer-events': 'all'
     });
@@ -123,14 +123,13 @@ function isActive(axisLayout, opts, update) {
 
 function drawButtonRect(button, selectorLayout, d) {
     var rect = button.selectAll('rect')
-        .data([0]);
-
-    rect.enter().append('rect')
-        .classed('selector-rect', true);
+        .data([0])
+        .enter().append('rect')
+            .classed('selector-rect', true);
 
     rect.attr('shape-rendering', 'crispEdges');
 
-    rect.attr({
+    rect.attrs({
         'rx': constants.rx,
         'ry': constants.ry
     });
@@ -154,11 +153,10 @@ function drawButtonText(button, selectorLayout, d) {
     }
 
     var text = button.selectAll('text')
-        .data([0]);
-
-    text.enter().append('text')
-        .classed('selector-text', true)
-        .classed('user-select-none', true);
+        .data([0])
+        .enter().append('text')
+            .classed('selector-text', true)
+            .classed('user-select-none', true);
 
     text.attr('text-anchor', 'middle');
 
@@ -213,7 +211,7 @@ function reposition(gd, buttons, opts, axName) {
             (borderWidth + opts.width) + ',' + borderWidth +
         ')');
 
-        rect.attr({
+        rect.attrs({
             x: 0,
             y: 0,
             width: wEff,
diff --git a/src/components/titles/index.js b/src/components/titles/index.js
index d2282596ab3..3228f7c6f3a 100644
--- a/src/components/titles/index.js
+++ b/src/components/titles/index.js
@@ -79,11 +79,13 @@ Titles.draw = function(gd, titleClass, options) {
             .data([0]);
         group.enter().append('g')
             .classed('g-' + titleClass, true);
+        group = fullLayout._infolayer.select('.g-' + titleClass);
     }
 
     var el = group.selectAll('text')
         .data([0]);
     el.enter().append('text');
+    el = group.select('text');
     el.text(txt)
         // this is hacky, but convertToTspans uses the class
         // to determine whether to rotate mathJax...
@@ -102,19 +104,19 @@ Titles.draw = function(gd, titleClass, options) {
                 ') translate(0, ' + transform.offset + ')' :
             null);
 
-        titleEl.style({
+        titleEl.styles({
             'font-family': font,
-            'font-size': d3.round(fontSize, 2) + 'px',
+            'font-size': d3.format('.2f')(fontSize) + 'px',
             fill: Color.rgb(fontColor),
             opacity: opacity * Color.opacity(fontColor),
             'font-weight': Plots.fontWeight
         })
-        .attr(attributes)
+        .attrs(attributes)
         .call(svgTextUtils.convertToTspans)
-        .attr(attributes);
+        .attrs(attributes);
 
         titleEl.selectAll('tspan.line')
-            .attr(attributes);
+            .attrs(attributes);
         return Plots.previousPromises(gd);
     }
 
@@ -181,7 +183,7 @@ Titles.draw = function(gd, titleClass, options) {
         }
     }
 
-    el.attr({'data-unformatted': txt})
+    el.attrs({'data-unformatted': txt})
         .call(titleLayout);
 
     var placeholderText = 'Click to enter ' + name + ' title';
@@ -191,7 +193,7 @@ Titles.draw = function(gd, titleClass, options) {
         isplaceholder = true;
         txt = placeholderText;
         fullLayout._infolayer.select('.' + titleClass)
-            .attr({'data-unformatted': txt})
+            .attrs({'data-unformatted': txt})
             .text(txt)
             .on('mouseover.opacity', function() {
                 d3.select(this).transition()
diff --git a/src/components/updatemenus/draw.js b/src/components/updatemenus/draw.js
index cbab8c534b6..71f9e924021 100644
--- a/src/components/updatemenus/draw.js
+++ b/src/components/updatemenus/draw.js
@@ -180,7 +180,7 @@ function drawHeader(gd, gHeader, gButton, menuOpts) {
         .call(Drawing.font, menuOpts.font)
         .text('▼');
 
-    arrow.attr({
+    arrow.attrs({
         x: menuOpts.width - constants.arrowOffsetX,
         y: menuOpts.height1 / 2 + constants.textOffsetY
     });
@@ -282,7 +282,7 @@ function drawItemRect(item, menuOpts) {
 
     rect.enter().append('rect')
         .classed(constants.itemRectClassName, true)
-        .attr({
+        .attrs({
             rx: constants.rx,
             ry: constants.ry,
             'shape-rendering': 'crispEdges'
@@ -417,7 +417,7 @@ function setItemPosition(item, menuOpts, posOpts) {
 
     Lib.setTranslate(item, borderWidth, borderWidth + posOpts.y);
 
-    rect.attr({
+    rect.attrs({
         x: 0,
         y: 0,
         width: menuOpts.width,
diff --git a/src/core.js b/src/core.js
index 2ff78c0b583..b1c3630097d 100644
--- a/src/core.js
+++ b/src/core.js
@@ -45,5 +45,4 @@ exports.Snapshot = Plotly.Snapshot;
 exports.PlotSchema = Plotly.PlotSchema;
 exports.Queue = Plotly.Queue;
 
-// export d3 used in the bundle
-exports.d3 = require('d3');
+exports.d3 = require('./d3');
diff --git a/src/d3.js b/src/d3.js
new file mode 100644
index 00000000000..f38e48181c0
--- /dev/null
+++ b/src/d3.js
@@ -0,0 +1,42 @@
+'use strict';
+
+var d3 = require('d3');
+
+module.exports = d3;
+
+d3.round = function(value, places) {
+    var tens = Math.pow(10, Math.round(places));
+    return Math.round(value * tens) / tens;
+};
+
+function attrsFunction(selection, map) {
+  return selection.each(function() {
+    var x = map.apply(this, arguments), s = d3.select(this);
+    for (var name in x) s.attr(name, x[name]);
+  });
+}
+
+function attrsObject(selection, map) {
+  for (var name in map) selection.attr(name, map[name]);
+  return selection;
+}
+
+d3.selection.prototype.attrs = function(map) {
+  return (typeof map === "function" ? attrsFunction : attrsObject)(this, map);
+};
+
+function stylesFunction(selection, map, priority) {
+  return selection.each(function() {
+    var x = map.apply(this, arguments), s = d3.select(this);
+    for (var name in x) s.style(name, x[name], priority);
+  });
+}
+
+function stylesObject(selection, map, priority) {
+  for (var name in map) selection.style(name, map[name], priority);
+  return selection;
+}
+
+d3.selection.prototype.styles = function(map, priority) {
+  return (typeof map === "function" ? stylesFunction : stylesObject)(this, map, priority == null ? "" : priority);
+};
diff --git a/src/lib/dates.js b/src/lib/dates.js
index 1c4063f3823..b39c20c17db 100644
--- a/src/lib/dates.js
+++ b/src/lib/dates.js
@@ -130,7 +130,7 @@ exports.ms2DateTime = function(ms, r) {
 
     if(!r) r = 0;
     var d = new Date(ms),
-        s = d3.time.format('%Y-%m-%d')(d);
+        s = d3.timeFormat('%Y-%m-%d')(d);
     if(r < 7776000000) {
         // <90 days: add hours
         s += ' ' + lpad(d.getHours(), 2);
@@ -207,7 +207,7 @@ var dateFormats = {
 };
 
 // use utc formatter since we're ignoring timezone info
-var formatter = d3.time.format.utc;
+var formatter = d3.utcFormat;
 
 /**
  * ISO8601 and YYYYMMDDHHMMSS are the only ones where date and time
diff --git a/src/lib/svg_text_utils.js b/src/lib/svg_text_utils.js
index 8b8e37257d8..0e97bdaa301 100644
--- a/src/lib/svg_text_utils.js
+++ b/src/lib/svg_text_utils.js
@@ -44,7 +44,7 @@ d3.selection.prototype.appendSVG = function(_svgString) {
 // Text utilities
 
 exports.html_entity_decode = function(s) {
-    var hiddenDiv = d3.select('body').append('div').style({display: 'none'}).html('');
+    var hiddenDiv = d3.select('body').append('div').styles({display: 'none'}).html('');
     var replaced = s.replace(/(&[^;]*;)/gi, function(d) {
         if(d === '&lt;') { return '&#60;'; } // special handling for brackets
         if(d === '&rt;') { return '&#62;'; }
@@ -79,7 +79,7 @@ exports.convertToTspans = function(_context, _callback) {
     svgClass += '-math';
     parent.selectAll('svg.' + svgClass).remove();
     parent.selectAll('g.' + svgClass + '-group').remove();
-    _context.style({visibility: null});
+    _context.styles({visibility: null});
     for(var up = _context.node(); up && up.removeAttribute; up = up.parentNode) {
         up.removeAttribute('data-bb');
     }
@@ -90,7 +90,7 @@ exports.convertToTspans = function(_context, _callback) {
             parent.select('svg.' + svgClass).remove();
         }
         _context.text('')
-            .style({
+            .styles({
                 visibility: 'visible',
                 'white-space': 'pre'
             });
@@ -113,7 +113,7 @@ exports.convertToTspans = function(_context, _callback) {
     if(tex) {
         var td = Lib.getPlotDiv(that.node());
         ((td && td._promises) || []).push(new Promise(function(resolve) {
-            that.style({visibility: 'hidden'});
+            that.styles({visibility: 'hidden'});
             var config = {fontSize: parseInt(that.style('font-size'), 10)};
 
             texToSVG(tex[2], config, function(_svgEl, _glyphDefs, _svgBBox) {
@@ -129,7 +129,7 @@ exports.convertToTspans = function(_context, _callback) {
 
                 var mathjaxGroup = parent.append('g')
                     .classed(svgClass + '-group', true)
-                    .attr({'pointer-events': 'none'});
+                    .attrs({'pointer-events': 'none'});
 
                 mathjaxGroup.node().appendChild(newSvg.node());
 
@@ -139,15 +139,15 @@ exports.convertToTspans = function(_context, _callback) {
                                                newSvg.node().firstChild);
                 }
 
-                newSvg.attr({
+                newSvg.attrs({
                     'class': svgClass,
                     height: _svgBBox.height,
                     preserveAspectRatio: 'xMinYMin meet'
                 })
-                .style({overflow: 'visible', 'pointer-events': 'none'});
+                .styles({overflow: 'visible', 'pointer-events': 'none'});
 
                 var fill = that.style('fill') || 'black';
-                newSvg.select('g').attr({fill: fill, stroke: fill});
+                newSvg.select('g').attrs({fill: fill, stroke: fill});
 
                 var newSvgW = getSize(newSvg, 'width'),
                     newSvgH = getSize(newSvg, 'height'),
@@ -159,20 +159,20 @@ exports.convertToTspans = function(_context, _callback) {
                     dy = -textHeight / 4;
 
                 if(svgClass[0] === 'y') {
-                    mathjaxGroup.attr({
+                    mathjaxGroup.attrs({
                         transform: 'rotate(' + [-90, +that.attr('x'), +that.attr('y')] +
                         ') translate(' + [-newSvgW / 2, dy - newSvgH / 2] + ')'
                     });
-                    newSvg.attr({x: +that.attr('x'), y: +that.attr('y')});
+                    newSvg.attrs({x: +that.attr('x'), y: +that.attr('y')});
                 }
                 else if(svgClass[0] === 'l') {
-                    newSvg.attr({x: that.attr('x'), y: dy - (newSvgH / 2)});
+                    newSvg.attrs({x: that.attr('x'), y: dy - (newSvgH / 2)});
                 }
                 else if(svgClass[0] === 'a') {
-                    newSvg.attr({x: 0, y: dy});
+                    newSvg.attrs({x: 0, y: dy});
                 }
                 else {
-                    newSvg.attr({x: newX, y: (+that.attr('y') + dy - newSvgH / 2)});
+                    newSvg.attrs({x: newX, y: (+that.attr('y') + dy - newSvgH / 2)});
                 }
 
                 if(_callback) _callback.call(that, mathjaxGroup);
@@ -196,9 +196,9 @@ function cleanEscapesForTex(s) {
 function texToSVG(_texString, _config, _callback) {
     var randomID = 'math-output-' + Lib.randstr([], 64);
     var tmpDiv = d3.select('body').append('div')
-        .attr({id: randomID})
-        .style({visibility: 'hidden', position: 'absolute'})
-        .style({'font-size': _config.fontSize + 'px'})
+        .attrs({id: randomID})
+        .styles({visibility: 'hidden', position: 'absolute'})
+        .styles({'font-size': _config.fontSize + 'px'})
         .text(cleanEscapesForTex(_texString));
 
     MathJax.Hub.Queue(['Typeset', MathJax.Hub, tmpDiv.node()], function() {
@@ -412,7 +412,7 @@ function alignHTMLWith(_base, container, options) {
 
     return function() {
         thisRect = this.node().getBoundingClientRect();
-        this.style({
+        this.styles({
             top: (getTop() - cRect.top) + 'px',
             left: (getLeft() - cRect.left) + 'px',
             'z-index': 1000
@@ -428,21 +428,21 @@ exports.makeEditable = function(context, _delegate, options) {
     var that = this;
     var dispatch = d3.dispatch('edit', 'input', 'cancel');
     var textSelection = d3.select(this.node())
-        .style({'pointer-events': 'all'});
+        .styles({'pointer-events': 'all'});
 
     var handlerElement = _delegate || textSelection;
-    if(_delegate) textSelection.style({'pointer-events': 'none'});
+    if(_delegate) textSelection.styles({'pointer-events': 'none'});
 
     function handleClick() {
         appendEditable();
-        that.style({opacity: 0});
+        that.styles({opacity: 0});
         // also hide any mathjax svg
         var svgClass = handlerElement.attr('class'),
             mathjaxClass;
         if(svgClass) mathjaxClass = '.' + svgClass.split(' ')[0] + '-math-group';
         else mathjaxClass = '[class*=-math-group]';
         if(mathjaxClass) {
-            d3.select(that.node().parentNode).select(mathjaxClass).style({opacity: 0});
+            d3.select(that.node().parentNode).select(mathjaxClass).styles({opacity: 0});
         }
     }
 
@@ -461,7 +461,7 @@ exports.makeEditable = function(context, _delegate, options) {
             container = plotDiv.select('.svg-container'),
             div = container.append('div');
         div.classed('plugin-editable editable', true)
-            .style({
+            .styles({
                 position: 'absolute',
                 'font-family': that.style('font-family') || 'Arial',
                 'font-size': that.style('font-size') || 12,
@@ -473,18 +473,18 @@ exports.makeEditable = function(context, _delegate, options) {
                 padding: '0',
                 'box-sizing': 'border-box'
             })
-            .attr({contenteditable: true})
+            .attrs({contenteditable: true})
             .text(options.text || that.attr('data-unformatted'))
             .call(alignHTMLWith(that, container, options))
             .on('blur', function() {
                 that.text(this.textContent)
-                    .style({opacity: 1});
+                    .styles({opacity: 1});
                 var svgClass = d3.select(this).attr('class'),
                     mathjaxClass;
                 if(svgClass) mathjaxClass = '.' + svgClass.split(' ')[0] + '-math-group';
                 else mathjaxClass = '[class*=-math-group]';
                 if(mathjaxClass) {
-                    d3.select(that.node().parentNode).select(mathjaxClass).style({opacity: 0});
+                    d3.select(that.node().parentNode).select(mathjaxClass).styles({opacity: 0});
                 }
                 var text = this.textContent;
                 d3.select(this).transition().duration(0).remove();
@@ -500,9 +500,9 @@ exports.makeEditable = function(context, _delegate, options) {
             })
             .on('keyup', function() {
                 if(d3.event.which === 27) {
-                    that.style({opacity: 1});
+                    that.styles({opacity: 1});
                     d3.select(this)
-                        .style({opacity: 0})
+                        .styles({opacity: 0})
                         .on('blur', function() { return false; })
                         .transition().remove();
                     dispatch.cancel.call(that, this.textContent);
diff --git a/src/plot_api/plot_api.js b/src/plot_api/plot_api.js
index 5ce6953015f..68b5c708218 100644
--- a/src/plot_api/plot_api.js
+++ b/src/plot_api/plot_api.js
@@ -426,7 +426,7 @@ function plotPolar(gd, data, layout) {
         gd._fullLayout.autosize = layout.autosize = true;
     }
     // resize canvas
-    paperDiv.style({
+    paperDiv.styles({
         width: gd._fullLayout.width + 'px',
         height: gd._fullLayout.height + 'px'
     });
@@ -459,12 +459,12 @@ function plotPolar(gd, data, layout) {
         .call(titleLayout);
 
     if(gd._context.editable) {
-        title.attr({'data-unformatted': txt});
+        title.attrs({'data-unformatted': txt});
         if(!txt || txt === placeholderText) {
             opacity = 0.2;
-            title.attr({'data-unformatted': placeholderText})
+            title.attrs({'data-unformatted': placeholderText})
                 .text(placeholderText)
-                .style({opacity: opacity})
+                .styles({opacity: opacity})
                 .on('mouseover.opacity', function() {
                     d3.select(this).transition().duration(100)
                         .style('opacity', 1);
@@ -479,7 +479,7 @@ function plotPolar(gd, data, layout) {
             this.call(Plotly.util.makeEditable)
                 .on('edit', function(text) {
                     gd.framework({layout: {title: text}});
-                    this.attr({'data-unformatted': text})
+                    this.attrs({'data-unformatted': text})
                         .text(text)
                         .call(titleLayout);
                     this.call(setContenteditable);
@@ -2620,16 +2620,20 @@ function makePlotFramework(gd) {
         fullLayout = gd._fullLayout;
 
     // Plot container
-    fullLayout._container = gd3.selectAll('.plot-container').data([0]);
-    fullLayout._container.enter().insert('div', ':first-child')
-        .classed('plot-container', true)
-        .classed('plotly', true);
+    gd3.selectAll('.plot-container').data([0])
+        .enter().insert('div', ':first-child')
+            .classed('plot-container', true)
+            .classed('plotly', true);
+
+    fullLayout._container = gd3.select('.plot-container');
 
     // Make the svg container
-    fullLayout._paperdiv = fullLayout._container.selectAll('.svg-container').data([0]);
-    fullLayout._paperdiv.enter().append('div')
-        .classed('svg-container', true)
-        .style('position', 'relative');
+    fullLayout._container.selectAll('.svg-container').data([0])
+        .enter().append('div')
+            .classed('svg-container', true)
+            .style('position', 'relative');
+
+    fullLayout._paperdiv = fullLayout._container.select('.svg-container');
 
     // Initial autosize
     if(fullLayout.autosize === 'initial') {
@@ -2643,15 +2647,15 @@ function makePlotFramework(gd) {
     // right, rather than enter/exit which can muck up the order
     // TODO: sort out all the ordering so we don't have to
     // explicitly delete anything
-    fullLayout._glcontainer = fullLayout._paperdiv.selectAll('.gl-container')
-        .data([0]);
-    fullLayout._glcontainer.enter().append('div')
-        .classed('gl-container', true);
+    fullLayout._paperdiv.selectAll('.gl-container').data([0])
+        .enter().append('div')
+            .classed('gl-container', true);
 
-    fullLayout._geocontainer = fullLayout._paperdiv.selectAll('.geo-container')
-        .data([0]);
-    fullLayout._geocontainer.enter().append('div')
-        .classed('geo-container', true);
+    fullLayout._glContainer = fullLayout._paperdiv.select('.gl-container');
+
+    fullLayout._paperdiv.selectAll('.geo-container').data([0])
+        .enter().append('div')
+            .classed('geo-container', true);
 
     fullLayout._paperdiv.selectAll('.main-svg').remove();
 
@@ -2670,7 +2674,7 @@ function makePlotFramework(gd) {
     }
 
     fullLayout._paperdiv.selectAll('.main-svg')
-        .attr(xmlnsNamespaces.svgAttrs);
+        .attrs(xmlnsNamespaces.svgAttrs);
 
     fullLayout._defs = fullLayout._paper.append('defs')
         .attr('id', 'defs-' + fullLayout._uid);
@@ -2798,6 +2802,7 @@ function makeCartesianPlotFramwork(gd, subplots) {
     fullLayout._paper.selectAll('g.subplot').data(subplots)
       .enter().append('g')
         .classed('subplot', true)
+    fullLayout._paper.selectAll('g.subplot').data(subplots)
         .each(function(subplot) {
             var plotinfo = fullLayout._plots[subplot],
                 plotgroup = plotinfo.plotgroup = d3.select(this).classed(subplot, true),
@@ -2918,7 +2923,7 @@ function lsInner(gd) {
     for(i = 0; i < axList.length; i++) axList[i]._linepositions = {};
 
     fullLayout._paperdiv
-        .style({
+        .styles({
             width: fullLayout.width + 'px',
             height: fullLayout.height + 'px'
         })
@@ -2952,14 +2957,14 @@ function lsInner(gd) {
             .data([0]);
 
         plotClip.enter().append('clipPath')
-            .attr({
+            .attrs({
                 'class': 'plotclip',
                 'id': plotinfo.clipId
             })
             .append('rect');
 
         plotClip.selectAll('rect')
-            .attr({
+            .attrs({
                 'width': xa._length,
                 'height': ya._length
             });
diff --git a/src/plots/cartesian/axes.js b/src/plots/cartesian/axes.js
index d6ffb8cc97f..301bc9bd4e0 100644
--- a/src/plots/cartesian/axes.js
+++ b/src/plots/cartesian/axes.js
@@ -876,12 +876,12 @@ axes.tickFirst = function(ax) {
     else throw 'unrecognized dtick ' + String(dtick);
 };
 
-var yearFormat = d3.time.format('%Y'),
-    monthFormat = d3.time.format('%b %Y'),
-    dayFormat = d3.time.format('%b %-d'),
-    hourFormat = d3.time.format('%b %-d %Hh'),
-    minuteFormat = d3.time.format('%H:%M'),
-    secondFormat = d3.time.format(':%S');
+var yearFormat = d3.timeFormat('%Y'),
+    monthFormat = d3.timeFormat('%b %Y'),
+    dayFormat = d3.timeFormat('%b %-d'),
+    hourFormat = d3.timeFormat('%b %-d %Hh'),
+    minuteFormat = d3.timeFormat('%H:%M'),
+    secondFormat = d3.timeFormat(':%S');
 
 // add one item to d3's vocabulary:
 // %{n}f where n is the max number of digits
@@ -894,10 +894,10 @@ function modDateFormat(fmt, x) {
         var digits = Math.min(+fm[1] || 6, 6),
             fracSecs = String((x / 1000 % 1) + 2.0000005)
                 .substr(2, digits).replace(/0+$/, '') || '0';
-        return d3.time.format(fmt.replace(fracMatch, fracSecs))(d);
+        return d3.timeFormat(fmt.replace(fracMatch, fracSecs))(d);
     }
     else {
-        return d3.time.format(fmt)(d);
+        return d3.timeFormat(fmt)(d);
     }
 }
 
@@ -1324,6 +1324,7 @@ axes.makeClipPaths = function(gd) {
         .data([0]);
     defGroup.enter().append('g')
         .classed('clips', true);
+    defGroup = defs.select('g.clips');
 
     // selectors don't work right with camelCase tags,
     // have to use class instead
@@ -1336,7 +1337,7 @@ axes.makeClipPaths = function(gd) {
       .append('rect');
     axClips.exit().remove();
     axClips.each(function(d) {
-        d3.select(this).select('rect').attr({
+        d3.select(this).select('rect').attrs({
             x: d.x._offset || 0,
             y: d.y._offset || 0,
             width: d.x._length || 1,
@@ -1586,13 +1587,13 @@ axes.doTicks = function(gd, axid, skipTitle) {
                             (labely(d) - d.fontSize / 2) + ')') :
                         '');
                 if(mathjaxGroup.empty()) {
-                    var txt = thisLabel.select('text').attr({
+                    var txt = thisLabel.select('text').attrs({
                         transform: transform,
                         'text-anchor': anchor
                     });
 
                     if(!txt.empty()) {
-                        txt.selectAll('tspan.line').attr({
+                        txt.selectAll('tspan.line').attrs({
                             x: txt.attr('x'),
                             y: txt.attr('y')
                         });
diff --git a/src/plots/cartesian/dragbox.js b/src/plots/cartesian/dragbox.js
index 5b18574482f..3ec9f9d4780 100644
--- a/src/plots/cartesian/dragbox.js
+++ b/src/plots/cartesian/dragbox.js
@@ -80,9 +80,11 @@ module.exports = function dragBox(gd, plotinfo, x, y, w, h, ns, ew) {
     dragger3.enter().append('rect')
         .classed('drag', true)
         .classed(dragClass, true)
-        .style({fill: 'transparent', 'stroke-width': 0})
+        .styles({fill: 'transparent', 'stroke-width': 0})
         .attr('data-subplot', plotinfo.id);
 
+    dragger3 = plotinfo.draglayer.selectAll('.' + dragClass);
+
     dragger3.call(Drawing.setRect, x, y, w, h)
         .call(setCursor, cursor);
 
@@ -171,7 +173,7 @@ module.exports = function dragBox(gd, plotinfo, x, y, w, h, ns, ew) {
 
         zb = zoomlayer.append('path')
             .attr('class', 'zoombox')
-            .style({
+            .styles({
                 'fill': lum > 0.2 ? 'rgba(0,0,0,0)' : 'rgba(255,255,255,0)',
                 'stroke-width': 0
             })
@@ -180,7 +182,7 @@ module.exports = function dragBox(gd, plotinfo, x, y, w, h, ns, ew) {
 
         corners = zoomlayer.append('path')
             .attr('class', 'zoombox-corners')
-            .style({
+            .styles({
                 fill: Color.background,
                 stroke: Color.defaultLine,
                 'stroke-width': 1,
diff --git a/src/plots/cartesian/graph_interact.js b/src/plots/cartesian/graph_interact.js
index 540577d922c..22137d43f47 100644
--- a/src/plots/cartesian/graph_interact.js
+++ b/src/plots/cartesian/graph_interact.js
@@ -840,13 +840,18 @@ function createHoverText(hoverData, opts) {
             ltext = label.selectAll('text').data([0]);
 
         lpath.enter().append('path')
-            .style({fill: Color.defaultLine, 'stroke-width': '1px', stroke: Color.background});
+            .styles({fill: Color.defaultLine, 'stroke-width': '1px', stroke: Color.background});
+
+        lpath = label.selectAll('path');
+
         ltext.enter().append('text')
             .call(Drawing.font, HOVERFONT, HOVERFONTSIZE, Color.background)
             // prohibit tex interpretation until we can handle
             // tex and regular text together
             .attr('data-notex', 1);
 
+        ltext = label.selectAll('text');
+
         ltext.text(t0)
             .call(svgTextUtils.convertToTspans)
             .call(Drawing.setPosition, 0, 0)
@@ -861,7 +866,7 @@ function createHoverText(hoverData, opts) {
                     (outerTop - tbb.bottom - HOVERARROWSIZE - HOVERTEXTPAD) :
                     (outerTop - tbb.top + HOVERARROWSIZE + HOVERTEXTPAD)))
                 .selectAll('tspan.line')
-                    .attr({
+                    .attrs({
                         x: ltext.attr('x'),
                         y: ltext.attr('y')
                     });
@@ -884,7 +889,7 @@ function createHoverText(hoverData, opts) {
                     (ya.side === 'right' ? 1 : -1) * (HOVERTEXTPAD + HOVERARROWSIZE),
                     outerTop - tbb.top - tbb.height / 2)
                 .selectAll('tspan.line')
-                    .attr({
+                    .attrs({
                         x: ltext.attr('x'),
                         y: ltext.attr('y')
                     });
@@ -1021,7 +1026,7 @@ function createHoverText(hoverData, opts) {
         }
 
         g.select('path')
-            .style({
+            .styles({
                 fill: traceColor,
                 stroke: contrastColor
             });
@@ -1283,7 +1288,7 @@ function alignHoverText(hoverLabels, rotateLabels) {
         tx.call(Drawing.setPosition,
                 txx + offsetX, offsetY + d.ty0 - d.by / 2 + HOVERTEXTPAD)
             .selectAll('tspan.line')
-                .attr({
+                .attrs({
                     x: tx.attr('x'),
                     y: tx.attr('y')
                 });
diff --git a/src/plots/cartesian/select.js b/src/plots/cartesian/select.js
index 9c36daf30a2..47c7ad373c0 100644
--- a/src/plots/cartesian/select.js
+++ b/src/plots/cartesian/select.js
@@ -52,7 +52,7 @@ module.exports = function prepSelect(e, startX, startY, dragOptions, mode) {
 
     var corners = plot.append('path')
         .attr('class', 'zoombox-corners')
-        .style({
+        .styles({
             fill: color.background,
             stroke: color.defaultLine,
             'stroke-width': 1
diff --git a/src/plots/cartesian/set_convert.js b/src/plots/cartesian/set_convert.js
index 565c4ce53b3..be12fcf5cd0 100644
--- a/src/plots/cartesian/set_convert.js
+++ b/src/plots/cartesian/set_convert.js
@@ -125,7 +125,7 @@ module.exports = function setConvert(ax) {
         if(!isNumeric(v)) return constants.BADNUM;
 
         // include 2 fractional digits on pixel, for PDF zooming etc
-        return d3.round(ax._b + ax._m * v, 2);
+        return Math.round(100 * (ax._b + ax._m * v)) / 100;
     };
 
     ax.p2l = function(px) { return (px - ax._b) / ax._m; };
diff --git a/src/plots/geo/geo.js b/src/plots/geo/geo.js
index 968fc671251..4138178b15d 100644
--- a/src/plots/geo/geo.js
+++ b/src/plots/geo/geo.js
@@ -254,7 +254,7 @@ proto.makeFramework = function() {
     var hoverContainer = this.hoverContainer = geoDiv.append('svg');
     hoverContainer
         .attr(xmlnsNamespaces.svgAttrs)
-        .style({
+        .styles({
             'position': 'absolute',
             'z-index': 20,
             'pointer-events': 'none'
@@ -263,7 +263,7 @@ proto.makeFramework = function() {
     var framework = this.framework = geoDiv.append('svg');
     framework
         .attr(xmlnsNamespaces.svgAttrs)
-        .attr({
+        .attrs({
             'position': 'absolute',
             'preserveAspectRatio': 'none'
         });
@@ -285,25 +285,25 @@ proto.makeFramework = function() {
 proto.adjustLayout = function(geoLayout, graphSize) {
     var domain = geoLayout.domain;
 
-    this.geoDiv.style({
+    this.geoDiv.styles({
         left: graphSize.l + graphSize.w * domain.x[0] + geoLayout._marginX + 'px',
         top: graphSize.t + graphSize.h * (1 - domain.y[1]) + geoLayout._marginY + 'px',
         width: geoLayout._width + 'px',
         height: geoLayout._height + 'px'
     });
 
-    this.hoverContainer.attr({
+    this.hoverContainer.attrs({
         width: geoLayout._width,
         height: geoLayout._height
     });
 
-    this.framework.attr({
+    this.framework.attrs({
         width: geoLayout._width,
         height: geoLayout._height
     });
 
     this.framework.select('.bglayer').select('rect')
-        .attr({
+        .attrs({
             width: geoLayout._width,
             height: geoLayout._height
         })
diff --git a/src/plots/geo/index.js b/src/plots/geo/index.js
index cd277b1c9ca..1a6e50299df 100644
--- a/src/plots/geo/index.js
+++ b/src/plots/geo/index.js
@@ -91,7 +91,7 @@ exports.toSVG = function(gd) {
 
         geoFramework.attr('style', null);
         geoFramework
-            .attr({
+            .attrs({
                 x: size.l + size.w * domain.x[0] + geoLayout._marginX,
                 y: size.t + size.h * (1 - domain.y[1]) + geoLayout._marginY,
                 width: geoLayout._width,
diff --git a/src/plots/gl2d/index.js b/src/plots/gl2d/index.js
index eb12013558e..fc9a672db89 100644
--- a/src/plots/gl2d/index.js
+++ b/src/plots/gl2d/index.js
@@ -95,7 +95,7 @@ exports.toSVG = function(gd) {
         var imageData = scene.toImage('png');
         var image = fullLayout._glimages.append('svg:image');
 
-        image.attr({
+        image.attrs({
             xmlns: xmlnsNamespaces.svg,
             'xlink:href': imageData,
             x: 0,
diff --git a/src/plots/gl3d/index.js b/src/plots/gl3d/index.js
index 7d5134a23d3..2787c20c089 100644
--- a/src/plots/gl3d/index.js
+++ b/src/plots/gl3d/index.js
@@ -37,7 +37,7 @@ exports.plot = function plotGl3d(gd) {
         fullData = gd._fullData,
         sceneIds = Plots.getSubplotIds(fullLayout, 'gl3d');
 
-    fullLayout._paperdiv.style({
+    fullLayout._paperdiv.styles({
         width: fullLayout.width + 'px',
         height: fullLayout.height + 'px'
     });
@@ -97,7 +97,7 @@ exports.toSVG = function(gd) {
         var imageData = scene.toImage('png');
         var image = fullLayout._glimages.append('svg:image');
 
-        image.attr({
+        image.attrs({
             xmlns: xmlnsNamespaces.svg,
             'xlink:href': imageData,
             x: size.l + size.w * domain.x[0],
diff --git a/src/plots/mapbox/index.js b/src/plots/mapbox/index.js
index e7ab347d07b..f94291ba8c9 100644
--- a/src/plots/mapbox/index.js
+++ b/src/plots/mapbox/index.js
@@ -104,7 +104,7 @@ exports.toSVG = function(gd) {
         var imageData = mapbox.toImage('png');
         var image = fullLayout._glimages.append('svg:image');
 
-        image.attr({
+        image.attrs({
             xmlns: xmlnsNamespaces.svg,
             'xlink:href': imageData,
             x: size.l + size.w * domain.x[0],
diff --git a/src/plots/plots.js b/src/plots/plots.js
index c7f7ac041ab..a63d9f97479 100644
--- a/src/plots/plots.js
+++ b/src/plots/plots.js
@@ -323,22 +323,21 @@ plots.addLinks = function(gd) {
     var fullLayout = gd._fullLayout;
 
     var linkContainer = fullLayout._paper
-        .selectAll('text.js-plot-link-container').data([0]);
-
-    linkContainer.enter().append('text')
-        .classed('js-plot-link-container', true)
-        .style({
-            'font-family': '"Open Sans", Arial, sans-serif',
-            'font-size': '12px',
-            'fill': Color.defaultLine,
-            'pointer-events': 'all'
-        })
-        .each(function() {
-            var links = d3.select(this);
-            links.append('tspan').classed('js-link-to-tool', true);
-            links.append('tspan').classed('js-link-spacer', true);
-            links.append('tspan').classed('js-sourcelinks', true);
-        });
+        .selectAll('text.js-plot-link-container').data([0])
+        .enter().append('text')
+            .classed('js-plot-link-container', true)
+            .styles({
+                'font-family': '"Open Sans", Arial, sans-serif',
+                'font-size': '12px',
+                'fill': Color.defaultLine,
+                'pointer-events': 'all'
+            })
+            .each(function() {
+                var links = d3.select(this);
+                links.append('tspan').classed('js-link-to-tool', true);
+                links.append('tspan').classed('js-link-spacer', true);
+                links.append('tspan').classed('js-sourcelinks', true);
+            });
 
     // The text node inside svg
     var text = linkContainer.node(),
@@ -382,7 +381,7 @@ plots.addLinks = function(gd) {
 function positionPlayWithData(gd, container) {
     container.text('');
     var link = container.append('a')
-        .attr({
+        .attrs({
             'xlink:xlink:href': '#',
             'class': 'link--impt link--embedview',
             'font-weight': 'bold'
@@ -397,7 +396,7 @@ function positionPlayWithData(gd, container) {
     else {
         var path = window.location.pathname.split('/');
         var query = window.location.search;
-        link.attr({
+        link.attrs({
             'xlink:xlink:show': 'new',
             'xlink:xlink:href': '/' + path[2].split('.')[0] + '/' + path[1] + query
         });
@@ -415,7 +414,7 @@ plots.sendDataToCloud = function(gd) {
 
     var hiddenform = hiddenformDiv
         .append('form')
-        .attr({
+        .attrs({
             action: baseUrl + '/external',
             method: 'post',
             target: '_blank'
@@ -423,7 +422,7 @@ plots.sendDataToCloud = function(gd) {
 
     var hiddenformInput = hiddenform
         .append('input')
-        .attr({
+        .attrs({
             type: 'text',
             name: 'data'
         });
diff --git a/src/plots/polar/micropolar.js b/src/plots/polar/micropolar.js
index a17a0cf3995..f2bbb48ec4f 100644
--- a/src/plots/polar/micropolar.js
+++ b/src/plots/polar/micropolar.js
@@ -142,13 +142,13 @@ var extendDeepAll = Plotly.Lib.extendDeepAll;
                 var newSvg = this.appendChild(this.ownerDocument.importNode(doc.documentElement, true));
                 svg = d3.select(newSvg);
             }
-            svg.select('.guides-group').style({
+            svg.select('.guides-group').styles({
                 'pointer-events': 'none'
             });
-            svg.select('.angular.axis-group').style({
+            svg.select('.angular.axis-group').styles({
                 'pointer-events': 'none'
             });
-            svg.select('.radial.axis-group').style({
+            svg.select('.radial.axis-group').styles({
                 'pointer-events': 'none'
             });
             var chartGroup = svg.select('.chart-group');
@@ -166,9 +166,9 @@ var extendDeepAll = Plotly.Lib.extendDeepAll;
             };
             var legendContainer;
             if (axisConfig.showLegend) {
-                legendContainer = svg.select('.legend-group').attr({
+                legendContainer = svg.select('.legend-group').attrs({
                     transform: 'translate(' + [ radius, axisConfig.margin.top ] + ')'
-                }).style({
+                }).styles({
                     display: 'block'
                 });
                 var elements = data.map(function(d, i) {
@@ -201,17 +201,17 @@ var extendDeepAll = Plotly.Lib.extendDeepAll;
                 liveConfig.layout.radialAxis.domain = radialScale.domain();
                 legendContainer.attr('transform', 'translate(' + [ chartCenter[0] + radius, chartCenter[1] - radius ] + ')');
             } else {
-                legendContainer = svg.select('.legend-group').style({
+                legendContainer = svg.select('.legend-group').styles({
                     display: 'none'
                 });
             }
-            svg.attr({
+            svg.attrs({
                 width: axisConfig.width,
                 height: axisConfig.height
-            }).style({
+            }).styles({
                 opacity: axisConfig.opacity
             });
-            chartGroup.attr('transform', 'translate(' + chartCenter + ')').style({
+            chartGroup.attr('transform', 'translate(' + chartCenter + ')').styles({
                 cursor: 'crosshair'
             });
             var centeringOffset = [ (axisConfig.width - (axisConfig.margin.left + axisConfig.margin.right + radius * 2 + (legendBBox ? legendBBox.width : 0))) / 2, (axisConfig.height - (axisConfig.margin.top + axisConfig.margin.bottom + radius * 2)) / 2 ];
@@ -221,7 +221,7 @@ var extendDeepAll = Plotly.Lib.extendDeepAll;
             if (axisConfig.title) {
                 var title = svg.select('g.title-group text').style(fontStyle).text(axisConfig.title);
                 var titleBBox = title.node().getBBox();
-                title.attr({
+                title.attrs({
                     x: chartCenter[0] - titleBBox.width / 2,
                     y: chartCenter[1] - radius - 20
                 });
@@ -229,18 +229,18 @@ var extendDeepAll = Plotly.Lib.extendDeepAll;
             var radialAxis = svg.select('.radial.axis-group');
             if (axisConfig.radialAxis.gridLinesVisible) {
                 var gridCircles = radialAxis.selectAll('circle.grid-circle').data(radialScale.ticks(5));
-                gridCircles.enter().append('circle').attr({
+                gridCircles.enter().append('circle').attrs({
                     'class': 'grid-circle'
                 }).style(lineStyle);
                 gridCircles.attr('r', radialScale);
                 gridCircles.exit().remove();
             }
-            radialAxis.select('circle.outside-circle').attr({
+            radialAxis.select('circle.outside-circle').attrs({
                 r: radius
             }).style(lineStyle);
-            var backgroundCircle = svg.select('circle.background-circle').attr({
+            var backgroundCircle = svg.select('circle.background-circle').attrs({
                 r: radius
-            }).style({
+            }).styles({
                 fill: axisConfig.backgroundColor,
                 stroke: axisConfig.stroke
             });
@@ -249,15 +249,15 @@ var extendDeepAll = Plotly.Lib.extendDeepAll;
             }
             if (axisConfig.radialAxis.visible) {
                 var axis = d3.svg.axis().scale(radialScale).ticks(5).tickSize(5);
-                radialAxis.call(axis).attr({
+                radialAxis.call(axis).attrs({
                     transform: 'rotate(' + axisConfig.radialAxis.orientation + ')'
                 });
                 radialAxis.selectAll('.domain').style(lineStyle);
                 radialAxis.selectAll('g>text').text(function(d, i) {
                     return this.textContent + axisConfig.radialAxis.ticksSuffix;
-                }).style(fontStyle).style({
+                }).style(fontStyle).styles({
                     'text-anchor': 'start'
-                }).attr({
+                }).attrs({
                     x: 0,
                     y: 0,
                     dx: 0,
@@ -268,17 +268,17 @@ var extendDeepAll = Plotly.Lib.extendDeepAll;
                         } else return 'translate(' + [ 0, fontStyle['font-size'] ] + ')';
                     }
                 });
-                radialAxis.selectAll('g>line').style({
+                radialAxis.selectAll('g>line').styles({
                     stroke: 'black'
                 });
             }
             var angularAxis = svg.select('.angular.axis-group').selectAll('g.angular-tick').data(angularAxisRange);
             var angularAxisEnter = angularAxis.enter().append('g').classed('angular-tick', true);
-            angularAxis.attr({
+            angularAxis.attrs({
                 transform: function(d, i) {
                     return 'rotate(' + currentAngle(d, i) + ')';
                 }
-            }).style({
+            }).styles({
                 display: axisConfig.angularAxis.visible ? 'block' : 'none'
             });
             angularAxis.exit().remove();
@@ -287,17 +287,17 @@ var extendDeepAll = Plotly.Lib.extendDeepAll;
             }).classed('minor', function(d, i) {
                 return !(i % (axisConfig.minorTicks + 1) == 0);
             }).style(lineStyle);
-            angularAxisEnter.selectAll('.minor').style({
+            angularAxisEnter.selectAll('.minor').styles({
                 stroke: axisConfig.minorTickColor
             });
-            angularAxis.select('line.grid-line').attr({
+            angularAxis.select('line.grid-line').attrs({
                 x1: axisConfig.tickLength ? radius - axisConfig.tickLength : 0,
                 x2: radius
-            }).style({
+            }).styles({
                 display: axisConfig.angularAxis.gridLinesVisible ? 'block' : 'none'
             });
             angularAxisEnter.append('text').classed('axis-text', true).style(fontStyle);
-            var ticksText = angularAxis.select('text.axis-text').attr({
+            var ticksText = angularAxis.select('text.axis-text').attrs({
                 x: radius + axisConfig.labelOffset,
                 dy: '.35em',
                 transform: function(d, i) {
@@ -306,7 +306,7 @@ var extendDeepAll = Plotly.Lib.extendDeepAll;
                     var orient = axisConfig.angularAxis.tickOrientation;
                     if (orient == 'horizontal') return 'rotate(' + -angle + ' ' + rad + ' 0)'; else if (orient == 'radial') return angle < 270 && angle > 90 ? 'rotate(180 ' + rad + ' 0)' : null; else return 'rotate(' + (angle <= 180 && angle > 0 ? -90 : 90) + ' ' + rad + ' 0)';
                 }
-            }).style({
+            }).styles({
                 'text-anchor': 'middle',
                 display: axisConfig.angularAxis.labelsVisible ? 'block' : 'none'
             }).text(function(d, i) {
@@ -322,12 +322,12 @@ var extendDeepAll = Plotly.Lib.extendDeepAll;
             var rightmostTickEndX = d3.max(chartGroup.selectAll('.angular-tick text')[0].map(function(d, i) {
                 return d.getCTM().e + d.getBBox().width;
             }));
-            legendContainer.attr({
+            legendContainer.attrs({
                 transform: 'translate(' + [ radius + rightmostTickEndX, axisConfig.margin.top ] + ')'
             });
             var hasGeometry = svg.select('g.geometry-group').selectAll('g').size() > 0;
             var geometryContainer = svg.select('g.geometry-group').selectAll('g.geometry').data(data);
-            geometryContainer.enter().append('g').attr({
+            geometryContainer.enter().append('g').attrs({
                 'class': function(d, i) {
                     return 'geometry geometry' + i;
                 }
@@ -385,20 +385,20 @@ var extendDeepAll = Plotly.Lib.extendDeepAll;
             })();
             var angularValue, radialValue;
             if (!isOrdinal) {
-                var angularGuideLine = guides.select('line').attr({
+                var angularGuideLine = guides.select('line').attrs({
                     x1: 0,
                     y1: 0,
                     y2: 0
-                }).style({
+                }).styles({
                     stroke: 'grey',
                     'pointer-events': 'none'
                 });
                 chartGroup.on('mousemove.angular-guide', function(d, i) {
                     var mouseAngle = µ.util.getMousePos(backgroundCircle).angle;
-                    angularGuideLine.attr({
+                    angularGuideLine.attrs({
                         x2: -radius,
                         transform: 'rotate(' + mouseAngle + ')'
-                    }).style({
+                    }).styles({
                         opacity: .5
                     });
                     var angleWithOriginOffset = (mouseAngle + 180 + 360 - axisConfig.orientation) % 360;
@@ -406,27 +406,27 @@ var extendDeepAll = Plotly.Lib.extendDeepAll;
                     var pos = µ.util.convertToCartesian(radius + 12, mouseAngle + 180);
                     angularTooltip.text(µ.util.round(angularValue)).move([ pos[0] + chartCenter[0], pos[1] + chartCenter[1] ]);
                 }).on('mouseout.angular-guide', function(d, i) {
-                    guides.select('line').style({
+                    guides.select('line').styles({
                         opacity: 0
                     });
                 });
             }
-            var angularGuideCircle = guides.select('circle').style({
+            var angularGuideCircle = guides.select('circle').styles({
                 stroke: 'grey',
                 fill: 'none'
             });
             chartGroup.on('mousemove.radial-guide', function(d, i) {
                 var r = µ.util.getMousePos(backgroundCircle).radius;
-                angularGuideCircle.attr({
+                angularGuideCircle.attrs({
                     r: r
-                }).style({
+                }).styles({
                     opacity: .5
                 });
                 radialValue = radialScale.invert(µ.util.getMousePos(backgroundCircle).radius);
                 var pos = µ.util.convertToCartesian(r, axisConfig.radialAxis.orientation);
                 radialTooltip.text(µ.util.round(radialValue)).move([ pos[0] + chartCenter[0], pos[1] + chartCenter[1] ]);
             }).on('mouseout.radial-guide', function(d, i) {
-                angularGuideCircle.style({
+                angularGuideCircle.styles({
                     opacity: 0
                 });
                 geometryTooltip.hide();
@@ -438,15 +438,15 @@ var extendDeepAll = Plotly.Lib.extendDeepAll;
                 var color = el.style('fill');
                 var newColor = 'black';
                 var opacity = el.style('opacity') || 1;
-                el.attr({
+                el.attrs({
                     'data-opacity': opacity
                 });
                 if (color != 'none') {
-                    el.attr({
+                    el.attrs({
                         'data-fill': color
                     });
                     newColor = d3.hsl(color).darker().toString();
-                    el.style({
+                    el.styles({
                         fill: newColor,
                         opacity: 1
                     });
@@ -465,11 +465,11 @@ var extendDeepAll = Plotly.Lib.extendDeepAll;
                     geometryTooltip.move(pos);
                 } else {
                     color = el.style('stroke');
-                    el.attr({
+                    el.attrs({
                         'data-stroke': color
                     });
                     newColor = d3.hsl(color).darker().toString();
-                    el.style({
+                    el.styles({
                         stroke: newColor,
                         opacity: 1
                     });
@@ -481,10 +481,10 @@ var extendDeepAll = Plotly.Lib.extendDeepAll;
                 geometryTooltip.hide();
                 var el = d3.select(this);
                 var fillColor = el.attr('data-fill');
-                if (fillColor) el.style({
+                if (fillColor) el.styles({
                     fill: fillColor,
                     opacity: el.attr('data-opacity')
-                }); else el.style({
+                }); else el.styles({
                     stroke: el.attr('data-stroke'),
                     opacity: el.attr('data-opacity')
                 });
@@ -797,7 +797,7 @@ var extendDeepAll = Plotly.Lib.extendDeepAll;
                 var h = geometryConfig.radialScale(d[1]) - geometryConfig.radialScale(0);
                 var stackTop = geometryConfig.radialScale(d[2] || 0);
                 var w = dataConfig.barWidth;
-                d3.select(this).attr({
+                d3.select(this).attrs({
                     'class': 'mark bar',
                     d: 'M' + [ [ h + stackTop, -w / 2 ], [ h + stackTop, w / 2 ], [ stackTop, w / 2 ], [ stackTop, -w / 2 ] ].join('L') + 'Z',
                     transform: function(d, i) {
@@ -808,7 +808,7 @@ var extendDeepAll = Plotly.Lib.extendDeepAll;
             generator.dot = function(d, i, pI) {
                 var stackedData = d[2] ? [ d[0], d[1] + d[2] ] : d;
                 var symbol = d3.svg.symbol().size(_config[pI].data.dotSize).type(_config[pI].data.dotType)(d, i);
-                d3.select(this).attr({
+                d3.select(this).attrs({
                     'class': 'mark dot',
                     d: symbol,
                     transform: function(d, i) {
@@ -826,25 +826,25 @@ var extendDeepAll = Plotly.Lib.extendDeepAll;
                 var lineData = d[2] ? data[pI].map(function(d, i) {
                     return [ d[0], d[1] + d[2] ];
                 }) : data[pI];
-                d3.select(this).each(generator['dot']).style({
+                d3.select(this).each(generator['dot']).styles({
                     opacity: function(dB, iB) {
                         return +_config[pI].data.dotVisible;
                     },
                     fill: markStyle.stroke(d, i, pI)
-                }).attr({
+                }).attrs({
                     'class': 'mark dot'
                 });
                 if (i > 0) return;
                 var lineSelection = d3.select(this.parentNode).selectAll('path.line').data([ 0 ]);
                 lineSelection.enter().insert('path');
-                lineSelection.attr({
+                lineSelection.attrs({
                     'class': 'line',
                     d: line(lineData),
                     transform: function(dB, iB) {
                         return 'rotate(' + (geometryConfig.orientation + 90) + ')';
                     },
                     'pointer-events': 'none'
-                }).style({
+                }).styles({
                     fill: function(dB, iB) {
                         return markStyle.fill(d, i, pI);
                     },
@@ -878,7 +878,7 @@ var extendDeepAll = Plotly.Lib.extendDeepAll;
                 return geometryConfig.radialScale(domainMin + (d[2] || 0)) + geometryConfig.radialScale(d[1]);
             });
             generator.arc = function(d, i, pI) {
-                d3.select(this).attr({
+                d3.select(this).attrs({
                     'class': 'mark arc',
                     d: arc,
                     transform: function(d, i) {
@@ -907,13 +907,13 @@ var extendDeepAll = Plotly.Lib.extendDeepAll;
                 }
             };
             var geometryLayer = d3.select(this).selectAll('g.layer').data(data);
-            geometryLayer.enter().append('g').attr({
+            geometryLayer.enter().append('g').attrs({
                 'class': 'layer'
             });
             var geometry = geometryLayer.selectAll('path.mark').data(function(d, i) {
                 return d;
             });
-            geometry.enter().append('path').attr({
+            geometry.enter().append('path').attrs({
                 'class': 'mark'
             });
             geometry.style(markStyle).each(generator[geometryConfig.geometryType]);
@@ -1067,7 +1067,7 @@ var extendDeepAll = Plotly.Lib.extendDeepAll;
         var height = isContinuous ? legendConfig.height : lineHeight * data.length;
         var legendContainerGroup = container.classed('legend-group', true);
         var svg = legendContainerGroup.selectAll('svg').data([ 0 ]);
-        var svgEnter = svg.enter().append('svg').attr({
+        var svgEnter = svg.enter().append('svg').attrs({
             width: 300,
             height: height + lineHeight,
             xmlns: 'http://www.w3.org/2000/svg',
@@ -1086,7 +1086,7 @@ var extendDeepAll = Plotly.Lib.extendDeepAll;
             } else if (d3.svg.symbolTypes.indexOf(_type) != -1) return d3.svg.symbol().type(_type).size(squareSize)(); else return d3.svg.symbol().type('square').size(squareSize)();
         };
         if (isContinuous) {
-            var gradient = svg.select('.legend-marks').append('defs').append('linearGradient').attr({
+            var gradient = svg.select('.legend-marks').append('defs').append('linearGradient').attrs({
                 id: 'grad1',
                 x1: '0%',
                 y1: '0%',
@@ -1094,16 +1094,16 @@ var extendDeepAll = Plotly.Lib.extendDeepAll;
                 y2: '100%'
             }).selectAll('stop').data(colors);
             gradient.enter().append('stop');
-            gradient.attr({
+            gradient.attrs({
                 offset: function(d, i) {
                     return i / (colors.length - 1) * 100 + '%';
                 }
-            }).style({
+            }).styles({
                 'stop-color': function(d, i) {
                     return d;
                 }
             });
-            svg.append('rect').classed('legend-mark', true).attr({
+            svg.append('rect').classed('legend-mark', true).attrs({
                 height: legendConfig.height,
                 width: legendConfig.colorBandWidth,
                 fill: 'url(#grad1)'
@@ -1111,7 +1111,7 @@ var extendDeepAll = Plotly.Lib.extendDeepAll;
         } else {
             var legendElement = svg.select('.legend-marks').selectAll('path.legend-mark').data(data);
             legendElement.enter().append('path').classed('legend-mark', true);
-            legendElement.attr({
+            legendElement.attrs({
                 transform: function(d, i) {
                     return 'translate(' + [ lineHeight / 2, dataScale(i) + lineHeight / 2 ] + ')';
                 },
@@ -1126,18 +1126,18 @@ var extendDeepAll = Plotly.Lib.extendDeepAll;
             legendElement.exit().remove();
         }
         var legendAxis = d3.svg.axis().scale(dataScale).orient('right');
-        var axis = svg.select('g.legend-axis').attr({
+        var axis = svg.select('g.legend-axis').attrs({
             transform: 'translate(' + [ isContinuous ? legendConfig.colorBandWidth : lineHeight, lineHeight / 2 ] + ')'
         }).call(legendAxis);
-        axis.selectAll('.domain').style({
+        axis.selectAll('.domain').styles({
             fill: 'none',
             stroke: 'none'
         });
-        axis.selectAll('line').style({
+        axis.selectAll('line').styles({
             fill: 'none',
             stroke: isContinuous ? legendConfig.textColor : 'none'
         });
-        axis.selectAll('text').style({
+        axis.selectAll('text').styles({
             fill: legendConfig.textColor,
             'font-size': legendConfig.fontSize
         }).text(function(d, i) {
@@ -1193,17 +1193,17 @@ var extendDeepAll = Plotly.Lib.extendDeepAll;
     var tickSize = 10;
     var exports = function() {
         tooltipEl = config.container.selectAll('g.' + id).data([ 0 ]);
-        var tooltipEnter = tooltipEl.enter().append('g').classed(id, true).style({
+        var tooltipEnter = tooltipEl.enter().append('g').classed(id, true).styles({
             'pointer-events': 'none',
             display: 'none'
         });
-        backgroundEl = tooltipEnter.append('path').style({
+        backgroundEl = tooltipEnter.append('path').styles({
             fill: 'white',
             'fill-opacity': .9
-        }).attr({
+        }).attrs({
             d: 'M0 0'
         });
-        tooltipTextEl = tooltipEnter.append('text').attr({
+        tooltipTextEl = tooltipEnter.append('text').attrs({
             dx: config.padding + tickSize,
             dy: +config.fontSize * .3
         });
@@ -1214,7 +1214,7 @@ var extendDeepAll = Plotly.Lib.extendDeepAll;
         var strokeColor = l >= .5 ? '#aaa' : 'white';
         var fillColor = l >= .5 ? 'black' : 'white';
         var text = _text || '';
-        tooltipTextEl.style({
+        tooltipTextEl.styles({
             fill: fillColor,
             'font-size': config.fontSize + 'px'
         }).text(text);
@@ -1227,36 +1227,36 @@ var extendDeepAll = Plotly.Lib.extendDeepAll;
         };
         var backGroundW = bbox.width + padding * 2 + tickSize;
         var backGroundH = bbox.height + padding * 2;
-        backgroundEl.attr({
+        backgroundEl.attrs({
             d: 'M' + [ [ tickSize, -backGroundH / 2 ], [ tickSize, -backGroundH / 4 ], [ config.hasTick ? 0 : tickSize, 0 ], [ tickSize, backGroundH / 4 ], [ tickSize, backGroundH / 2 ], [ backGroundW, backGroundH / 2 ], [ backGroundW, -backGroundH / 2 ] ].join('L') + 'Z'
         }).style(boxStyle);
-        tooltipEl.attr({
+        tooltipEl.attrs({
             transform: 'translate(' + [ tickSize, -backGroundH / 2 + padding * 2 ] + ')'
         });
-        tooltipEl.style({
+        tooltipEl.styles({
             display: 'block'
         });
         return exports;
     };
     exports.move = function(_pos) {
         if (!tooltipEl) return;
-        tooltipEl.attr({
+        tooltipEl.attrs({
             transform: 'translate(' + [ _pos[0], _pos[1] ] + ')'
-        }).style({
+        }).styles({
             display: 'block'
         });
         return exports;
     };
     exports.hide = function() {
         if (!tooltipEl) return;
-        tooltipEl.style({
+        tooltipEl.styles({
             display: 'none'
         });
         return exports;
     };
     exports.show = function() {
         if (!tooltipEl) return;
-        tooltipEl.style({
+        tooltipEl.styles({
             display: 'block'
         });
         return exports;
diff --git a/src/plots/ternary/ternary.js b/src/plots/ternary/ternary.js
index 1fd6d7094f7..f00134cecf5 100644
--- a/src/plots/ternary/ternary.js
+++ b/src/plots/ternary/ternary.js
@@ -485,7 +485,7 @@ proto.initInteractions = function() {
 
         zb = zoomContainer.append('path')
             .attr('class', 'zoombox')
-            .style({
+            .styles({
                 'fill': lum > 0.2 ? 'rgba(0,0,0,0)' : 'rgba(255,255,255,0)',
                 'stroke-width': 0
             })
@@ -493,7 +493,7 @@ proto.initInteractions = function() {
 
         corners = zoomContainer.append('path')
             .attr('class', 'zoombox-corners')
-            .style({
+            .styles({
                 fill: Color.background,
                 stroke: Color.defaultLine,
                 'stroke-width': 1,
diff --git a/src/traces/box/style.js b/src/traces/box/style.js
index e890ce73f25..1d14b619e04 100644
--- a/src/traces/box/style.js
+++ b/src/traces/box/style.js
@@ -26,7 +26,7 @@ module.exports = function style(gd) {
                 .call(Color.stroke, trace.line.color)
                 .call(Color.fill, trace.fillcolor);
             d3.select(this).selectAll('path.mean')
-                .style({
+                .styles({
                     'stroke-width': lineWidth,
                     'stroke-dasharray': (2 * lineWidth) + 'px,' + lineWidth + 'px'
                 })
diff --git a/src/traces/heatmap/plot.js b/src/traces/heatmap/plot.js
index bc13f66d163..df1e3f23749 100644
--- a/src/traces/heatmap/plot.js
+++ b/src/traces/heatmap/plot.js
@@ -380,12 +380,12 @@ function plotOne(gd, plotinfo, cd) {
     var image3 = plotgroup.selectAll('image')
         .data(cd);
 
-    image3.enter().append('svg:image').attr({
+    image3.enter().append('svg:image').attrs({
         xmlns: xmlnsNamespaces.svg,
         preserveAspectRatio: 'none'
     });
 
-    image3.attr({
+    image3.attrs({
         height: imageHeight,
         width: imageWidth,
         x: left,
diff --git a/src/traces/pie/plot.js b/src/traces/pie/plot.js
index e96c21fbf77..6e0e43babf3 100644
--- a/src/traces/pie/plot.js
+++ b/src/traces/pie/plot.js
@@ -25,7 +25,7 @@ module.exports = function plot(gd, cdpie) {
     var pieGroups = fullLayout._pielayer.selectAll('g.trace').data(cdpie);
 
     pieGroups.enter().append('g')
-        .attr({
+        .attrs({
             'stroke-linejoin': 'round', // TODO: miter might look better but can sometimes cause problems
                                         // maybe miter with a small-ish stroke-miterlimit?
             'class': 'trace'
@@ -150,7 +150,7 @@ module.exports = function plot(gd, cdpie) {
 
                 slicePath.enter().append('path')
                     .classed('surface', true)
-                    .style({'pointer-events': 'all'});
+                    .styles({'pointer-events': 'all'});
 
                 sliceTop.select('path.textline').remove();
 
@@ -230,7 +230,7 @@ module.exports = function plot(gd, cdpie) {
                     sliceText.exit().remove();
 
                     sliceText.text(pt.text)
-                        .attr({
+                        .attrs({
                             'class': 'slicetext',
                             transform: '',
                             'data-bb': '',
@@ -241,7 +241,7 @@ module.exports = function plot(gd, cdpie) {
                         .call(Drawing.font, textPosition === 'outside' ?
                             trace.outsidetextfont : trace.insidetextfont)
                         .call(svgTextUtils.convertToTspans);
-                    sliceText.selectAll('tspan.line').attr({x: 0, y: 0});
+                    sliceText.selectAll('tspan.line').attrs({x: 0, y: 0});
 
                     // position the text relative to the slice
                     // TODO: so far this only accounts for flat
@@ -256,7 +256,7 @@ module.exports = function plot(gd, cdpie) {
                             sliceText.call(Drawing.font, trace.outsidetextfont);
                             if(trace.outsidetextfont.family !== trace.insidetextfont.family ||
                                     trace.outsidetextfont.size !== trace.insidetextfont.size) {
-                                sliceText.attr({'data-bb': ''});
+                                sliceText.attrs({'data-bb': ''});
                                 textBB = Drawing.bBox(sliceText.node());
                             }
                             transform = transformOutsideText(textBB, pt);
@@ -325,7 +325,7 @@ module.exports = function plot(gd, cdpie) {
                     sliceTop.append('path')
                         .classed('textline', true)
                         .call(Color.stroke, trace.outsidetextfont.color)
-                        .attr({
+                        .attrs({
                             'stroke-width': Math.min(2, trace.outsidetextfont.size / 8),
                             d: textLinePath,
                             fill: 'none'
diff --git a/src/traces/pie/style.js b/src/traces/pie/style.js
index 727caeb3613..cb109f973b4 100644
--- a/src/traces/pie/style.js
+++ b/src/traces/pie/style.js
@@ -18,7 +18,7 @@ module.exports = function style(gd) {
             trace = cd0.trace,
             traceSelection = d3.select(this);
 
-        traceSelection.style({opacity: trace.opacity});
+        traceSelection.styles({opacity: trace.opacity});
 
         traceSelection.selectAll('.top path.surface').each(function(pt) {
             d3.select(this).call(styleOne, pt, trace);
diff --git a/src/traces/pie/style_one.js b/src/traces/pie/style_one.js
index 4f26cbb2a26..ce7c0465187 100644
--- a/src/traces/pie/style_one.js
+++ b/src/traces/pie/style_one.js
@@ -17,7 +17,7 @@ module.exports = function styleOne(s, pt, trace) {
     var lineWidth = trace.marker.line.width || 0;
     if(Array.isArray(lineWidth)) lineWidth = lineWidth[pt.i] || 0;
 
-    s.style({
+    s.styles({
         'stroke-width': lineWidth,
         fill: pt.color
     })