Work out a lot of details of spline evaluation

Author: rreusser

lib/index.js

@@ -36,6 +36,7 @@ Plotly.register([
     require('./scattermapbox'),
 
     require('./carpet'),
+    require('./scattercarpet'),
 
     require('./ohlc'),
     require('./candlestick')

src/components/drawing/index.js

@@ -24,6 +24,8 @@ var makeBubbleSizeFn = require('../../traces/scatter/make_bubble_size_func');
 
 var drawing = module.exports = {};
 
+drawing.splineEvaluator = require('./spline_evaluator');
+
 // -----------------------------------------------------
 // styling functions for plot elements
 // -----------------------------------------------------

src/traces/carpet/axis_attributes.js

@@ -13,6 +13,23 @@ var fontAttrs = require('../../plots/font_attributes');
 var colorAttrs = require('../../components/color/attributes');
 
 module.exports = {
+    smoothing: {
+        valType: 'number',
+        dflt: 1.0,
+        role: 'info'
+    },
+    cheatertype: {
+        valType: 'enumerated',
+        values: ['index', 'value'],
+        dflt: 'index',
+        role: 'info'
+    },
+    tickmode: {
+        valType: 'enumerated',
+        values: ['linear', 'array'],
+        dflt: 'array',
+        role: 'info',
+    },
     showlabels: {
         valType: 'enumerated',
         values: ['start', 'end', 'both', 'none'],
@@ -70,14 +87,28 @@ module.exports = {
     labelfont: extendFlat({}, fontAttrs, {
         description: 'Sets the label font.'
     }),
-    gridoffset: {
+    tick0: {
+        valType: 'any',
+        min: 0,
+        dflt: 0,
+        role: 'info',
+        description: 'The starting index of grid lines along the axis'
+    },
+    dtick: {
+        valType: 'any',
+        min: 1,
+        dflt: 1,
+        role: 'info',
+        description: 'The stride between grid lines along the axis'
+    },
+    arraytick0: {
         valType: 'integer',
         min: 0,
         dflt: 0,
         role: 'info',
         description: 'The starting index of grid lines along the axis'
     },
-    gridstep: {
+    arraydtick: {
         valType: 'integer',
         min: 1,
         dflt: 1,
@@ -97,19 +128,41 @@ module.exports = {
         role: 'style',
         description: 'Sets the color of the grid lines.'
     },
-    minorgridoffset: {
-        valType: 'integer',
+    startlinewidth: {
+        valType: 'number',
         min: 0,
-        dflt: 0,
+        dflt: 1,
+        role: 'style',
+        description: 'Sets the width (in px) of the grid lines.'
+    },
+    startline: {
+        valType: 'boolean',
         role: 'info',
-        description: 'The starting index of grid lines along the axis'
+        dflt: true
     },
-    minorgridstep: {
-        valType: 'integer',
-        min: 1,
-        dflt: 1,
+    endline: {
+        valType: 'boolean',
         role: 'info',
-        description: 'The stride between grid lines along the axis'
+        dflt: true
+    },
+    startlinecolor: {
+        valType: 'color',
+        dflt: colorAttrs.lightLine,
+        role: 'style',
+        description: 'Sets the color of the grid lines.'
+    },
+    endlinewidth: {
+        valType: 'number',
+        min: 0,
+        dflt: 1,
+        role: 'style',
+        description: 'Sets the width (in px) of the grid lines.'
+    },
+    endlinecolor: {
+        valType: 'color',
+        dflt: colorAttrs.lightLine,
+        role: 'style',
+        description: 'Sets the color of the grid lines.'
     },
     minorgridwidth: {
         valType: 'number',

src/traces/carpet/calc.js

@@ -11,17 +11,26 @@
 var Axes = require('../../plots/cartesian/axes');
 var cheaterBasis = require('./cheater_basis');
 var arrayMinmax = require('./array_minmax');
-
+var search = require('../../lib/search').findBin;
+var computeControlPoints = require('./compute_control_points');
+var map2dArray = require('./map_2d_array');
+var evaluateControlPoints = require('./evaluate_control_points');
 
 module.exports = function calc(gd, trace) {
     var xa = Axes.getFromId(gd, trace.xaxis || 'x'),
-        ya = Axes.getFromId(gd, trace.yaxis || 'y');
+        ya = Axes.getFromId(gd, trace.yaxis || 'y'),
+        aax = trace.aaxis,
+        bax = trace.baxis,
+        a = trace.a,
+        b = trace.b;
 
     var xdata;
     var ydata = trace.y;
 
     if(trace._cheater) {
-        xdata = cheaterBasis(trace.a.length, trace.b.length, trace.cheaterslope);
+        var avals = aax.cheatertype === 'index' ? a.length : a
+        var bvals = bax.cheatertype === 'index' ? b.length : b;
+        xdata = cheaterBasis(avals, bvals, trace.cheaterslope);
     } else {
         xdata = trace.x;
     }
@@ -44,12 +53,174 @@ module.exports = function calc(gd, trace) {
     Axes.expand(xa, xrange, {padded: true});
     Axes.expand(ya, yrange, {padded: true});
 
+    // Precompute the cartesian-space coordinates of the grid lines:
+    var x = xdata;
+    var y = trace.y;
+
+    // Convert cartesian-space x/y coordinates to screen space pixel coordinates:
+    trace.xp = map2dArray(trace.xp, x, xa.c2p);
+    trace.yp = map2dArray(trace.yp, y, ya.c2p);
+
+    // Next compute the control points in whichever directions are necessary:
+    var result = computeControlPoints(trace.xctrl, trace.yctrl, x, y, aax.smoothing, bax.smoothing);
+    trace.xctrl = result[0];
+    trace.yctrl = result[1];
+
+
+    console.log('evaluateControlPoints(:', evaluateControlPoints([trace.xctrl, trace.yctrl], 0.5, 0.5));
+
+
+    //trace.ab2c = getConvert(x, y, a, b, aax.smoothing, bax.smoothing);
+
+    // This is just a transposed function that will be useful in making
+    // the computations a/b-agnostic:
+    //trace.ba2c = function (b, a) { return trace.ab2c(a, b); }
+
+    //var agrid = makeGridLines(a, aax);
+    //var bgrid = makeGridLines(b, bax);
+
+    //trace.aaxis._tickinfo = agrid;
+    //trace.baxis._tickinfo = bgrid;
+
     var cd0 = {
-        x: xdata,
-        y: trace.y,
-        a: trace.a,
-        b: trace.b
+        x: x,
+        y: y,
+        a: a,
+        b: b
     };
 
     return [cd0];
 };
+
+
+
+/*
+ * Interpolate in the b-direction along constant-a lines
+ *   x, y: 2D data arrays to be interpolated
+ *   aidx: index of the a gridline along which to evaluate
+ *   bidx0: lower-index of the b cell in which to interpolate
+ *   tb: an interpolant in [0, 1]
+ */
+/*function interpolateConstA (x, y, aidx, bidx0, tb, bsmoothing) {
+    if (bsmoothing) {
+        return [
+            x[aidx][bidx0] * (1 - tb) + x[aidx][bidx0 + 1] * tb,
+            y[aidx][bidx0] * (1 - tb) + y[aidx][bidx0 + 1] * tb
+        ];
+    } else {
+        return [
+            x[aidx][bidx0] * (1 - tb) + x[aidx][bidx0 + 1] * tb,
+            y[aidx][bidx0] * (1 - tb) + y[aidx][bidx0 + 1] * tb
+        ];
+    }
+}*/
+
+/*
+ * Interpolate in the a and b directions
+ *   x, y: 2D data arrays to be interpolated
+ *   aidx0: lower index of the a cell in which to interpolatel
+ *   bidx0: lower index of the b cell in which to interpolate
+ *   ta: an interpolant for the a direction in [0, 1]
+ *   tb: an interpolant for the b direction in [0, 1]
+ */
+/*function interpolateAB (x, y, aidx0, ta, bidx0, tb, asmoothing, bsmoothing) {
+    if (asmoothing) {
+        var xy0 = interpolateConstA(x, y, aidx0, bidx0, tb, bsmoothing);
+        var xy1 = interpolateConstA(x, y, aidx0 + 1, bidx0, tb, bsmoothing);
+
+        return [
+            xy0[0] * (1 - ta) + xy1[0] * ta,
+            xy0[1] * (1 - ta) + xy1[1] * ta
+        ];
+    } else {
+        var xy0 = interpolateConstA(x, y, aidx0, bidx0, tb, bsmoothing);
+        var xy1 = interpolateConstA(x, y, aidx0 + 1, bidx0, tb, bsmoothing);
+
+        return [
+            xy0[0] * (1 - ta) + xy1[0] * ta,
+            xy0[1] * (1 - ta) + xy1[1] * ta
+        ];
+    }
+}*/
+
+/*
+ * Return a function that converts a/b coordinates to x/y values
+ */
+/*function getConvert (x, y, a, b, asmoothing, bsmoothing) {
+    return function (aval, bval) {
+        // Get the lower-indices of the box in which the point falls:
+        var aidx = Math.min(search(aval, a), a.length - 2);
+        var bidx = Math.min(search(bval, b), b.length - 2);
+
+        var ta = (aval - a[aidx]) / (a[aidx + 1] - a[aidx]);
+        var tb = (bval - b[bidx]) / (b[bidx + 1] - b[bidx]);
+
+        return interpolateAB(x, y, aidx, ta, bidx, tb, asmoothing, bsmoothing);
+    };
+}*/
+
+/*
+ * Interpret the tick properties to return indices, interpolants,
+ * and values of grid lines
+ *
+ * Output is:
+ *      ilower: lower index of the cell in which the gridline lies
+ *      interpolant: fractional distance of this gridline to the next cell (in [0, 1])
+ *      values: value of the axis coordinate at each respective gridline
+ */
+/*function makeGridLines (data, axis) {
+    var gridlines = [];
+    var t = [];
+    var i0 = [];
+    var i1 = [];
+    var values = [];
+    switch(axis.tickmode) {
+    case 'array':
+        var start = axis.arraytick0 % axis.arraydtick;
+        var step = axis.arraydtick;
+        var end = data.length;
+        // This could be optimized, but we'll convert this to a/b space and then do
+        // the interpolation in
+        for (var i = start; i < end; i += step) {
+            // If it's the end point, we'll use the end of the previous range to
+            // avoid going out of bounds:
+            var endshift = i >= end - 1 ? 1 : 0;
+
+            gridlines.push({
+                param: i,
+                idx: i - endshift,
+                tInterp: endshift,
+                value: data[i]
+            });
+        }
+        break;
+    case 'linear':
+        var v1 = getLinspaceStartingPoint(data[0], axis.tick0, axis.dtick);
+        var n = Math.ceil((data[data.length - 1] - v1) / axis.dtick);
+
+        // This could be optimized, but we'll convert this to a/b space and then do
+        // the interpolation in
+        for (var i = 0; i < n; i++) {
+            var val = v1 + axis.dtick * i;
+            var idx = Math.min(search(val, data), data.length - 2);
+            gridlines.push({
+                param: (val - data[0]) / (data[data.length - 1] - data[0]) * data.length,
+                idx: idx,
+                tInterp: (val - data[idx]) / (data[idx + 1] - data[idx]),
+                value: val
+            });
+        }
+    }
+
+    console.log('gridlines:', gridlines);
+
+    return gridlines;
+}*/
+
+/*
+ * Given a data range from starting at x1, this function computes the first
+ * point distributed along x0 + n * dx that lies within the range.
+ */
+function getLinspaceStartingPoint (xlow, x0, dx) {
+    return x0 + dx * Math.ceil((xlow - x0) / dx);
+}

src/traces/carpet/catmull_rom.js

@@ -0,0 +1,43 @@
+/**
+* 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';
+
+/*
+ * Compute the tangent vector according to catmull-rom cubic splines (centripetal,
+ * I think). That differs from the control point in two ways:
+ *   1. It is a vector, not a position relative to the point
+ *   2. the vector is longer than the position relative to p1 by a factor of 3
+ *
+ * Close to the boundaries, we'll use these as *quadratic control points, so that
+ * to make a nice grid, we'll need to divide the tangent by 2 instead of 3. (The
+ * math works out this way if you work through the bezier derivatives)
+ */
+var CatmullRomExp = 0.5;
+module.exports = function makeControlPoints(p0, p1, p2, smoothness) {
+  var d1x = p0[0] - p1[0],
+      d1y = p0[1] - p1[1],
+      d2x = p2[0] - p1[0],
+      d2y = p2[1] - p1[1],
+      d1a = Math.pow(d1x * d1x + d1y * d1y, CatmullRomExp / 2),
+      d2a = Math.pow(d2x * d2x + d2y * d2y, CatmullRomExp / 2),
+      numx = (d2a * d2a * d1x - d1a * d1a * d2x) * smoothness,
+      numy = (d2a * d2a * d1y - d1a * d1a * d2y) * smoothness,
+      denom1 = d2a * (d1a + d2a) * 3,
+      denom2 = d1a * (d1a + d2a) * 3;
+    return [[
+        p1[0] + (denom1 && numx / denom1),
+        p1[1] + (denom1 && numy / denom1)
+    ], [
+        p1[0] - (denom2 && numx / denom2),
+        p1[1] - (denom2 && numy / denom2)
+    ]];
+
+  return [[dxL, dyL], [dxU, dyU]];
+}
+