#fi-51 contour plot fill test case

Author: monfera

package.json

@@ -54,7 +54,7 @@
     "delaunay-triangulate": "^1.1.6",
     "es6-promise": "^3.0.2",
     "fast-isnumeric": "^1.1.1",
-    "gl-contour2d": "git://github.com/monfera/gl-contour2d.git#integration",
+    "gl-contour2d": "git://github.com/gl-vis/gl-contour2d.git",
     "gl-error2d": "^1.0.0",
     "gl-error3d": "^1.0.0",
     "gl-heatmap2d": "^1.0.2",

src/traces/contourgl/convert.js

@@ -85,7 +85,8 @@ proto.update = function(fullTrace, calcTrace) {
     // convert z from 2D -> 1D
     var z = calcPt.z,
         rowLen = z[0].length,
-        colLen = z.length;
+        colLen = z.length,
+        colorOptions;
 
     this.contourOptions.z = flattenZ(z, rowLen, colLen);
     this.heatmapOptions.z = [].concat.apply([], z);
@@ -95,16 +96,21 @@ proto.update = function(fullTrace, calcTrace) {
     this.contourOptions.x = this.heatmapOptions.x = calcPt.x;
     this.contourOptions.y = this.heatmapOptions.y = calcPt.y;
 
-    var colorOptions = convertColorscale(fullTrace);
-    this.contourOptions.levels = colorOptions.levels;
-    this.contourOptions.levelColors = colorOptions.levelColors;
 
     // pass on fill information
     if(fullTrace.contours.coloring === 'fill') {
+        colorOptions = convertColorscale(fullTrace, true);
+        this.contourOptions.levels = colorOptions.levels.slice(1);
         // though gl-contour2d automatically defaults to a transparent layer for the last
         // band color, it's set manually here in case the gl-contour2 API changes
-        this.contourOptions.fillColors = colorOptions.levelColors.concat([0,0,0,0])
-            .map(function(d, i) {return i % 4 === 3 ? d / 2 : d}); // halve the fill alphas
+        this.contourOptions.fillColors = colorOptions.levelColors;
+        this.contourOptions.levelColors = [].concat.apply([], this.contourOptions.levels.map(function() {
+            return [.25,.25,.25,1];
+        }));
+    } else {
+        colorOptions = convertColorscale(fullTrace, false);
+        this.contourOptions.levels = colorOptions.levels;
+        this.contourOptions.levelColors = colorOptions.levelColors;
     }
 
     // convert text from 2D -> 1D
@@ -132,20 +138,21 @@ function flattenZ(zIn, rowLen, colLen) {
     return zOut;
 }
 
-function convertColorscale(fullTrace) {
+function convertColorscale(fullTrace, fill) {
     var contours = fullTrace.contours,
         start = contours.start,
         end = contours.end,
         cs = contours.size || 1;
 
     var colorMap = makeColorMap(fullTrace);
 
-    var N = Math.floor((end - start) / cs) + 1,
+    var N = Math.floor((end - start) / cs) + (fill ? 2 : 1), // for K thresholds (contour linees) there are K+1 areas
         levels = new Array(N),
         levelColors = new Array(4 * N);
 
     for(var i = 0; i < N; i++) {
-        var level = levels[i] = start + cs * (i);
+        var level = levels[i] = start + cs * (i) - (fill ? cs / 2 : 0); // in case of fill, use band midpoint
+        console.log(level)
         var color = str2RGBArray(colorMap(level));
 
         for(var j = 0; j < 4; j++) {

test/jasmine/tests/gl_scatterplot_contour_test.js

@@ -1,6 +1,8 @@
 'use strict';
 
 var Plotly = require('@lib/index');
+var Lib = require('@src/lib');
+var d3 = require('d3');
 
 // contourgl is not part of the dist plotly.js bundle initially
 Plotly.register(
@@ -82,18 +84,106 @@ var plotData = {
     }
 };
 
+function transpose(a) {
+    return a[0].map(function(ignore, columnIndex) {return a.map(function(row) {return row[columnIndex];});});
+}
+
+function jitter(n) {
+    return n + (Math.random() - 0.5) / 2;
+}
+
+function rotate(rad, point) {
+    return {
+        x: point.x * Math.cos(rad) - point.y * Math.sin(rad),
+        y: point.x * Math.sin(rad) + point.y * Math.cos(rad)
+    }
+}
+
+function generator() {
+    var x = d3.range(-12, 13, 1); // left closed, right open interval
+    var y = d3.range(-12, 13, 1); // left closed, right open interval
+    var i, j, p, z = new Array(x.length);
+    for(i = 0; i < x.length; i++) {
+        z[i] = new Array(y.length);
+        for(j = 0; j < y.length; j++) {
+            p = rotate(Math.PI / 4, {x: x[i], y: -y[j]})
+            z[i][j]  = jitter(Math.pow(p.x, 2) / (10 * 10) + Math.pow(p.y, 2) / (4 * 4))
+        }
+    }
+    return {x: x, y: y, z: z} // looking forward to the ES2015 return {x, y, z}
+}
+
+var model = generator();
+
+// equivalent to the new example case in gl-contour2d
+var plotDataCircular = {
+    "data": [
+        {
+            "type": "contourgl",
+            "x": model.x.map(jitter),
+            "y": model.y.map(jitter),
+            "z": transpose(model.z), // gl-vis is column-major order while ploly is row-major order
+            "colorscale": "Jet",
+            "contours": {
+                "start": 0,
+                "end": 2,
+                "size": 0.1,
+                "coloring": "lines"
+            },
+            "uid": "ad5624",
+            "zmin": 0,
+            "zmax": 2
+        }
+    ],
+    "layout": {
+        "xaxis": {
+            "range": [
+                -10,
+                10
+            ],
+            "autorange": true
+        },
+        "yaxis": {
+            "range": [
+                -10,
+                10
+            ],
+            "autorange": true
+        },
+        "height": 600,
+        "width": 600,
+        "autosize": true
+    }
+};
+
+
 function makePlot(gd, mock) {
     return Plotly.plot(gd, mock.data, mock.layout);
 }
 
 fdescribe('contourgl plots', function() {
 
+    // this dataset is a special case, very forgiving to the contour renderer, as it's convex,
+    // contains no inflexion points etc.
     it('render without raising an error', function(done) {
         withSetupTeardown(done, function(gd) {
-            return makePlot(gd, plotData)
-                .then(function(gd) {
-                    //debugger;
-                })
+            return makePlot(gd, plotData);
+        });
+    });
+
+    // this dataset is less forgiving because it uses a noisy surface (random, will look different on each run)
+    it('render without raising an error (coloring: "lines")', function(done) {
+        withSetupTeardown(done, function(gd) {
+            return makePlot(gd, plotDataCircular);
+        });
+    });
+
+    // same with fill
+    fit('render without raising an error (coloring: "fill")', function(done) {
+        var mock = Lib.extendDeep({}, plotDataCircular);
+        mock.data[0].contours.coloring = "fill"; // or delete property - fill is the default
+        withSetupTeardown(done, function(gd) {
+            return makePlot(gd, mock);
         });
     });