Merge pull request #2116 from plotly/violins-dev

Violin plots

Author: etpinard

lib/index-cartesian.js

@@ -19,7 +19,8 @@ Plotly.register([
     require('./histogram2dcontour'),
     require('./pie'),
     require('./contour'),
-    require('./scatterternary')
+    require('./scatterternary'),
+    require('./violin')
 ]);
 
 module.exports = Plotly;

lib/index.js

@@ -21,7 +21,7 @@ Plotly.register([
     require('./pie'),
     require('./contour'),
     require('./scatterternary'),
-    require('./sankey'),
+    require('./violin'),
 
     require('./scatter3d'),
     require('./surface'),
@@ -34,10 +34,13 @@ Plotly.register([
     require('./pointcloud'),
     require('./heatmapgl'),
     require('./parcoords'),
-    require('./table'),
 
     require('./scattermapbox'),
 
+    require('./sankey'),
+
+    require('./table'),
+
     require('./carpet'),
     require('./scattercarpet'),
     require('./contourcarpet'),

lib/violin.js

@@ -0,0 +1,11 @@
+/**
+* Copyright 2012-2017, 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';
+
+module.exports = require('../src/traces/violin');

src/components/fx/hover.js

@@ -381,7 +381,7 @@ function _hover(gd, evt, subplot, noHoverEvent) {
 
         // Now find the points.
         if(trace._module && trace._module.hoverPoints) {
-            var newPoints = trace._module.hoverPoints(pointData, xval, yval, mode);
+            var newPoints = trace._module.hoverPoints(pointData, xval, yval, mode, fullLayout._hoverlayer);
             if(newPoints) {
                 var newPoint;
                 for(var newPointNum = 0; newPointNum < newPoints.length; newPointNum++) {

src/components/legend/style.js

@@ -197,7 +197,7 @@ module.exports = function style(s, gd) {
         var trace = d[0].trace,
             pts = d3.select(this).select('g.legendpoints')
                 .selectAll('path.legendbox')
-                .data(Registry.traceIs(trace, 'box') && trace.visible ? [d] : []);
+                .data(Registry.traceIs(trace, 'box-violin') && trace.visible ? [d] : []);
         pts.enter().append('path').classed('legendbox', true)
             // if we want the median bar, prepend M6,0H-6
             .attr('d', 'M6,6H-6V-6H6Z')

src/components/modebar/manage.js

@@ -179,8 +179,8 @@ function isSelectable(fullData) {
             if(scatterSubTypes.hasMarkers(trace) || scatterSubTypes.hasText(trace)) {
                 selectable = true;
             }
-        } else if(Registry.traceIs(trace, 'box')) {
-            if(trace.boxpoints === 'all') {
+        } else if(Registry.traceIs(trace, 'box-violin')) {
+            if(trace.boxpoints === 'all' || trace.points === 'all') {
                 selectable = true;
             }
         }

src/lib/geometry2d.js

@@ -193,3 +193,52 @@ exports.getVisibleSegment = function getVisibleSegment(path, bounds, buffer) {
             Math.abs(pt0.y - ptTotal.y) < 0.1
     };
 };
+
+/**
+ * Find point on SVG path corresponding to a given constraint coordinate
+ *
+ * @param {SVGPathElement} path
+ * @param {Number} val : constraint coordinate value
+ * @param {String} coord : 'x' or 'y' the constraint coordinate
+ * @param {Object} opts :
+ *  - {Number} pathLength : supply total path length before hand
+ *  - {Number} tolerance
+ *  - {Number} iterationLimit
+ * @return {SVGPoint}
+ */
+exports.findPointOnPath = function findPointOnPath(path, val, coord, opts) {
+    opts = opts || {};
+
+    var pathLength = opts.pathLength || path.getTotalLength();
+    var tolerance = opts.tolerance || 1e-3;
+    var iterationLimit = opts.iterationLimit || 30;
+
+    // if path starts at a val greater than the path tail (like on vertical violins),
+    // we must flip the sign of the computed diff.
+    var mul = path.getPointAtLength(0)[coord] > path.getPointAtLength(pathLength)[coord] ? -1 : 1;
+
+    var i = 0;
+    var b0 = 0;
+    var b1 = pathLength;
+    var mid;
+    var pt;
+    var diff;
+
+    while(i < iterationLimit) {
+        mid = (b0 + b1) / 2;
+        pt = path.getPointAtLength(mid);
+        diff = pt[coord] - val;
+
+        if(Math.abs(diff) < tolerance) {
+            return pt;
+        } else {
+            if(mul * diff > 0) {
+                b1 = mid;
+            } else {
+                b0 = mid;
+            }
+            i++;
+        }
+    }
+    return pt;
+};

src/lib/index.js

@@ -82,6 +82,7 @@ lib.segmentDistance = geom2dModule.segmentDistance;
 lib.getTextLocation = geom2dModule.getTextLocation;
 lib.clearLocationCache = geom2dModule.clearLocationCache;
 lib.getVisibleSegment = geom2dModule.getVisibleSegment;
+lib.findPointOnPath = geom2dModule.findPointOnPath;
 
 var extendModule = require('./extend');
 lib.extendFlat = extendModule.extendFlat;

src/plots/cartesian/constants.js

@@ -57,18 +57,13 @@ module.exports = {
     DFLTRANGEX: [-1, 6],
     DFLTRANGEY: [-1, 4],
 
-    // Layers to keep trace types in the right order.
-    // from back to front:
-    // 1. heatmaps, 2D histos and contour maps
-    // 2. bars / 1D histos
-    // 3. errorbars for bars and scatter
-    // 4. scatter
-    // 5. box plots
+    // Layers to keep trace types in the right order
     traceLayerClasses: [
         'imagelayer',
         'maplayer',
         'barlayer',
         'carpetlayer',
+        'violinlayer',
         'boxlayer',
         'scatterlayer'
     ],

src/plots/cartesian/type_defaults.js

@@ -75,7 +75,7 @@ function setAutoType(ax, data) {
 
         for(var i = 0; i < data.length; i++) {
             trace = data[i];
-            if(!Registry.traceIs(trace, 'box') ||
+            if(!Registry.traceIs(trace, 'box-violin') ||
                (trace[axLetter + 'axis'] || axLetter) !== id) continue;
 
             if(trace[posLetter] !== undefined) boxPositions.push(trace[posLetter][0]);
@@ -113,7 +113,7 @@ function getBoxPosLetter(trace) {
 
 function isBoxWithoutPositionCoords(trace, axLetter) {
     var posLetter = getBoxPosLetter(trace),
-        isBox = Registry.traceIs(trace, 'box'),
+        isBox = Registry.traceIs(trace, 'box-violin'),
         isCandlestick = Registry.traceIs(trace._fullInput || {}, 'candlestick');
 
     return (

src/plots/plots.js

@@ -1342,7 +1342,6 @@ plots.purge = function(gd) {
     delete gd.firstscatter;
     delete gd._hmlumcount;
     delete gd._hmpixcount;
-    delete gd.numboxes;
     delete gd._transitionData;
     delete gd._transitioning;
     delete gd._initialAutoSize;
@@ -2159,8 +2158,12 @@ plots.doCalcdata = function(gd, traces) {
     // firstscatter: fill-to-next on the first trace goes to zero
     gd.firstscatter = true;
 
-    // how many box plots do we have (in case they're grouped)
-    gd.numboxes = 0;
+    // how many box/violins plots do we have (in case they're grouped)
+    fullLayout._numBoxes = 0;
+    fullLayout._numViolins = 0;
+
+    // initialize violin per-scale-group stats container
+    fullLayout._violinScaleGroupStats = {};
 
     // for calculating avg luminosity of heatmaps
     gd._hmpixcount = 0;

src/traces/box/calc.js

@@ -15,16 +15,19 @@ var Axes = require('../../plots/cartesian/axes');
 
 // outlier definition based on http://www.physics.csbsju.edu/stats/box2.html
 module.exports = function calc(gd, trace) {
+    var fullLayout = gd._fullLayout;
     var xa = Axes.getFromId(gd, trace.xaxis || 'x');
     var ya = Axes.getFromId(gd, trace.yaxis || 'y');
-    var orientation = trace.orientation;
     var cd = [];
 
+    // N.B. violin reuses same Box.calc
+    var numKey = trace.type === 'violin' ? '_numViolins' : '_numBoxes';
+
     var i;
     var valAxis, valLetter;
     var posAxis, posLetter;
 
-    if(orientation === 'h') {
+    if(trace.orientation === 'h') {
         valAxis = xa;
         valLetter = 'x';
         posAxis = ya;
@@ -37,7 +40,7 @@ module.exports = function calc(gd, trace) {
     }
 
     var val = valAxis.makeCalcdata(trace, valLetter);
-    var pos = getPos(trace, posLetter, posAxis, val, gd.numboxes);
+    var pos = getPos(trace, posLetter, posAxis, val, fullLayout[numKey]);
 
     var dv = Lib.distinctVals(pos);
     var posDistinct = dv.vals;
@@ -115,13 +118,16 @@ module.exports = function calc(gd, trace) {
 
     if(cd.length > 0) {
         cd[0].t = {
-            boxnum: gd.numboxes,
-            dPos: dPos
+            num: fullLayout[numKey],
+            dPos: dPos,
+            posLetter: posLetter,
+            valLetter: valLetter
         };
-        gd.numboxes++;
+
+        fullLayout[numKey]++;
         return cd;
     } else {
-        return [{t: {emptybox: true}}];
+        return [{t: {empty: true}}];
     }
 };
 
@@ -130,7 +136,7 @@ module.exports = function calc(gd, trace) {
 // so if you want one box
 // per trace, set x0 (y0) to the x (y) value or category for this trace
 // (or set x (y) to a constant array matching y (x))
-function getPos(trace, posLetter, posAxis, val, numboxes) {
+function getPos(trace, posLetter, posAxis, val, num) {
     if(posLetter in trace) {
         return posAxis.makeCalcdata(trace, posLetter);
     }
@@ -150,7 +156,7 @@ function getPos(trace, posLetter, posAxis, val, numboxes) {
     )) {
         pos0 = trace.name;
     } else {
-        pos0 = numboxes;
+        pos0 = num;
     }
 
     var pos0c = posAxis.d2c(pos0, 0, trace[posLetter + 'calendar']);

src/traces/box/defaults.js

@@ -14,11 +14,25 @@ var Color = require('../../components/color');
 
 var attributes = require('./attributes');
 
-module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout) {
+function supplyDefaults(traceIn, traceOut, defaultColor, layout) {
     function coerce(attr, dflt) {
         return Lib.coerce(traceIn, traceOut, attributes, attr, dflt);
     }
 
+    handleSampleDefaults(traceIn, traceOut, coerce, layout);
+    if(traceOut.visible === false) return;
+
+    coerce('line.color', (traceIn.marker || {}).color || defaultColor);
+    coerce('line.width');
+    coerce('fillcolor', Color.addOpacity(traceOut.line.color, 0.5));
+
+    coerce('whiskerwidth');
+    coerce('boxmean');
+
+    handlePointsDefaults(traceIn, traceOut, coerce, {prefix: 'box'});
+}
+
+function handleSampleDefaults(traceIn, traceOut, coerce, layout) {
     var y = coerce('y');
     var x = coerce('x');
 
@@ -39,25 +53,22 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
     handleCalendarDefaults(traceIn, traceOut, ['x', 'y'], layout);
 
     coerce('orientation', defaultOrientation);
+}
 
-    coerce('line.color', (traceIn.marker || {}).color || defaultColor);
-    coerce('line.width');
-    coerce('fillcolor', Color.addOpacity(traceOut.line.color, 0.5));
-
-    coerce('whiskerwidth');
-    coerce('boxmean');
+function handlePointsDefaults(traceIn, traceOut, coerce, opts) {
+    var prefix = opts.prefix;
 
     var outlierColorDflt = Lib.coerce2(traceIn, traceOut, attributes, 'marker.outliercolor');
     var lineoutliercolor = coerce('marker.line.outliercolor');
 
-    var boxpoints = coerce(
-        'boxpoints',
+    var points = coerce(
+        prefix + 'points',
         (outlierColorDflt || lineoutliercolor) ? 'suspectedoutliers' : undefined
     );
 
-    if(boxpoints) {
-        coerce('jitter', boxpoints === 'all' ? 0.3 : 0);
-        coerce('pointpos', boxpoints === 'all' ? -1.5 : 0);
+    if(points) {
+        coerce('jitter', points === 'all' ? 0.3 : 0);
+        coerce('pointpos', points === 'all' ? -1.5 : 0);
 
         coerce('marker.symbol');
         coerce('marker.opacity');
@@ -66,7 +77,7 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
         coerce('marker.line.color');
         coerce('marker.line.width');
 
-        if(boxpoints === 'suspectedoutliers') {
+        if(points === 'suspectedoutliers') {
             coerce('marker.line.outliercolor', traceOut.marker.color);
             coerce('marker.line.outlierwidth');
         }
@@ -77,4 +88,10 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
     }
 
     coerce('hoveron');
+}
+
+module.exports = {
+    supplyDefaults: supplyDefaults,
+    handleSampleDefaults: handleSampleDefaults,
+    handlePointsDefaults: handlePointsDefaults
 };