make use of colorscale makeScaleFunction everywhere!

- no more d3.scale.linear in heatmap, contour and all the
  colorbar modules!
- this adds support for rgba colorscales in contour traces.

Author: etpinard

src/components/drawing/index.js

@@ -14,13 +14,13 @@ var isNumeric = require('fast-isnumeric');
 
 var Registry = require('../../registry');
 var Color = require('../color');
-var Colorscale = require('../colorscale');
 var Lib = require('../../lib');
 var svgTextUtils = require('../../lib/svg_text_utils');
 
 var xmlnsNamespaces = require('../../constants/xmlns_namespaces');
 var subTypes = require('../../traces/scatter/subtypes');
 var makeBubbleSizeFn = require('../../traces/scatter/make_bubble_size_func');
+var makeScaleFunction = require('../colorscale/make_scale_function');
 
 var drawing = module.exports = {};
 
@@ -331,7 +331,8 @@ drawing.tryColorscale = function(cont, contIn, prefix) {
             Lib.nestedProperty(contIn, prefix + 'cmin').set(min);
             Lib.nestedProperty(contIn, prefix + 'cmax').set(max);
         }
-        return Colorscale.makeScaleFunction(scl, min, max);
+
+        return makeScaleFunction(scl, min, max);
     }
     else return Lib.identity;
 };

src/traces/choropleth/plot.js

@@ -16,7 +16,6 @@ var Fx = require('../../plots/cartesian/graph_interact');
 var Color = require('../../components/color');
 var Drawing = require('../../components/drawing');
 
-var getColorscale = require('../../components/colorscale/get_scale');
 var makeScaleFunction = require('../../components/colorscale/make_scale_function');
 var getTopojsonFeatures = require('../../lib/topojson_utils').getTopojsonFeatures;
 var locationToFeature = require('../../lib/geo_location_utils').locationToFeature;
