Merge pull request #367 from plotly/contour-cleanup

Contour colormap cleanup

Author: etpinard

.eslintrc

@@ -35,6 +35,7 @@
     "no-multi-spaces": [2],
     "no-whitespace-before-property": [2],
     "no-unexpected-multiline": [2],
+    "no-floating-decimal": [2],
     "space-infix-ops": [0, {"int32Hint": false}],
     "quotes": [2, "single"],
     "dot-notation": [2, {"allowKeywords": false}],

src/traces/contour/calc.js

@@ -13,21 +13,25 @@ var Axes = require('../../plots/cartesian/axes');
 var heatmapCalc = require('../heatmap/calc');
 
 
+// most is the same as heatmap calc, then adjust it
+// though a few things inside heatmap calc still look for
+// contour maps, because the makeBoundArray calls are too entangled
 module.exports = function calc(gd, trace) {
-    // most is the same as heatmap calc, then adjust it
-    // though a few things inside heatmap calc still look for
-    // contour maps, because the makeBoundArray calls are too entangled
     var cd = heatmapCalc(gd, trace),
         contours = trace.contours;
 
     // check if we need to auto-choose contour levels
-    if(trace.autocontour!==false) {
+    if(trace.autocontour !== false) {
         var dummyAx = {
             type: 'linear',
             range: [trace.zmin, trace.zmax]
         };
-        Axes.autoTicks(dummyAx,
-            (trace.zmax - trace.zmin) / (trace.ncontours||15));
+
+        Axes.autoTicks(
+            dummyAx,
+            (trace.zmax - trace.zmin) / (trace.ncontours || 15)
+        );
+
         contours.start = Axes.tickFirst(dummyAx);
         contours.size = dummyAx.dtick;
         dummyAx.range.reverse();
@@ -37,7 +41,7 @@ module.exports = function calc(gd, trace) {
         if(contours.end === trace.zmax) contours.end -= contours.size;
 
         // so rounding errors don't cause us to miss the last contour
-        contours.end += contours.size/100;
+        contours.end += contours.size / 100;
 
         // copy auto-contour info back to the source data.
         trace._input.contours = contours;

src/traces/contour/colorbar.js

@@ -9,12 +9,11 @@
 
 'use strict';
 
-var d3 = require('d3');
-
 var Plots = require('../../plots/plots');
-var getColorscale = require('../../components/colorscale/get_scale');
 var drawColorbar = require('../../components/colorbar/draw');
 
+var makeColorMap = require('./make_color_map');
+
 
 module.exports = function colorbar(gd, cd) {
     var trace = cd[0].trace,
@@ -32,55 +31,23 @@ module.exports = function colorbar(gd, cd) {
 
     var contours = trace.contours,
         line = trace.line,
-        cs = contours.size||1,
-        nc = Math.floor((contours.end + cs/10 - contours.start)/cs)+1,
-        scl = getColorscale(trace.colorscale),
-        extraLevel = contours.coloring==='lines' ? 0 : 1,
-        colormap = d3.scale.linear().interpolate(d3.interpolateRgb),
-        colorDomain = scl.map(function(si) {
-            return (si[0]*(nc+extraLevel-1)-(extraLevel/2)) * cs +
-                contours.start;
-        }),
-        colorRange = scl.map(function(si) { return si[1]; });
+        cs = contours.size || 1,
+        coloring = contours.coloring;
+
+    var colorMap = makeColorMap(trace, {isColorbar: true});
 
-    // colorbar fill and lines
-    if(contours.coloring==='heatmap') {
-        if(trace.zauto && trace.autocontour===false) {
-            trace.zmin = contours.start-cs/2;
-            trace.zmax = trace.zmin+nc*cs;
-        }
+    if(coloring === 'heatmap') {
         cb.filllevels({
             start: trace.zmin,
             end: trace.zmax,
-            size: (trace.zmax-trace.zmin)/254
+            size: (trace.zmax - trace.zmin) / 254
         });
-        colorDomain = scl.map(function(si) {
-            return si[0]*(trace.zmax-trace.zmin) + trace.zmin;
-        });
-
-        // do the contours extend beyond the colorscale?
-        // if so, extend the colorscale with constants
-        var zRange = d3.extent([trace.zmin, trace.zmax, contours.start,
-                contours.start + cs*(nc-1)]),
-            zmin = zRange[trace.zmin<trace.zmax ? 0 : 1],
-            zmax = zRange[trace.zmin<trace.zmax ? 1 : 0];
-        if(zmin!==trace.zmin) {
-            colorDomain.splice(0, 0, zmin);
-            colorRange.splice(0, 0, colorRange[0]);
-        }
-        if(zmax!==trace.zmax) {
-            colorDomain.push(zmax);
-            colorRange.push(colorRange[colorRange.length-1]);
-        }
     }
 
-    colormap.domain(colorDomain).range(colorRange);
-
-    cb.fillcolor(contours.coloring==='fill' || contours.coloring==='heatmap' ?
-            colormap : '')
+    cb.fillcolor((coloring === 'fill' || coloring === 'heatmap') ? colorMap : '')
         .line({
-            color: contours.coloring==='lines' ? colormap : line.color,
-            width: contours.showlines!==false ? line.width : 0,
+            color: coloring === 'lines' ? colorMap : line.color,
+            width: contours.showlines !== false ? line.width : 0,
             dash: line.dash
         })
         .levels({

src/traces/contour/make_color_map.js

@@ -0,0 +1,78 @@
+/**
+* Copyright 2012-2016, Plotly, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+
+
+'use strict';
+
+var d3 = require('d3');
+
+var getColorscale = require('../../components/colorscale/get_scale');
+
+
+module.exports = function makeColorMap(trace) {
+    var contours = trace.contours,
+        start = contours.start,
+        end = contours.end,
+        cs = contours.size || 1,
+        nc = Math.floor((end + cs / 10 - start) / cs) + 1,
+        extra = contours.coloring === 'lines' ? 0 : 1;
+
+    var scl = getColorscale(trace.colorscale),
+        len = scl.length;
+
+    var domain = new Array(len),
+        range = new Array(len);
+
+    var si, i;
+
+    if(contours.coloring === 'heatmap') {
+        if(trace.zauto && trace.autocontour === false) {
+            trace.zmin = start - cs / 2;
+            trace.zmax = trace.zmin + nc * cs;
+        }
+
+        for(i = 0; i < len; i++) {
+            si = scl[i];
+
+            domain[i] = si[0] * (trace.zmax - trace.zmin) + trace.zmin;
+            range[i] = si[1];
+        }
+
+        // do the contours extend beyond the colorscale?
+        // if so, extend the colorscale with constants
+        var zRange = d3.extent([trace.zmin, trace.zmax, contours.start,
+                contours.start + cs * (nc - 1)]),
+            zmin = zRange[trace.zmin < trace.zmax ? 0 : 1],
+            zmax = zRange[trace.zmin < trace.zmax ? 1 : 0];
+
+        if(zmin !== trace.zmin) {
+            domain.splice(0, 0, zmin);
+            range.splice(0, 0, Range[0]);
+        }
+
+        if(zmax !== trace.zmax) {
+            domain.push(zmax);
+            range.push(range[range.length - 1]);
+        }
+    }
+    else {
+        for(i = 0; i < len; i++) {
+            si = scl[i];
+
+            domain[i] = (si[0] * (nc + extra - 1) - (extra / 2)) * cs + start;
+            range[i] = si[1];
+        }
+    }
+
+    var colorMap = d3.scale.linear()
+        .interpolate(d3.interpolateRgb)
+        .domain(domain)
+        .range(range);
+
+    return colorMap;
+};

src/traces/contour/style.js

@@ -12,45 +12,44 @@
 var d3 = require('d3');
 
 var Drawing = require('../../components/drawing');
-var getColorscale = require('../../components/colorscale/get_scale');
 var heatmapStyle = require('../heatmap/style');
 
+var makeColorMap = require('./make_color_map');
+
 
 module.exports = function style(gd) {
-    d3.select(gd).selectAll('g.contour')
-        .style('opacity', function(d) { return d.trace.opacity; })
-        .each(function(d) {
-            var c = d3.select(this),
-                trace = d.trace,
-                contours = trace.contours,
-                line = trace.line,
-                colorLines = contours.coloring==='lines',
-                cs = contours.size||1,
-                nc = Math.floor((contours.end + cs/10 - contours.start)/cs) + 1,
-                scl = getColorscale(trace.colorscale),
-                extraLevel = colorLines ? 0 : 1,
-                colormap = d3.scale.linear()
-                    .domain(scl.map(function(si) {
-                        return (si[0]*(nc+extraLevel-1)-(extraLevel/2)) * cs +
-                            contours.start;
-                    }))
-                    .interpolate(d3.interpolateRgb)
-                    .range(scl.map(function(si) { return si[1]; }));
-
-            c.selectAll('g.contourlevel').each(function(d, i) {
-                d3.select(this).selectAll('path')
-                    .call(Drawing.lineGroupStyle,
-                        line.width,
-                        colorLines ? colormap(contours.start+i*cs) : line.color,
-                        line.dash);
-            });
-            c.selectAll('g.contourbg path')
-                .style('fill', colormap(contours.start - cs/2));
-            c.selectAll('g.contourfill path')
-                .style('fill',function(d, i) {
-                    return colormap(contours.start + (i+0.5)*cs);
-                });
+    var contours = d3.select(gd).selectAll('g.contour');
+
+    contours.style('opacity', function(d) {
+        return d.trace.opacity;
+    });
+
+    contours.each(function(d) {
+        var c = d3.select(this),
+            trace = d.trace,
+            contours = trace.contours,
+            line = trace.line,
+            cs = contours.size || 1,
+            start = contours.start;
+
+        var colorMap = makeColorMap(trace);
+
+        c.selectAll('g.contourlevel').each(function(d, i) {
+            d3.select(this).selectAll('path')
+                .call(Drawing.lineGroupStyle,
+                    line.width,
+                    contours.coloring === 'lines' ? colorMap(start + i * cs) : line.color,
+                    line.dash);
         });
 
+        c.selectAll('g.contourbg path')
+            .style('fill', colorMap(start - cs / 2));
+
+        c.selectAll('g.contourfill path')
+            .style('fill', function(d, i) {
+                return colorMap(start + (i + 0.5) * cs);
+            });
+    });
+
     heatmapStyle(gd);
 };

test/image/baselines/contour_heatmap_coloring.png

@@ -0,0 +1,12 @@
+{
+  "data":[{
+    "contours":{"coloring":"heatmap","showlines":false},
+    "z":[["1",""],["2",""],["3",""],["3",""],["4",""],["5",""],["6",""],["5",""],["2",""],["3",""],["3",""],["5",""],["6",""],["5",""],["4","1"],["4","2"],["2","3"],["1","4"],["3","5"],["2","4"],["1","3"],["3","2"],["5","3"],["4","4"],["3","3"],["2","2"],["1","1"],["2","2"],["3","3"],["4","4"],["5","6"],["4","5"],["3","4"],["2","3"],["3","2"],["2","3"],["3","4"],["3","3"],["3","2"]],
+    "type":"contour"
+  }],
+  "layout":{
+    "autosize":false,
+    "height":400,
+    "width":400
+  }
+}

test/image/baselines/contour_lines_coloring.png

@@ -0,0 +1,12 @@
+{
+  "data":[{
+    "contours":{"coloring":"lines"},
+    "z":[["1",""],["2",""],["3",""],["3",""],["4",""],["5",""],["6",""],["5",""],["2",""],["3",""],["3",""],["5",""],["6",""],["5",""],["4","1"],["4","2"],["2","3"],["1","4"],["3","5"],["2","4"],["1","3"],["3","2"],["5","3"],["4","4"],["3","3"],["2","2"],["1","1"],["2","2"],["3","3"],["4","4"],["5","6"],["4","5"],["3","4"],["2","3"],["3","2"],["2","3"],["3","4"],["3","3"],["3","2"]],
+    "type":"contour"
+  }],
+  "layout":{
+    "autosize":false,
+    "height":400,
+    "width":400
+  }
+}