Shared color axes

src/components/colorbar/draw.js

@@ -81,7 +81,8 @@ function makeColorBarData(gd) {
         var moduleOpts = trace._module.colorbar;
 
         if(trace.visible === true && moduleOpts) {
-            var cbOpts = Array.isArray(moduleOpts) ? moduleOpts : [moduleOpts];
+            var allowsMultiplotCbs = Array.isArray(moduleOpts);
+            var cbOpts = allowsMultiplotCbs ? moduleOpts : [moduleOpts];
 
             for(var j = 0; j < cbOpts.length; j++) {
                 var cbOpt = cbOpts[j];
@@ -90,7 +91,7 @@ function makeColorBarData(gd) {
 
                 if(cont && cont.showscale) {
                     var opts = cont.colorbar;
-                    opts._id = 'cb' + trace.uid;
+                    opts._id = 'cb' + trace.uid + (allowsMultiplotCbs && contName ? '-' + contName : '');
                     opts._traceIndex = trace.index;
                     opts._propPrefix = (contName ? contName + '.' : '') + 'colorbar.';
 

src/components/colorscale/attributes.js

@@ -8,6 +8,9 @@
 
 'use strict';
 
+var colorbarAttrs = require('../colorbar/attributes');
+var counterRegex = require('../../lib/regex').counter;
+
 var palettes = require('./scales.js').scales;
 var paletteStr = Object.keys(palettes);
 
@@ -240,6 +243,25 @@ module.exports = function colorScaleAttrs(context, opts) {
                 effectDesc
             ].join('')
         };
+
+        attrs.colorbar = colorbarAttrs;
+    }
+
+    if(!opts.noColorAxis) {
+        attrs.coloraxis = {
+            valType: 'subplotid',
+            role: 'info',
+            regex: counterRegex('coloraxis'),
+            dflt: null,
+            editType: 'calc',
+            description: [
+                'Sets a reference to a shared color axis.',
+                'References to these shared color axes are *coloraxis*, *coloraxis2*, *coloraxis3*, etc.',
+                'Settings for these shared color axes are set in the layout, under',
+                '`layout.coloraxis`, `layout.coloraxis2`, etc.',
+                'Note that multiple color scales can be linked to the same color axis.'
+            ].join(' ')
+        };
     }
 
     return attrs;

src/components/colorscale/cross_trace_defaults.js

@@ -65,12 +65,5 @@ module.exports = function crossTraceDefaults(fullData) {
             });
         }
 
-        if(hasColorscale(trace, 'line')) {
-            relinkColorAtts(trace, {
-                container: 'line',
-                min: 'cmin',
-                max: 'cmax'
-            });
-        }
     }
 };

src/components/colorscale/defaults.js

@@ -15,20 +15,63 @@ var hasColorbar = require('../colorbar/has_colorbar');
 var colorbarDefaults = require('../colorbar/defaults');
 
 var isValidScale = require('./scales').isValid;
+var traceIs = require('../../registry').traceIs;
 
