plotly.js 2.8.2 → 2.10.0

package/dist/translation-keys.txt

@@ -24,7 +24,7 @@ IE only supports svg.  Changing format to svg.         // components/modebar/but
 Lasso Select                                           // components/modebar/buttons.js:126
 Orbital rotation                                       // components/modebar/buttons.js:342
 Pan                                                    // components/modebar/buttons.js:106
-Produced with Plotly                                   // components/modebar/modebar.js:295
+Produced with Plotly.js                                // components/modebar/modebar.js:301
 Reset                                                  // components/modebar/buttons.js:515
 Reset axes                                             // components/modebar/buttons.js:218
 Reset camera to default                                // components/modebar/buttons.js:381

package/lib/locales/cs.js

@@ -24,7 +24,7 @@ module.exports = {
         'Lasso Select': 'Vyběr lasem',                                                                     // components/modebar/buttons.js:112
         'Orbital rotation': 'Rotace (orbitální)',                                                              // components/modebar/buttons.js:279
         'Pan': 'Posunovat',                                                                               // components/modebar/buttons.js:94
-        'Produced with Plotly': 'Vytvořeno pomocí Plotly',                                                      // components/modebar/modebar.js:256
+        'Produced with Plotly.js': 'Vytvořeno pomocí Plotly.js',                                                // components/modebar/modebar.js:256
         'Reset': 'Obnovit nastavení',                                                                            // components/modebar/buttons.js:432
         'Reset axes': 'Obnovit nastavení os',                                                                // components/modebar/buttons.js:148
         'Reset camera to default': 'Obnovit nastavení kamery na výchozí stav',                                      // components/modebar/buttons.js:314

package/lib/locales/cy.js

@@ -24,7 +24,7 @@ module.exports = {
         'Lasso Select': 'Dewiswch â lasŵ', // components / modebar / buttons.js: 123
         'Orbital rotation': 'Cylchdroi orbital', // components / modebar / buttons.js: 287
         'Pan': 'Pan', // components / modebar / buttons.js: 105
-        'Produced with Plotly': 'Cynhyrchwyd gyda Plotly', // components / modebar / modebar.js: 272
+        'Produced with Plotly.js': 'Cynhyrchwyd gyda Plotly.js', // components / modebar / modebar.js: 272
         'Reset': 'Ailosod', // components / modebar / buttons.js: 443
         'Reset axes': 'Ailosod echelinau', // components / modebar / buttons.js: 159
         'Reset camera to default': 'Ailosod camera i\'r rhagosodiad', // components / modebar / buttons.js: 325

package/lib/locales/de.js

@@ -23,7 +23,7 @@ module.exports = {
         'Lasso Select': 'Lassoauswahl',                                                                     // components/modebar/buttons.js:112
         'Orbital rotation': 'Orbitalrotation',                                                              // components/modebar/buttons.js:279
         'Pan': 'Verschieben',                                                                               // components/modebar/buttons.js:94
-        'Produced with Plotly': 'Erstellt mit Plotly',                                                      // components/modebar/modebar.js:256
+        'Produced with Plotly.js': 'Erstellt mit Plotly.js',                                                // components/modebar/modebar.js:256
         'Reset': 'Zurücksetzen',                                                                            // components/modebar/buttons.js:432
         'Reset axes': 'Achsen zurücksetzen',                                                                // components/modebar/buttons.js:148
         'Reset camera to default': 'Kamera auf Standard zurücksetzen',                                      // components/modebar/buttons.js:314

package/lib/locales/es.js

@@ -24,7 +24,7 @@ module.exports = {
         'Lasso Select': 'Seleccionar con lazo',                       // components/modebar/buttons.js:112
         'Orbital rotation': 'Rotación esférica',                      // components/modebar/buttons.js:279
         'Pan': 'Modo Panorámica',                                     // components/modebar/buttons.js:94
-        'Produced with Plotly': 'Hecho con Plotly',                   // components/modebar/modebar.js:256
+        'Produced with Plotly.js': 'Hecho con Plotly.js',             // components/modebar/modebar.js:256
         'Reset': 'Reiniciar',                                         // components/modebar/buttons.js:431
         'Reset axes': 'Reiniciar ejes',                               // components/modebar/buttons.js:148
         'Reset camera to default': 'Restaurar cámara predeterminada', // components/modebar/buttons.js:313

package/lib/locales/fi.js

@@ -24,7 +24,7 @@ module.exports = {
         'Lasso Select': 'Lassovalinta',
         'Orbital rotation': 'Orbitaalikierto',
         'Pan': 'Panorointi',
-        'Produced with Plotly': 'Tuotettu Plotlyllä',
+        'Produced with Plotly.js': 'Tuotettu Plotly.jsllä',
         'Reset': 'Palauta oletusasetukset',
         'Reset axes': 'Palauta akselien oletusasetukset',
         'Reset camera to default': 'Palauta kameran oletusasetukset',

package/lib/locales/fr.js

@@ -24,7 +24,7 @@ module.exports = {
         'Lasso Select': 'Sélection lasso',
         'Orbital rotation': 'Rotation orbitale',
         'Pan': 'Translation',
-        'Produced with Plotly': 'Généré avec Plotly',
+        'Produced with Plotly.js': 'Généré avec Plotly.js',
         'Reset': 'Réinitialiser',
         'Reset axes': 'Réinitialiser les axes',
         'Reset camera to default': 'Régler la caméra à sa valeur défaut',

package/lib/locales/it.js

@@ -24,7 +24,7 @@ module.exports = {
         'Lasso Select': 'Selezione lazo',                                                                     // components/modebar/buttons.js:112
         'Orbital rotation': 'Rotazione orbitale',                                                              // components/modebar/buttons.js:279
         'Pan': 'Sposta',                                                                               // components/modebar/buttons.js:94
-        'Produced with Plotly': 'Creato con Plotly',                                                      // components/modebar/modebar.js:256
+        'Produced with Plotly.js': 'Creato con Plotly.js',                                                      // components/modebar/modebar.js:256
         'Reset': 'Reset',                                                                            // components/modebar/buttons.js:432
         'Reset axes': 'Resetta gli assi',                                                                // components/modebar/buttons.js:148
         'Reset camera to default': 'Reimposta la camera ai valori predefiniti',                                      // components/modebar/buttons.js:314

package/lib/locales/ja.js

@@ -23,7 +23,7 @@ module.exports = {
         'Lasso Select': '投げ縄選択',                                                                      // components/modebar/buttons.js:112
         'Orbital rotation': '軌道回転',                                                                    // components/modebar/buttons.js:279
         'Pan': '拡大',                                                                                     // components/modebar/buttons.js:94
-        'Produced with Plotly': 'Plotlyにより作成',                                                        // components/modebar/modebar.js:256
+        'Produced with Plotly.js': 'Plotly.jsにより作成',                                                  // components/modebar/modebar.js:256
         'Reset': 'リセット',                                                                                // components/modebar/buttons.js:432
         'Reset axes': '軸をリセット',                                                                       // components/modebar/buttons.js:148
         'Reset camera to default': 'カメラをデフォルトに戻す',                                              // components/modebar/buttons.js:314

package/lib/locales/ko.js

@@ -24,7 +24,7 @@ module.exports = {
         'Lasso Select': '올가미 선택',
         'Orbital rotation': '궤도 수정',
         'Pan': '이동',
-        'Produced with Plotly': 'Plotly 제공',
+        'Produced with Plotly.js': 'Plotly.js 제공',
         'Reset': '초기화',
         'Reset axes': '축 초기화',
         'Reset camera to default': 'camera를 기본값으로 초기화',

package/lib/locales/pt-br.js

@@ -24,7 +24,7 @@ module.exports = {
         'Lasso Select': 'Seleção de laço',
         'Orbital rotation': 'Rotação orbital',
         'Pan': 'Mover',
-        'Produced with Plotly': 'Criado com o Plotly',
+        'Produced with Plotly.js': 'Criado com o Plotly.js',
         'Reset': 'Restaurar',
         'Reset axes': 'Restaurar eixos',
         'Reset camera to default': 'Restaurar câmera para padrão',

package/lib/locales/pt-pt.js

@@ -24,7 +24,7 @@ module.exports = {
         'Lasso Select': 'Seleção de laço',
         'Orbital rotation': 'Rotação orbital',
         'Pan': 'Mover',
-        'Produced with Plotly': 'Criado com Plotly',
+        'Produced with Plotly.js': 'Criado com Plotly.js',
         'Reset': 'Restaurar',
         'Reset axes': 'Restaurar eixos',
         'Reset camera to default': 'Restaurar câmera para padrão',

package/lib/locales/ru.js

@@ -24,7 +24,7 @@ module.exports = {
         'Lasso Select': 'Лассо',
         'Orbital rotation': 'Орбитальное движение',
         'Pan': 'Сдвиг',
-        'Produced with Plotly': 'Создано с помощью Plotly',
+        'Produced with Plotly.js': 'Создано с помощью Plotly.js',
         'Reset': 'Сбросить к значениям по умолчанию',
         'Reset axes': 'Сбросить отображение осей к значениям по умолчанию',
         'Reset camera to default': 'Сбросить параметры камеры к значениям по умолчанию',

package/lib/locales/sv.js

@@ -24,7 +24,7 @@ module.exports = {
         'Lasso Select': 'Välj lasso',                                                    // components/modebar/buttons.js:121
         'Orbital rotation': 'Orbital rotation',                                          // components/modebar/buttons.js:281
         'Pan': 'Panorera',                                                               // components/modebar/buttons.js:103
-        'Produced with Plotly': 'Skapad med Plotly',                                     // components/modebar/modebar.js:304
+        'Produced with Plotly.js': 'Skapad med Plotly.js',                               // components/modebar/modebar.js:304
         'Reset': 'Återställ',                                                            // components/modebar/buttons.js:433
         'Reset axes': 'Återställ axlar',                                                 // components/modebar/buttons.js:157
         'Reset camera to default': 'Återställ kamera till standard',                     // components/modebar/buttons.js:319

package/lib/locales/sw.js

@@ -24,7 +24,7 @@ module.exports = {
         'Lasso Select': 'Kuteua lasso',
         'Orbital rotation': 'Mzunguko wa mazao',
         'Pan': 'Tandaza',
-        'Produced with Plotly': 'Ilitengenezwa na Plotly',
+        'Produced with Plotly.js': 'Ilitengenezwa na Plotly.js',
         'Reset': 'Weka upya',
         'Reset axes': 'Weka upya axes',
         'Reset camera to default': 'Rudisha kamera kwenye uhifadhi wa default',

package/lib/locales/uk.js

@@ -24,7 +24,7 @@ module.exports = {
         'Lasso Select': 'Ласо',
         'Orbital rotation': 'Рух по орбіті',
         'Pan': 'Зсув',
-        'Produced with Plotly': 'Створено за допомогою Plotly',
+        'Produced with Plotly.js': 'Створено за допомогою Plotly.js',
         'Reset': 'Встановити значення за замовчуванням',
         'Reset axes': 'Встановити осям значення за замовчуванням',
         'Reset camera to default': 'Встановити камері значення за замовчуванням',

package/lib/locales/zh-cn.js

@@ -23,7 +23,7 @@ module.exports = {
         'Lasso Select': '套索选择',                                                            // components/modebar/buttons.js:112
         'Orbital rotation': '轨道旋转',                                                        // components/modebar/buttons.js:279
         'Pan': '平移',
-        'Produced with Plotly': '由Plotly生成',                                              // components/modebar/modebar.js:256
+        'Produced with Plotly.js': '由Plotly.js生成',                                        // components/modebar/modebar.js:256
         'Reset': '重置',                                                                       // components/modebar/buttons.js:432
         'Reset axes': '重置轴',                                                                // components/modebar/buttons.js:148
         'Reset camera to default': '重置镜头视角为默认状态',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plotly.js",
-  "version": "2.8.2",
+  "version": "2.10.0",
   "description": "The open source javascript graphing library that powers plotly",
   "license": "MIT",
   "main": "./lib/index.js",
@@ -52,6 +52,8 @@
     "test-requirejs": "node tasks/test_requirejs.js",
     "test-plain-obj": "node tasks/test_plain_obj.js",
     "test": "npm run test-jasmine -- --nowatch && npm run test-bundle && npm run test-image && npm run test-export && npm run test-syntax && npm run lint",
+    "mathjax3": "node devtools/test_dashboard/server.js --mathjax3",
+    "mathjax3chtml": "node devtools/test_dashboard/server.js --mathjax3chtml",
     "strict": "node devtools/test_dashboard/server.js --strict",
     "start": "node devtools/test_dashboard/server.js",
     "baseline": "node test/image/make_baseline.js",
@@ -103,7 +105,7 @@
     "native-promise-only": "^0.8.1",
     "parse-svg-path": "^0.1.2",
     "polybooljs": "^1.2.0",
-    "probe-image-size": "^7.2.2",
+    "probe-image-size": "^7.2.3",
     "regl": "^2.1.0",
     "regl-error2d": "^2.0.12",
     "regl-line2d": "^3.1.2",
@@ -124,45 +126,46 @@
     "browserify": "^17.0.0",
     "browserify-transform-tools": "^1.7.0",
     "bubleify": "^2.0.0",
-    "canvas": "^2.8.0",
+    "canvas": "^2.9.0",
     "check-node-version": "^4.2.1",
     "chttps": "^1.0.6",
     "deep-equal": "^2.0.5",
     "derequire": "^2.1.1",
     "ecstatic": "^4.1.4",
-    "eslint": "^8.4.1",
+    "eslint": "^8.8.0",
     "extra-iterable": "^2.5.22",
     "falafel": "^2.2.4",
     "fs-extra": "^10.0.0",
-    "fuse.js": "^6.4.6",
+    "fuse.js": "^6.5.3",
     "glob": "^7.2.0",
     "gzip-size": "^6.0.0",
     "into-stream": "^6.0.0",
     "jasmine-core": "^3.5.0",
     "jsdom": "^19.0.0",
-    "karma": "^6.3.9",
+    "karma": "^6.3.16",
     "karma-browserify": "^8.1.0",
     "karma-chrome-launcher": "^3.1.0",
     "karma-firefox-launcher": "^2.1.2",
     "karma-ie-launcher": "^1.0.0",
     "karma-jasmine": "^3.3.1",
     "karma-jasmine-spec-tags": "^1.3.0",
-    "karma-spec-reporter": "0.0.32",
-    "karma-verbose-reporter": "0.0.6",
-    "karma-viewport": "^1.0.8",
+    "karma-spec-reporter": "^0.0.33",
+    "karma-verbose-reporter": "^0.0.8",
+    "karma-viewport": "1.0.2",
     "lodash": "^4.17.21",
     "madge": "^5.0.1",
-    "mathjax": "2.7.5",
+    "mathjax-v2": "npm:mathjax@2.7.5",
+    "mathjax-v3": "npm:mathjax@^3.2.0",
     "minify-stream": "^2.1.0",
     "npm-link-check": "^4.0.0",
     "open": "^8.4.0",
     "pixelmatch": "^5.2.1",
-    "prepend-file": "^2.0.0",
+    "prepend-file": "^2.0.1",
     "prettysize": "^2.0.0",
     "read-last-lines": "^1.8.0",
     "run-series": "^1.1.9",
     "sane-topojson": "^4.0.0",
-    "sass": "^1.44.0",
+    "sass": "^1.49.7",
     "through2": "^4.0.2",
     "true-case-path": "^2.2.1",
     "watchify": "^4.0.0"

package/src/components/colorbar/attributes.js

@@ -166,6 +166,7 @@ module.exports = overrideAll({
     ticklen: axesAttrs.ticklen,
     tickwidth: axesAttrs.tickwidth,
     tickcolor: axesAttrs.tickcolor,
+    ticklabelstep: axesAttrs.ticklabelstep,
     showticklabels: axesAttrs.showticklabels,
     tickfont: fontAttrs({
         description: 'Sets the color bar\'s tick label font'

package/src/components/colorbar/draw.js

@@ -933,6 +933,7 @@ function mockColorBarAxis(gd, opts, zrange) {
         showticklabels: opts.showticklabels,
         ticklabelposition: opts.ticklabelposition,
         ticklabeloverflow: opts.ticklabeloverflow,
+        ticklabelstep: opts.ticklabelstep,
         tickfont: opts.tickfont,
         tickangle: opts.tickangle,
         tickformat: opts.tickformat,

package/src/components/drawing/index.js

@@ -177,24 +177,42 @@ drawing.dashStyle = function(dash, lineWidth) {
     return dash;
 };
 
+function setFillStyle(sel, trace, gd) {
+    var markerPattern = trace.fillpattern;
+    var patternShape = markerPattern && drawing.getPatternAttr(markerPattern.shape, 0, '');
+    if(patternShape) {
+        var patternBGColor = drawing.getPatternAttr(markerPattern.bgcolor, 0, null);
+        var patternFGColor = drawing.getPatternAttr(markerPattern.fgcolor, 0, null);
+        var patternFGOpacity = markerPattern.fgopacity;
+        var patternSize = drawing.getPatternAttr(markerPattern.size, 0, 8);
+        var patternSolidity = drawing.getPatternAttr(markerPattern.solidity, 0, 0.3);
+        var patternID = trace.uid;
+        drawing.pattern(sel, 'point', gd, patternID,
+            patternShape, patternSize, patternSolidity,
+            undefined, markerPattern.fillmode,
+            patternBGColor, patternFGColor, patternFGOpacity
+        );
+    } else if(trace.fillcolor) {
+        sel.call(Color.fill, trace.fillcolor);
+    }
+}
+
 // Same as fillGroupStyle, except in this case the selection may be a transition
-drawing.singleFillStyle = function(sel) {
+drawing.singleFillStyle = function(sel, gd) {
     var node = d3.select(sel.node());
     var data = node.data();
-    var fillcolor = (((data[0] || [])[0] || {}).trace || {}).fillcolor;
-    if(fillcolor) {
-        sel.call(Color.fill, fillcolor);
-    }
+    var trace = ((data[0] || [])[0] || {}).trace || {};
+    setFillStyle(sel, trace, gd);
 };
 
-drawing.fillGroupStyle = function(s) {
+drawing.fillGroupStyle = function(s, gd) {
     s.style('stroke-width', 0)
     .each(function(d) {
         var shape = d3.select(this);
         // N.B. 'd' won't be a calcdata item when
         // fill !== 'none' on a segment-less and marker-less trace
         if(d[0].trace) {
-            shape.call(Color.fill, d[0].trace.fillcolor);
+            setFillStyle(shape, d[0].trace, gd);
         }
     });
 };
@@ -347,12 +365,7 @@ drawing.gradient = function(sel, gd, gradientID, type, colorscale, prop) {
     sel.style(prop, getFullUrl(fullID, gd))
         .style(prop + '-opacity', null);
 
-    var className2query = function(s) {
-        return '.' + s.attr('class').replace(/\s/g, '.');
-    };
-    var k = className2query(d3.select(sel.node().parentNode)) +
-        '>' + className2query(sel);
-    fullLayout._gradientUrlQueryParts[k] = 1;
+    sel.classed('gradient_filled', true);
 };
 
 /**
@@ -559,11 +572,6 @@ drawing.pattern = function(sel, calledBy, gd, patternID, shape, size, solidity,
         .style('fill-opacity', null);
 
     sel.classed('pattern_filled', true);
-    var className2query = function(s) {
-        return '.' + s.attr('class').replace(/\s/g, '.');
-    };
-    var k = className2query(d3.select(sel.node().parentNode)) + '>.pattern_filled';
-    fullLayout._patternUrlQueryParts[k] = 1;
 };
 
 /*
@@ -579,9 +587,7 @@ drawing.initGradients = function(gd) {
     var gradientsGroup = Lib.ensureSingle(fullLayout._defs, 'g', 'gradients');
     gradientsGroup.selectAll('linearGradient,radialGradient').remove();
 
-    // initialize stash of query parts filled in Drawing.gradient,
-    // used to fix URL strings during image exports
-    fullLayout._gradientUrlQueryParts = {};
+    d3.select(gd).selectAll('.gradient_filled').classed('gradient_filled', false);
 };
 
 drawing.initPatterns = function(gd) {
@@ -590,9 +596,7 @@ drawing.initPatterns = function(gd) {
     var patternsGroup = Lib.ensureSingle(fullLayout._defs, 'g', 'patterns');
     patternsGroup.selectAll('pattern').remove();
 
-    // initialize stash of query parts filled in Drawing.pattern,
-    // used to fix URL strings during image exports
-    fullLayout._patternUrlQueryParts = {};
+    d3.select(gd).selectAll('.pattern_filled').classed('pattern_filled', false);
 };
 
 drawing.getPatternAttr = function(mp, i, dflt) {

package/src/components/legend/draw.js

@@ -714,7 +714,6 @@ function computeLegendDimensions(gd, groups, traces, legendObj) {
                     offsetY += h;
                     maxWidthInGroup = Math.max(maxWidthInGroup, textGap + w);
                 });
-                maxGroupHeightInRow = Math.max(maxGroupHeightInRow, offsetY);
 
                 var next = maxWidthInGroup + itemGap;
 
@@ -730,6 +729,8 @@ function computeLegendDimensions(gd, groups, traces, legendObj) {
                     groupOffsetX = 0;
                     groupOffsetY += maxGroupHeightInRow + traceGroupGap;
                     maxGroupHeightInRow = offsetY;
+                } else {
+                    maxGroupHeightInRow = Math.max(maxGroupHeightInRow, offsetY);
                 }
 
                 Drawing.setTranslate(this, groupOffsetX, groupOffsetY);

package/src/components/legend/style.js

@@ -111,12 +111,16 @@ module.exports = function style(s, gd, legend) {
         var colorscale = cOpts.colorscale;
         var reversescale = cOpts.reversescale;
 
-        var fillGradient = function(s) {
+        var fillStyle = function(s) {
             if(s.size()) {
-                var gradientID = 'legendfill-' + trace.uid;
-                Drawing.gradient(s, gd, gradientID,
-                    getGradientDirection(reversescale),
-                    colorscale, 'fill');
+                if(showFill) {
+                    Drawing.fillGroupStyle(s, gd);
+                } else {
+                    var gradientID = 'legendfill-' + trace.uid;
+                    Drawing.gradient(s, gd, gradientID,
+                        getGradientDirection(reversescale),
+                        colorscale, 'fill');
+                }
             }
         };
 
@@ -145,7 +149,7 @@ module.exports = function style(s, gd, legend) {
         fill.enter().append('path').classed('js-fill', true);
         fill.exit().remove();
         fill.attr('d', pathStart + 'h' + itemWidth + 'v6h-' + itemWidth + 'z')
-            .call(showFill ? Drawing.fillGroupStyle : fillGradient);
+            .call(fillStyle);
 
         if(showLine || showGradientLine) {
             var lw = boundLineWidth(undefined, trace.line, MAX_LINE_WIDTH, CST_LINE_WIDTH);

package/src/components/modebar/modebar.js

@@ -5,6 +5,8 @@ var isNumeric = require('fast-isnumeric');
 
 var Lib = require('../../lib');
 var Icons = require('../../fonts/ploticon');
+var version = require('../../version').version;
+
 var Parser = new DOMParser();
 
 /**
@@ -283,6 +285,10 @@ proto.hasButtons = function(buttons) {
     return true;
 };
 
+function jsVersion(str) {
+    return str + ' (v' + version + ')';
+}
+
 /**
  * @return {HTMLDivElement} The logo image wrapped in a group
  */
@@ -292,7 +298,7 @@ proto.getLogo = function() {
 
     a.href = 'https://plotly.com/';
     a.target = '_blank';
-    a.setAttribute('data-title', Lib._(this.graphInfo, 'Produced with Plotly'));
+    a.setAttribute('data-title', jsVersion(Lib._(this.graphInfo, 'Produced with Plotly.js')));
     a.className = 'modebar-btn plotlyjsicon modebar-btn--logo';
 
     a.appendChild(this.createIcon(Icons.newplotlylogo));

package/src/lib/svg_text_utils.js

@@ -19,6 +19,7 @@ exports.convertToTspans = function(_context, gd, _callback) {
     // Until we get tex integrated more fully (so it can be used along with non-tex)
     // allow some elements to prohibit it by attaching 'data-notex' to the original
     var tex = (!_context.attr('data-notex')) &&
+        gd && gd._context.typesetMath &&
         (typeof MathJax !== 'undefined') &&
         str.match(FIND_TEX);
 
@@ -173,70 +174,154 @@ function cleanEscapesForTex(s) {
         .replace(GT_MATCH, '\\gt ');
 }
 
+var inlineMath = [['$', '$'], ['\\(', '\\)']];
+
 function texToSVG(_texString, _config, _callback) {
+    var MathJaxVersion = parseInt(
+        (MathJax.version || '').split('.')[0]
+    );
+
+    if(
+        MathJaxVersion !== 2 &&
+        MathJaxVersion !== 3
+    ) {
+        Lib.warn('No MathJax version:', MathJax.version);
+        return;
+    }
+
     var originalRenderer,
         originalConfig,
         originalProcessSectionDelay,
         tmpDiv;
 
-    MathJax.Hub.Queue(
-    function() {
+    var setConfig2 = function() {
         originalConfig = Lib.extendDeepAll({}, MathJax.Hub.config);
 
         originalProcessSectionDelay = MathJax.Hub.processSectionDelay;
         if(MathJax.Hub.processSectionDelay !== undefined) {
-            // MathJax 2.5+
+            // MathJax 2.5+ but not 3+
             MathJax.Hub.processSectionDelay = 0;
         }
 
         return MathJax.Hub.Config({
             messageStyle: 'none',
             tex2jax: {
-                inlineMath: [['$', '$'], ['\\(', '\\)']]
+                inlineMath: inlineMath
             },
             displayAlign: 'left',
         });
-    },
-    function() {
-        // Get original renderer
+    };
+
+    var setConfig3 = function() {
+        originalConfig = Lib.extendDeepAll({}, MathJax.config);
+
+        if(!MathJax.config.tex) {
+            MathJax.config.tex = {};
+        }
+
+        MathJax.config.tex.inlineMath = inlineMath;
+    };
+
+    var setRenderer2 = function() {
         originalRenderer = MathJax.Hub.config.menuSettings.renderer;
         if(originalRenderer !== 'SVG') {
             return MathJax.Hub.setRenderer('SVG');
         }
-    },
-    function() {
+    };
+
+    var setRenderer3 = function() {
+        originalRenderer = MathJax.config.startup.output;
+        if(originalRenderer !== 'svg') {
+            MathJax.config.startup.output = 'svg';
+        }
+    };
+
+    var initiateMathJax = function() {
         var randomID = 'math-output-' + Lib.randstr({}, 64);
         tmpDiv = d3.select('body').append('div')
             .attr({id: randomID})
-            .style({visibility: 'hidden', position: 'absolute'})
-            .style({'font-size': _config.fontSize + 'px'})
+            .style({
+                visibility: 'hidden',
+                position: 'absolute',
+                'font-size': _config.fontSize + 'px'
+            })
             .text(cleanEscapesForTex(_texString));
 
-        return MathJax.Hub.Typeset(tmpDiv.node());
-    },
-    function() {
-        var glyphDefs = d3.select('body').select('#MathJax_SVG_glyphs');
+        var tmpNode = tmpDiv.node();
+
+        return MathJaxVersion === 2 ?
+            MathJax.Hub.Typeset(tmpNode) :
+            MathJax.typeset([tmpNode]);
+    };
+
+    var finalizeMathJax = function() {
+        var sel = tmpDiv.select(
+            MathJaxVersion === 2 ? '.MathJax_SVG' : '.MathJax'
+        );
 
-        if(tmpDiv.select('.MathJax_SVG').empty() || !tmpDiv.select('svg').node()) {
+        var node = !sel.empty() && tmpDiv.select('svg').node();
+        if(!node) {
             Lib.log('There was an error in the tex syntax.', _texString);
             _callback();
         } else {
-            var svgBBox = tmpDiv.select('svg').node().getBoundingClientRect();
-            _callback(tmpDiv.select('.MathJax_SVG'), glyphDefs, svgBBox);
+            var nodeBBox = node.getBoundingClientRect();
+            var glyphDefs;
+            if(MathJaxVersion === 2) {
+                glyphDefs = d3.select('body').select('#MathJax_SVG_glyphs');
+            } else {
+                glyphDefs = sel.select('defs');
+            }
+            _callback(sel, glyphDefs, nodeBBox);
         }
 
         tmpDiv.remove();
+    };
 
+    var resetRenderer2 = function() {
         if(originalRenderer !== 'SVG') {
             return MathJax.Hub.setRenderer(originalRenderer);
         }
-    },
-    function() {
+    };
+
+    var resetRenderer3 = function() {
+        if(originalRenderer !== 'svg') {
+            MathJax.config.startup.output = originalRenderer;
+        }
+    };
+
+    var resetConfig2 = function() {
         if(originalProcessSectionDelay !== undefined) {
             MathJax.Hub.processSectionDelay = originalProcessSectionDelay;
         }
         return MathJax.Hub.Config(originalConfig);
-    });
+    };
+
+    var resetConfig3 = function() {
+        MathJax.config = originalConfig;
+    };
+
+    if(MathJaxVersion === 2) {
+        MathJax.Hub.Queue(
+            setConfig2,
+            setRenderer2,
+            initiateMathJax,
+            finalizeMathJax,
+            resetRenderer2,
+            resetConfig2
+        );
+    } else if(MathJaxVersion === 3) {
+        setConfig3();
+        setRenderer3();
+        MathJax.startup.defaultReady();
+
+        MathJax.startup.promise.then(function() {
+            initiateMathJax();
+            finalizeMathJax();
+
+            resetRenderer3();
+            resetConfig3();
+        });
+    }
 }
 
 var TAG_STYLES = {