@@ -151,11 +150,13 @@ plotChoropleth.style = function(geo) {
             var trace = calcTrace[0].trace,
                 s = d3.select(this),
                 marker = trace.marker || {},
-                markerLine = marker.line || {},
-                zmin = trace.zmin,
-                zmax = trace.zmax,
-                scl = getColorscale(trace.colorscale),
-                sclFunc = makeScaleFunction(scl, zmin, zmax);
+                markerLine = marker.line || {};
+
+            var sclFunc = makeScaleFunction(
+                trace.colorscale,
+                trace.zmin,
+                trace.zmax
+            );
 
             s.selectAll('path.choroplethlocation')
                 .each(function(pt) {

src/traces/contour/make_color_map.js

@@ -10,9 +10,7 @@
 'use strict';
 
 var d3 = require('d3');
-
-var getColorscale = require('../../components/colorscale/get_scale');
-
+var makeScaleFunction = require('../../components/colorscale/make_scale_function');
 
 module.exports = function makeColorMap(trace) {
     var contours = trace.contours,
@@ -22,7 +20,7 @@ module.exports = function makeColorMap(trace) {
         nc = Math.floor((end + cs / 10 - start) / cs) + 1,
         extra = contours.coloring === 'lines' ? 0 : 1;
 
-    var scl = getColorscale(trace.colorscale),
+    var scl = trace.colorscale,
         len = scl.length;
 
     var domain = new Array(len),
@@ -69,10 +67,5 @@ module.exports = function makeColorMap(trace) {
         }
     }
 
-    var colorMap = d3.scale.linear()
-        .interpolate(d3.interpolateRgb)
-        .domain(domain)
-        .range(range);
-
-    return colorMap;
+    return makeScaleFunction(scl, null, null, { domain: domain, range: range });
 };

src/traces/heatmap/colorbar.js

@@ -9,19 +9,17 @@
 
 'use strict';
 
-var d3 = require('d3');
 var isNumeric = require('fast-isnumeric');
 
 var Lib = require('../../lib');
 var Plots = require('../../plots/plots');
-var getColorscale = require('../../components/colorscale/get_scale');
+var makeScaleFunction = require('../../components/colorscale/make_scale_function');
 var drawColorbar = require('../../components/colorbar/draw');
 
 
 module.exports = function colorbar(gd, cd) {
     var trace = cd[0].trace,
         cbId = 'cb' + trace.uid,
-        scl = getColorscale(trace.colorscale),
         zmin = trace.zmin,
         zmax = trace.zmax;
 
@@ -35,10 +33,10 @@ module.exports = function colorbar(gd, cd) {
         return;
     }
 
-    var cb = cd[0].t.cb = drawColorbar(gd, cbId);
-    cb.fillcolor(d3.scale.linear()
-            .domain(scl.map(function(v) { return zmin + v[0] * (zmax - zmin); }))
-            .range(scl.map(function(v) { return v[1]; })))
+    var cb = cd[0].t.cb = drawColorbar(gd, cbId),
+        sclFunc = makeScaleFunction(trace.colorscale, zmin, zmax);
+
+    cb.fillcolor(sclFunc)
         .filllevels({start: zmin, end: zmax, size: (zmax - zmin) / 254})
         .options(trace.colorbar)();
 };

src/traces/heatmap/plot.js

@@ -9,13 +9,12 @@
 
 'use strict';
 
-var d3 = require('d3');
 var tinycolor = require('tinycolor2');
 
 var Registry = require('../../registry');
 var Lib = require('../../lib');
-var getColorscale = require('../../components/colorscale/get_scale');
 var xmlnsNamespaces = require('../../constants/xmlns_namespaces');
+var makeScaleFunction = require('../../components/colorscale/make_scale_function');
 
 var maxRowLength = require('./max_row_length');
 
@@ -45,9 +44,6 @@ function plotOne(gd, plotinfo, cd) {
     }
 
     var z = cd[0].z,
-        min = trace.zmin,
-        max = trace.zmax,
-        scl = getColorscale(trace.colorscale),
         x = cd[0].x,
         y = cd[0].y,
         isContour = Registry.traceIs(trace, 'contour'),
@@ -170,15 +166,12 @@ function plotOne(gd, plotinfo, cd) {
     canvas.height = canvasH;
     var context = canvas.getContext('2d');
 
-    // interpolate for color scale
-    // use an array instead of color strings, so we preserve alpha
-    var s = d3.scale.linear()
-        .domain(scl.map(function(si) { return si[0]; }))
-        .range(scl.map(function(si) {
-            var c = tinycolor(si[1]).toRgb();
-            return [c.r, c.g, c.b, c.a];
-        }))
-        .clamp(true);
+    var sclFunc = makeScaleFunction(
+        trace.colorscale,
+        trace.zmin,
+        trace.zmax,
+        { noNumericCheck: true, returnArray: true }
+    );
 
     // map brick boundaries to image pixels
     var xpx,
@@ -289,7 +282,7 @@ function plotOne(gd, plotinfo, cd) {
 
     function setColor(v, pixsize) {
         if(v !== undefined) {
-            var c = s((v - min) / (max - min));
+            var c = sclFunc(v);
             c[0] = Math.round(c[0]);
             c[1] = Math.round(c[1]);
             c[2] = Math.round(c[2]);

src/traces/scatter/colorbar.js

@@ -9,12 +9,11 @@
 
 'use strict';
 
-var d3 = require('d3');
 var isNumeric = require('fast-isnumeric');
 
 var Lib = require('../../lib');
 var Plots = require('../../plots/plots');
-var getColorscale = require('../../components/colorscale/get_scale');
+var makeScaleFunction = require('../../components/colorscale/make_scale_function');
 var drawColorbar = require('../../components/colorbar/draw');
 
 
@@ -25,27 +24,25 @@ module.exports = function colorbar(gd, cd) {
 
     gd._fullLayout._infolayer.selectAll('.' + cbId).remove();
 
-    // TODO unify Scatter.colorbar and Heatmap.colorbar
-    // TODO make Plotly[module].colorbar support multiple colorbar per trace
+    // TODO unify scatter and heatmap colorbar
+    // TODO make Colorbar.draw support multiple colorbar per trace
 
     if((marker === undefined) || !marker.showscale) {
         Plots.autoMargin(gd, cbId);
         return;
     }
 
-    var scl = getColorscale(marker.colorscale),
-        vals = marker.color,
+    var vals = marker.color,
         cmin = marker.cmin,
         cmax = marker.cmax;
 
     if(!isNumeric(cmin)) cmin = Lib.aggNums(Math.min, null, vals);
     if(!isNumeric(cmax)) cmax = Lib.aggNums(Math.max, null, vals);
 
-    var cb = cd[0].t.cb = drawColorbar(gd, cbId);
+    var cb = cd[0].t.cb = drawColorbar(gd, cbId),
+        sclFunc = makeScaleFunction(marker.colorscale, cmin, cmax);
 
-    cb.fillcolor(d3.scale.linear()
-            .domain(scl.map(function(v) { return cmin + v[0] * (cmax - cmin); }))
-            .range(scl.map(function(v) { return v[1]; })))
+    cb.fillcolor(sclFunc)
         .filllevels({start: cmin, end: cmax, size: (cmax - cmin) / 254})
         .options(marker.colorbar)();
 };

src/traces/surface/colorbar.js

@@ -9,25 +9,23 @@
 
 'use strict';
 
-var d3 = require('d3');
 var isNumeric = require('fast-isnumeric');
 
 var Lib = require('../../lib');
 var Plots = require('../../plots/plots');
-var getColorscale = require('../../components/colorscale/get_scale');
+var makeScaleFunction = require('../../components/colorscale/make_scale_function');
 var drawColorbar = require('../../components/colorbar/draw');
 
 
 module.exports = function colorbar(gd, cd) {
     var trace = cd[0].trace,
         cbId = 'cb' + trace.uid,
-        scl = getColorscale(trace.colorscale),
-        zmin = trace.cmin,
-        zmax = trace.cmax,
+        cmin = trace.cmin,
+        cmax = trace.cmax,
         vals = trace.surfacecolor || trace.z;
 
-    if(!isNumeric(zmin)) zmin = Lib.aggNums(Math.min, null, vals);
-    if(!isNumeric(zmax)) zmax = Lib.aggNums(Math.max, null, vals);
+    if(!isNumeric(cmin)) cmin = Lib.aggNums(Math.min, null, vals);
+    if(!isNumeric(cmax)) cmax = Lib.aggNums(Math.max, null, vals);
 
     gd._fullLayout._infolayer.selectAll('.' + cbId).remove();
 
@@ -36,10 +34,10 @@ module.exports = function colorbar(gd, cd) {
         return;
     }
 
-    var cb = cd[0].t.cb = drawColorbar(gd, cbId);
-    cb.fillcolor(d3.scale.linear()
-            .domain(scl.map(function(v) { return zmin + v[0] * (zmax - zmin); }))
-            .range(scl.map(function(v) { return v[1]; })))
-        .filllevels({start: zmin, end: zmax, size: (zmax - zmin) / 254})
+    var cb = cd[0].t.cb = drawColorbar(gd, cbId),
+        sclFunc = makeScaleFunction(trace.colorscale, cmin, cmax);
+
+    cb.fillcolor(sclFunc)
+        .filllevels({start: cmin, end: cmax, size: (cmax - cmin) / 254})
         .options(trace.colorbar)();
 };