-function npMaybe(cont, prefix) {
+function npMaybe(outerCont, prefix) {
     var containerStr = prefix.slice(0, prefix.length - 1);
     return prefix ?
-        Lib.nestedProperty(cont, containerStr).get() || {} :
-        cont;
+        Lib.nestedProperty(outerCont, containerStr).get() || {} :
+        outerCont;
 }
 
-module.exports = function colorScaleDefaults(traceIn, traceOut, layout, coerce, opts) {
+module.exports = function colorScaleDefaults(outerContIn, outerContOut, layout, coerce, opts) {
     var prefix = opts.prefix;
     var cLetter = opts.cLetter;
-    var containerIn = npMaybe(traceIn, prefix);
-    var containerOut = npMaybe(traceOut, prefix);
-    var template = npMaybe(traceOut._template || {}, prefix) || {};
+    var inTrace = '_module' in outerContOut;
+    var containerIn = npMaybe(outerContIn, prefix);
+    var containerOut = npMaybe(outerContOut, prefix);
+    var template = npMaybe(outerContOut._template || {}, prefix) || {};
+
+    // colorScaleDefaults wrapper called if-ever we need to reset the colorscale
+    // attributes for containers that were linked to invalid color axes
+    var thisFn = function() {
+        delete outerContIn.coloraxis;
+        delete outerContOut.coloraxis;
+        return colorScaleDefaults(outerContIn, outerContOut, layout, coerce, opts);
+    };
+
+    if(inTrace) {
+        var colorAxes = layout._colorAxes || {};
+        var colorAx = coerce(prefix + 'coloraxis');
+
+        if(colorAx) {
+            var colorbarVisuals = (
+                traceIs(outerContOut, 'contour') &&
+                Lib.nestedProperty(outerContOut, 'contours.coloring').get()
+            ) || 'heatmap';
+
+            var stash = colorAxes[colorAx];
+
+            if(stash) {
+                stash[2].push(thisFn);
+
+                if(stash[0] !== colorbarVisuals) {
+                    stash[0] = false;
+                    Lib.warn([
+                        'Ignoring coloraxis:', colorAx, 'setting',
+                        'as it is linked to incompatible colorscales.'
+                    ].join(' '));
+                }
+            } else {
+                // stash:
+                // - colorbar visual 'type'
+                // - colorbar options to help in Colorbar.draw
+                // - list of colorScaleDefaults wrapper functions
+                colorAxes[colorAx] = [colorbarVisuals, outerContOut, [thisFn]];
+            }
+            return;
+        }
+    }
 
     var minIn = containerIn[cLetter + 'min'];
     var maxIn = containerIn[cLetter + 'max'];
@@ -58,7 +101,7 @@ module.exports = function colorScaleDefaults(traceIn, traceOut, layout, coerce,
         // handles both the trace case where the dflt is listed in attributes and
         // the marker case where the dflt is determined by hasColorbar
         var showScaleDflt;
-        if(prefix) showScaleDflt = hasColorbar(containerIn);
+        if(prefix && inTrace) showScaleDflt = hasColorbar(containerIn);
 
         var showScale = coerce(prefix + 'showscale', showScaleDflt);
         if(showScale) colorbarDefaults(containerIn, containerOut, layout);

src/components/colorscale/layout_attributes.js

@@ -8,40 +8,63 @@
 
 'use strict';
 
+var extendFlat = require('../../lib/extend').extendFlat;
+
+var colorScaleAttrs = require('./attributes');
 var scales = require('./scales').scales;
 
 var msg = 'Note that `autocolorscale` must be true for this attribute to work.';
 
 module.exports = {
     editType: 'calc',
-    sequential: {
-        valType: 'colorscale',
-        dflt: scales.Reds,
-        role: 'style',
-        editType: 'calc',
-        description: [
-            'Sets the default sequential colorscale for positive values.',
-            msg
-        ].join(' ')
-    },
-    sequentialminus: {
-        valType: 'colorscale',
-        dflt: scales.Blues,
-        role: 'style',
+
+    colorscale: {
         editType: 'calc',
-        description: [
-            'Sets the default sequential colorscale for negative values.',
-            msg
-        ].join(' ')
+
+        sequential: {
+            valType: 'colorscale',
+            dflt: scales.Reds,
+            role: 'style',
+            editType: 'calc',
+            description: [
+                'Sets the default sequential colorscale for positive values.',
+                msg
+            ].join(' ')
+        },
+        sequentialminus: {
+            valType: 'colorscale',
+            dflt: scales.Blues,
+            role: 'style',
+            editType: 'calc',
+            description: [
+                'Sets the default sequential colorscale for negative values.',
+                msg
+            ].join(' ')
+        },
+        diverging: {
+            valType: 'colorscale',
+            dflt: scales.RdBu,
+            role: 'style',
+            editType: 'calc',
+            description: [
+                'Sets the default diverging colorscale.',
+                msg
+            ].join(' ')
+        }
     },
-    diverging: {
-        valType: 'colorscale',
-        dflt: scales.RdBu,
-        role: 'style',
+
+    coloraxis: extendFlat({
+        // not really a 'subplot' attribute container,
+        // but this is the flag we use to denote attributes that
+        // support yaxis, yaxis2, yaxis3, ... counters
+        _isSubplotObj: true,
         editType: 'calc',
         description: [
-            'Sets the default diverging colorscale.',
-            msg
+            ''
         ].join(' ')
-    }
+    }, colorScaleAttrs('', {
+        colorAttr: 'corresponding trace color array(s)',
+        noColorAxis: true,
+        showScaleDflt: true
+    }))
 };

src/components/colorscale/layout_defaults.js

@@ -9,17 +9,41 @@
 'use strict';
 
 var Lib = require('../../lib');
-var colorscaleAttrs = require('./layout_attributes');
 var Template = require('../../plot_api/plot_template');
 
+var colorScaleAttrs = require('./layout_attributes');
+var colorScaleDefaults = require('./defaults');
+
 module.exports = function supplyLayoutDefaults(layoutIn, layoutOut) {
-    var colorscaleIn = layoutIn.colorscale;
-    var colorscaleOut = Template.newContainer(layoutOut, 'colorscale');
     function coerce(attr, dflt) {
-        return Lib.coerce(colorscaleIn, colorscaleOut, colorscaleAttrs, attr, dflt);
+        return Lib.coerce(layoutIn, layoutOut, colorScaleAttrs, attr, dflt);
     }
 
-    coerce('sequential');
-    coerce('sequentialminus');
-    coerce('diverging');
+    coerce('colorscale.sequential');
+    coerce('colorscale.sequentialminus');
+    coerce('colorscale.diverging');
+
+    var colorAxes = layoutOut._colorAxes;
+    var colorAxIn, colorAxOut;
+
+    function coerceAx(attr, dflt) {
+        return Lib.coerce(colorAxIn, colorAxOut, colorScaleAttrs.coloraxis, attr, dflt);
+    }
+
+    for(var k in colorAxes) {
+        var stash = colorAxes[k];
+
+        if(stash[0]) {
+            colorAxIn = layoutIn[k] || {};
+            colorAxOut = Template.newContainer(layoutOut, k, 'coloraxis');
+            colorAxOut._name = k;
+            colorScaleDefaults(colorAxIn, colorAxOut, layoutOut, coerceAx, {prefix: '', cLetter: 'c'});
+        } else {
+            // re-coerce colorscale attributes w/o coloraxis
+            for(var i = 0; i < stash[2].length; i++) {
+                stash[2][i]();
+            }
+            delete layoutOut._colorAxes[k];
+        }
+    }
 };

src/plot_api/plot_schema.js

@@ -544,24 +544,26 @@ function getLayoutAttributes() {
         var schema = _module.schema;
 
         if(schema && (schema.subplots || schema.layout)) {
-        /*
-         * Components with defined schema have already been merged in at register time
-         * but a few components define attributes that apply only to xaxis
-         * not yaxis (rangeselector, rangeslider) - delete from y schema.
-         * Note that the input attributes for xaxis/yaxis are the same object
-         * so it's not possible to only add them to xaxis from the start.
-         * If we ever have such asymmetry the other way, or anywhere else,
-         * we will need to extend both this code and mergeComponentAttrsToSubplot
-         * (which will not find yaxis only for example)
-         */
-
+            /*
+             * Components with defined schema have already been merged in at register time
+             * but a few components define attributes that apply only to xaxis
+             * not yaxis (rangeselector, rangeslider) - delete from y schema.
+             * Note that the input attributes for xaxis/yaxis are the same object
+             * so it's not possible to only add them to xaxis from the start.
+             * If we ever have such asymmetry the other way, or anywhere else,
+             * we will need to extend both this code and mergeComponentAttrsToSubplot
+             * (which will not find yaxis only for example)
+             */
             var subplots = schema.subplots;
             if(subplots && subplots.xaxis && !subplots.yaxis) {
-                for(var xkey in subplots.xaxis) delete layoutAttributes.yaxis[xkey];
+                for(var xkey in subplots.xaxis) {
+                    delete layoutAttributes.yaxis[xkey];
+                }
             }
+        } else if(_module.name === 'colorscale') {
+            extendDeepAll(layoutAttributes, _module.layoutAttributes);
         } else if(_module.layoutAttributes) {
-        // older style without schema need to be explicitly merged in now
-
+            // older style without schema need to be explicitly merged in now
             insertAttrs(layoutAttributes, _module.layoutAttributes, _module.name);
         }
     }

src/plots/layout_attributes.js

@@ -11,7 +11,6 @@
 var fontAttrs = require('./font_attributes');
 var animationAttrs = require('./animation_attributes');
 var colorAttrs = require('../components/color/attributes');
-var colorscaleAttrs = require('../components/colorscale/layout_attributes');
 var padAttrs = require('./pad_attributes');
 var extendFlat = require('../lib/extend').extendFlat;
 
@@ -292,7 +291,6 @@ module.exports = {
         editType: 'calc',
         description: 'Sets the default trace colors.'
     },
-    colorscale: colorscaleAttrs,
     datarevision: {
         valType: 'any',
         role: 'info',

src/plots/plots.js

@@ -390,6 +390,8 @@ plots.supplyDefaults = function(gd, opts) {
     newFullLayout._firstScatter = {};
     // for grouped bar/box/violin trace to share config across traces
     newFullLayout._alignmentOpts = {};
+    // track color axes referenced in the data
+    newFullLayout._colorAxes = {};
 
     // for traces to request a default rangeslider on their x axes
     // eg set `_requestRangeslider.x2 = true` for xaxis2

src/traces/bar/attributes.js

@@ -10,8 +10,7 @@
 
 var scatterAttrs = require('../scatter/attributes');
 var hovertemplateAttrs = require('../../components/fx/hovertemplate_attributes');
-var colorAttributes = require('../../components/colorscale/attributes');
-var colorbarAttrs = require('../../components/colorbar/attributes');
+var colorScaleAttrs = require('../../components/colorscale/attributes');
 var fontAttrs = require('../../plots/font_attributes');
 var constants = require('./constants.js');
 
@@ -33,13 +32,12 @@ var markerLineWidth = extendFlat({},
 var markerLine = extendFlat({
     width: markerLineWidth,
     editType: 'calc'
-}, colorAttributes('marker.line'));
+}, colorScaleAttrs('marker.line'));
 
 var marker = extendFlat({
     line: markerLine,
     editType: 'calc'
-}, colorAttributes('marker'), {
-    colorbar: colorbarAttrs,
+}, colorScaleAttrs('marker'), {
     opacity: {
         valType: 'number',
         arrayOk: true,

src/traces/choropleth/attributes.js

@@ -10,8 +10,7 @@
 
 var hovertemplateAttrs = require('../../components/fx/hovertemplate_attributes');
 var scatterGeoAttrs = require('../scattergeo/attributes');
-var colorscaleAttrs = require('../../components/colorscale/attributes');
-var colorbarAttrs = require('../../components/colorbar/attributes');
+var colorScaleAttrs = require('../../components/colorscale/attributes');
 var plotAttrs = require('../../plots/attributes');
 
 var extendFlat = require('../../lib/extend').extendFlat;
@@ -80,9 +79,8 @@ module.exports = extendFlat({
     hovertemplate: hovertemplateAttrs(),
 },
 
-    colorscaleAttrs('', {
+    colorScaleAttrs('', {
         cLetter: 'z',
         editTypeOverride: 'calc'
-    }),
-    {colorbar: colorbarAttrs}
+    })
 );