@jrkasprzyk/parcoord-es 3.0.0

package/dist/parcoords.js

@@ -0,0 +1,4130 @@
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('requestanimationframe'), require('d3-selection'), require('d3-brush'), require('d3-drag'), require('d3-shape'), require('d3-scale'), require('d3-array'), require('d3-axis'), require('d3-dispatch')) :
+  typeof define === 'function' && define.amd ? define(['requestanimationframe', 'd3-selection', 'd3-brush', 'd3-drag', 'd3-shape', 'd3-scale', 'd3-array', 'd3-axis', 'd3-dispatch'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.ParCoords = factory(null, global.d3Selection, global.d3Brush, global.d3Drag, global.d3Shape, global.d3Scale, global.d3Array, global.d3Axis, global.d3Dispatch));
+})(this, (function (requestanimationframe, d3Selection, d3Brush, d3Drag, d3Shape, d3Scale, d3Array, d3Axis, d3Dispatch) { 'use strict';
+
+  var renderQueue = function renderQueue(func) {
+    var _queue = [],
+      // data to be rendered
+      _rate = 1000,
+      // number of calls per frame
+      _invalidate = function _invalidate() {},
+      // invalidate last render queue
+      _clear = function _clear() {}; // clearing function
+
+    var _rq = function rq(data) {
+      if (data) _rq.data(data);
+      _invalidate();
+      _clear();
+      _rq.render();
+    };
+    _rq.render = function () {
+      var valid = true;
+      _invalidate = _rq.invalidate = function () {
+        valid = false;
+      };
+      function doFrame() {
+        if (!valid) return true;
+        var chunk = _queue.splice(0, _rate);
+        chunk.map(func);
+        requestAnimationFrame(doFrame);
+      }
+      doFrame();
+    };
+    _rq.data = function (data) {
+      _invalidate();
+      _queue = data.slice(0); // creates a copy of the data
+      return _rq;
+    };
+    _rq.add = function (data) {
+      _queue = _queue.concat(data);
+    };
+    _rq.rate = function (value) {
+      if (!arguments.length) return _rate;
+      _rate = value;
+      return _rq;
+    };
+    _rq.remaining = function () {
+      return _queue.length;
+    };
+
+    // clear the canvas
+    _rq.clear = function (func) {
+      if (!arguments.length) {
+        _clear();
+        return _rq;
+      }
+      _clear = func;
+      return _rq;
+    };
+    _rq.invalidate = _invalidate;
+    return _rq;
+  };
+
+  var w = function w(config) {
+    return config.width - config.margin.right - config.margin.left;
+  };
+
+  var invertCategorical = function invertCategorical(selection, scale) {
+    if (selection.length === 0) {
+      return [];
+    }
+    var domain = scale.domain();
+    var range = scale.range();
+    var found = [];
+    range.forEach(function (d, i) {
+      if (d >= selection[0] && d <= selection[1]) {
+        found.push(domain[i]);
+      }
+    });
+    return found;
+  };
+  var invertByScale = function invertByScale(selection, scale) {
+    if (scale === null) return [];
+    return typeof scale.invert === 'undefined' ? invertCategorical(selection, scale) : selection.map(function (d) {
+      return scale.invert(d);
+    });
+  };
+
+  var brushExtents$1 = function brushExtents(state, config, pc) {
+    return function (extents) {
+      var brushes = state.brushes,
+        brushNodes = state.brushNodes;
+      if (typeof extents === 'undefined') {
+        return Object.keys(config.dimensions).reduce(function (acc, cur) {
+          var brush = brushes[cur];
+          //todo: brush check
+          if (brush !== undefined && d3Brush.brushSelection(brushNodes[cur]) !== null) {
+            var raw = d3Brush.brushSelection(brushNodes[cur]);
+            var yScale = config.dimensions[cur].yscale;
+            var scaled = invertByScale(raw, yScale);
+            acc[cur] = {
+              extent: brush.extent(),
+              selection: {
+                raw: raw,
+                scaled: scaled
+              }
+            };
+          }
+          return acc;
+        }, {});
+      } else {
+        //first get all the brush selections
+        var brushSelections = {};
+        pc.g().selectAll('.brush').each(function (d) {
+          brushSelections[d] = d3Selection.select(this);
+        });
+
+        // loop over each dimension and update appropriately (if it was passed in through extents)
+        Object.keys(config.dimensions).forEach(function (d) {
+          if (extents[d] === undefined) {
+            return;
+          }
+          var brush = brushes[d];
+          if (brush !== undefined) {
+            var dim = config.dimensions[d];
+            var yExtent = extents[d].map(dim.yscale);
+
+            //update the extent
+            //sets the brushable extent to the specified array of points [[x0, y0], [x1, y1]]
+            //we actually don't need this since we are using brush.move below
+            //extents set the limits of the brush which means a user will not be able
+            //to move or drag the brush beyond the limits set by brush.extent
+            //brush.extent([[-15, yExtent[1]], [15, yExtent[0]]]);
+
+            //redraw the brush
+            //https://github.com/d3/d3-brush#brush_move
+            // For an x-brush, it must be defined as [x0, x1]; for a y-brush, it must be defined as [y0, y1].
+            brushSelections[d].call(brush).call(brush.move, yExtent.reverse());
+
+            //fire some events
+            // brush.event(brushSelections[d]);
+          }
+        });
+
+        //redraw the chart
+        pc.renderBrushed();
+        return pc;
+      }
+    };
+  };
+
+  var _this$5 = undefined;
+  var brushReset$4 = function brushReset(state, config, pc) {
+    return function (dimension) {
+      var brushes = state.brushes;
+      if (dimension === undefined) {
+        config.brushed = false;
+        if (pc.g() !== undefined && pc.g() !== null) {
+          pc.g().selectAll('.brush').each(function (d) {
+            if (brushes[d] !== undefined) {
+              d3Selection.select(this).call(brushes[d].move, null);
+            }
+          });
+          pc.renderBrushed();
+        }
+      } else {
+        config.brushed = false;
+        if (pc.g() !== undefined && pc.g() !== null) {
+          pc.g().selectAll('.brush').each(function (d) {
+            if (d !== dimension) return;
+            d3Selection.select(this).call(brushes[d].move, null);
+            if (typeof brushes[d].type === 'function') {
+              brushes[d].event(d3Selection.select(this));
+            }
+          });
+          pc.renderBrushed();
+        }
+      }
+      return _this$5;
+    };
+  };
+
+  //https://github.com/d3/d3-brush/issues/10
+
+  // data within extents
+  var selected$4 = function selected(state, config, brushGroup) {
+    return function () {
+      var brushNodes = state.brushNodes;
+      var is_brushed = function is_brushed(p) {
+        return brushNodes[p] && d3Brush.brushSelection(brushNodes[p]) !== null;
+      };
+      var actives = Object.keys(config.dimensions).filter(is_brushed);
+      var extents = actives.map(function (p) {
+        var _brushRange = d3Brush.brushSelection(brushNodes[p]);
+        if (typeof config.dimensions[p].yscale.invert === 'function') {
+          return [config.dimensions[p].yscale.invert(_brushRange[1]), config.dimensions[p].yscale.invert(_brushRange[0])];
+        } else {
+          return _brushRange;
+        }
+      });
+      // We don't want to return the full data set when there are no axes brushed.
+      // Actually, when there are no axes brushed, by definition, no items are
+      // selected. So, let's avoid the filtering and just return false.
+      //if (actives.length === 0) return false;
+
+      // Resolves broken examples for now. They expect to get the full dataset back from empty brushes
+      if (actives.length === 0) return config.data;
+
+      // test if within range
+      var within = {
+        date: function date(d, p, dimension) {
+          if (typeof config.dimensions[p].yscale.bandwidth === 'function') {
+            // if it is ordinal
+            return extents[dimension][0] <= config.dimensions[p].yscale(d[p]) && config.dimensions[p].yscale(d[p]) <= extents[dimension][1];
+          } else {
+            return extents[dimension][0] <= d[p] && d[p] <= extents[dimension][1];
+          }
+        },
+        number: function number(d, p, dimension) {
+          if (typeof config.dimensions[p].yscale.bandwidth === 'function') {
+            // if it is ordinal
+            return extents[dimension][0] <= config.dimensions[p].yscale(d[p]) && config.dimensions[p].yscale(d[p]) <= extents[dimension][1];
+          } else {
+            return extents[dimension][0] <= d[p] && d[p] <= extents[dimension][1];
+          }
+        },
+        string: function string(d, p, dimension) {
+          return extents[dimension][0] <= config.dimensions[p].yscale(d[p]) && config.dimensions[p].yscale(d[p]) <= extents[dimension][1];
+        }
+      };
+      return config.data.filter(function (d) {
+        switch (brushGroup.predicate) {
+          case 'AND':
+            return actives.every(function (p, dimension) {
+              return within[config.dimensions[p].type](d, p, dimension);
+            });
+          case 'OR':
+            return actives.some(function (p, dimension) {
+              return within[config.dimensions[p].type](d, p, dimension);
+            });
+          default:
+            throw new Error('Unknown brush predicate ' + config.brushPredicate);
+        }
+      });
+    };
+  };
+
+  var brushUpdated$1 = function brushUpdated(config, pc, events, args) {
+    return function (newSelection) {
+      config.brushed = newSelection;
+      events.call('brush', pc, config.brushed, args);
+      pc.renderBrushed();
+    };
+  };
+  var brushFor$1 = function brushFor(state, config, pc, events, brushGroup) {
+    return function (axis, _selector) {
+      // handle hidden axes which will not be a property of dimensions
+      if (!config.dimensions.hasOwnProperty(axis)) {
+        return function () {};
+      }
+      var brushRangeMax = config.dimensions[axis].type === 'string' ? config.dimensions[axis].yscale.range()[config.dimensions[axis].yscale.range().length - 1] : config.dimensions[axis].yscale.range()[0];
+      var _brush = d3Brush.brushY(_selector).extent([[-15, 0], [15, brushRangeMax]]);
+      var convertBrushArguments = function convertBrushArguments(args) {
+        var args_array = Array.prototype.slice.call(args);
+        var axis = args_array[0];
+        var raw = d3Brush.brushSelection(args_array[2][0]) || [];
+
+        // handle hidden axes which will not have a yscale
+        var yscale = null;
+        if (config.dimensions.hasOwnProperty(axis)) {
+          yscale = config.dimensions[axis].yscale;
+        }
+
+        // ordinal scales do not have invert
+        var scaled = invertByScale(raw, yscale);
+        return {
+          axis: args_array[0],
+          node: args_array[2][0],
+          selection: {
+            raw: raw,
+            scaled: scaled
+          }
+        };
+      };
+      _brush.on('start', function (event) {
+        if (event.sourceEvent !== null) {
+          events.call('brushstart', pc, config.brushed, convertBrushArguments(arguments));
+          if (typeof event.sourceEvent.stopPropagation === 'function') {
+            event.sourceEvent.stopPropagation();
+          }
+        }
+      }).on('brush', function () {
+        brushUpdated$1(config, pc, events, convertBrushArguments(arguments))(selected$4(state, config, brushGroup)());
+      }).on('end', function () {
+        brushUpdated$1(config, pc, events)(selected$4(state, config, brushGroup)());
+        events.call('brushend', pc, config.brushed, convertBrushArguments(arguments));
+      });
+      state.brushes[axis] = _brush;
+      state.brushNodes[axis] = _selector.node();
+      return _brush;
+    };
+  };
+
+  var install$3 = function install(state, config, pc, events, brushGroup) {
+    return function () {
+      if (!pc.g()) {
+        pc.createAxes();
+      }
+
+      // Add and store a brush for each axis.
+      var brush = pc.g().append('svg:g').attr('class', 'brush').each(function (d) {
+        d3Selection.select(this).call(brushFor$1(state, config, pc, events, brushGroup)(d, d3Selection.select(this)));
+      });
+      brush.selectAll('rect').style('visibility', null).attr('x', -15).attr('width', 30);
+      brush.selectAll('rect.background').style('fill', 'transparent');
+      brush.selectAll('rect.extent').style('fill', 'rgba(255,255,255,0.25)').style('stroke', 'rgba(0,0,0,0.6)');
+      brush.selectAll('.resize rect').style('fill', 'rgba(0,0,0,0.1)');
+      pc.brushExtents = brushExtents$1(state, config, pc);
+      pc.brushReset = brushReset$4(state, config, pc);
+      return pc;
+    };
+  };
+
+  var uninstall$3 = function uninstall(state, pc) {
+    return function () {
+      if (pc.g() !== undefined && pc.g() !== null) pc.g().selectAll('.brush').remove();
+      state.brushes = {};
+      delete pc.brushExtents;
+      delete pc.brushReset;
+    };
+  };
+
+  var install1DAxes = function install1DAxes(brushGroup, config, pc, events) {
+    var state = {
+      brushes: {},
+      brushNodes: {}
+    };
+    brushGroup.modes['1D-axes'] = {
+      install: install$3(state, config, pc, events, brushGroup),
+      uninstall: uninstall$3(state, pc),
+      selected: selected$4(state, config, brushGroup),
+      brushState: brushExtents$1(state, config, pc)
+    };
+  };
+
+  var drawBrushes = function drawBrushes(brushes, config, pc, axis, selector) {
+    var brushSelection = selector.selectAll('.brush').data(brushes, function (d) {
+      return d.id;
+    });
+    brushSelection.enter().insert('g', '.brush').attr('class', 'brush').attr('dimension', axis).attr('id', function (b) {
+      return 'brush-' + Object.keys(config.dimensions).indexOf(axis) + '-' + b.id;
+    }).each(function (brushObject) {
+      brushObject.brush(d3Selection.select(this));
+    });
+    brushSelection.each(function (brushObject) {
+      d3Selection.select(this).attr('class', 'brush').selectAll('.overlay').style('pointer-events', function () {
+        var brush = brushObject.brush;
+        if (brushObject.id === brushes.length - 1 && brush !== undefined) {
+          return 'all';
+        } else {
+          return 'none';
+        }
+      });
+    });
+    brushSelection.exit().remove();
+  };
+
+  function _arrayLikeToArray(r, a) {
+    (null == a || a > r.length) && (a = r.length);
+    for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+    return n;
+  }
+  function _arrayWithHoles(r) {
+    if (Array.isArray(r)) return r;
+  }
+  function _createForOfIteratorHelper(r, e) {
+    var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+    if (!t) {
+      if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e) {
+        t && (r = t);
+        var n = 0,
+          F = function () {};
+        return {
+          s: F,
+          n: function () {
+            return n >= r.length ? {
+              done: true
+            } : {
+              done: false,
+              value: r[n++]
+            };
+          },
+          e: function (r) {
+            throw r;
+          },
+          f: F
+        };
+      }
+      throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+    }
+    var o,
+      a = true,
+      u = false;
+    return {
+      s: function () {
+        t = t.call(r);
+      },
+      n: function () {
+        var r = t.next();
+        return a = r.done, r;
+      },
+      e: function (r) {
+        u = true, o = r;
+      },
+      f: function () {
+        try {
+          a || null == t.return || t.return();
+        } finally {
+          if (u) throw o;
+        }
+      }
+    };
+  }
+  function _defineProperty(e, r, t) {
+    return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+      value: t,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    }) : e[r] = t, e;
+  }
+  function _iterableToArrayLimit(r, l) {
+    var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+    if (null != t) {
+      var e,
+        n,
+        i,
+        u,
+        a = [],
+        f = true,
+        o = false;
+      try {
+        if (i = (t = t.call(r)).next, 0 === l) {
+          if (Object(t) !== t) return;
+          f = !1;
+        } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+      } catch (r) {
+        o = true, n = r;
+      } finally {
+        try {
+          if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
+        } finally {
+          if (o) throw n;
+        }
+      }
+      return a;
+    }
+  }
+  function _nonIterableRest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+  }
+  function ownKeys(e, r) {
+    var t = Object.keys(e);
+    if (Object.getOwnPropertySymbols) {
+      var o = Object.getOwnPropertySymbols(e);
+      r && (o = o.filter(function (r) {
+        return Object.getOwnPropertyDescriptor(e, r).enumerable;
+      })), t.push.apply(t, o);
+    }
+    return t;
+  }
+  function _objectSpread2(e) {
+    for (var r = 1; r < arguments.length; r++) {
+      var t = null != arguments[r] ? arguments[r] : {};
+      r % 2 ? ownKeys(Object(t), true).forEach(function (r) {
+        _defineProperty(e, r, t[r]);
+      }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
+        Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+      });
+    }
+    return e;
+  }
+  function _slicedToArray(r, e) {
+    return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
+  }
+  function _toPrimitive(t, r) {
+    if ("object" != typeof t || !t) return t;
+    var e = t[Symbol.toPrimitive];
+    if (void 0 !== e) {
+      var i = e.call(t, r);
+      if ("object" != typeof i) return i;
+      throw new TypeError("@@toPrimitive must return a primitive value.");
+    }
+    return ("string" === r ? String : Number)(t);
+  }
+  function _toPropertyKey(t) {
+    var i = _toPrimitive(t, "string");
+    return "symbol" == typeof i ? i : i + "";
+  }
+  function _unsupportedIterableToArray(r, a) {
+    if (r) {
+      if ("string" == typeof r) return _arrayLikeToArray(r, a);
+      var t = {}.toString.call(r).slice(8, -1);
+      return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
+    }
+  }
+
+  // data within extents
+  var selected$3 = function selected(state, config, pc, events, brushGroup) {
+    var brushes = state.brushes;
+    var is_brushed = function is_brushed(p, pos) {
+      var axisBrushes = brushes[p];
+      for (var i = 0; i < axisBrushes.length; i++) {
+        var brush = document.getElementById('brush-' + pos + '-' + i);
+        if (brush && d3Brush.brushSelection(brush) !== null) {
+          return true;
+        }
+      }
+      return false;
+    };
+    var actives = Object.keys(config.dimensions).filter(is_brushed);
+    var extents = actives.map(function (p) {
+      var axisBrushes = brushes[p];
+      return axisBrushes.filter(function (d) {
+        return !pc.hideAxis().includes(d);
+      }).map(function (d, i) {
+        return d3Brush.brushSelection(document.getElementById('brush-' + Object.keys(config.dimensions).indexOf(p) + '-' + i));
+      }).map(function (d, i) {
+        if (d === null || d === undefined) {
+          return null;
+        } else if (typeof config.dimensions[p].yscale.invert === 'function') {
+          return [config.dimensions[p].yscale.invert(d[1]), config.dimensions[p].yscale.invert(d[0])];
+        } else {
+          return d;
+        }
+      });
+    });
+
+    // We don't want to return the full data set when there are no axes brushed.
+    // Actually, when there are no axes brushed, by definition, no items are
+    // selected. So, let's avoid the filtering and just return false.
+    //if (actives.length === 0) return false;
+
+    // Resolves broken examples for now. They expect to get the full dataset back from empty brushes
+    if (actives.length === 0) return config.data;
+
+    // test if within range
+    var within = {
+      date: function date(d, p, i) {
+        var dimExt = extents[i];
+        if (typeof config.dimensions[p].yscale.bandwidth === 'function') {
+          // if it is ordinal
+          var _iterator = _createForOfIteratorHelper(dimExt),
+            _step;
+          try {
+            for (_iterator.s(); !(_step = _iterator.n()).done;) {
+              var e = _step.value;
+              if (e === null || e === undefined) {
+                continue;
+              }
+              if (e[0] <= config.dimensions[p].yscale(d[p]) && config.dimensions[p].yscale(d[p]) <= e[1]) {
+                return true;
+              }
+            }
+          } catch (err) {
+            _iterator.e(err);
+          } finally {
+            _iterator.f();
+          }
+          return false;
+        } else {
+          var _iterator2 = _createForOfIteratorHelper(dimExt),
+            _step2;
+          try {
+            for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+              var _e = _step2.value;
+              if (_e === null || _e === undefined) {
+                continue;
+              }
+              if (_e[0] <= d[p] && d[p] <= _e[1]) {
+                return true;
+              }
+            }
+          } catch (err) {
+            _iterator2.e(err);
+          } finally {
+            _iterator2.f();
+          }
+          return false;
+        }
+      },
+      number: function number(d, p, i) {
+        var dimExt = extents[i];
+        if (typeof config.dimensions[p].yscale.bandwidth === 'function') {
+          // if it is ordinal
+          var _iterator3 = _createForOfIteratorHelper(dimExt),
+            _step3;
+          try {
+            for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+              var e = _step3.value;
+              if (e === null || e === undefined) {
+                continue;
+              }
+              if (e[0] <= config.dimensions[p].yscale(d[p]) && config.dimensions[p].yscale(d[p]) <= e[1]) {
+                return true;
+              }
+            }
+          } catch (err) {
+            _iterator3.e(err);
+          } finally {
+            _iterator3.f();
+          }
+          return false;
+        } else {
+          var _iterator4 = _createForOfIteratorHelper(dimExt),
+            _step4;
+          try {
+            for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
+              var _e2 = _step4.value;
+              if (_e2 === null || _e2 === undefined) {
+                continue;
+              }
+              if (_e2[0] <= d[p] && d[p] <= _e2[1]) {
+                return true;
+              }
+            }
+          } catch (err) {
+            _iterator4.e(err);
+          } finally {
+            _iterator4.f();
+          }
+          return false;
+        }
+      },
+      string: function string(d, p, i) {
+        var dimExt = extents[i];
+        var _iterator5 = _createForOfIteratorHelper(dimExt),
+          _step5;
+        try {
+          for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
+            var e = _step5.value;
+            if (e === null || e === undefined) {
+              continue;
+            }
+            if (e[0] <= config.dimensions[p].yscale(d[p]) && config.dimensions[p].yscale(d[p]) <= e[1]) {
+              return true;
+            }
+          }
+        } catch (err) {
+          _iterator5.e(err);
+        } finally {
+          _iterator5.f();
+        }
+        return false;
+      }
+    };
+    return config.data.filter(function (d) {
+      switch (brushGroup.predicate) {
+        case 'AND':
+          return actives.every(function (p, i) {
+            return within[config.dimensions[p].type](d, p, i);
+          });
+        case 'OR':
+          return actives.some(function (p, i) {
+            return within[config.dimensions[p].type](d, p, i);
+          });
+        default:
+          throw new Error('Unknown brush predicate ' + config.brushPredicate);
+      }
+    });
+  };
+
+  var brushUpdated = function brushUpdated(config, pc, events) {
+    return function (newSelection) {
+      config.brushed = newSelection;
+      events.call('brush', pc, config.brushed);
+      pc.renderBrushed();
+    };
+  };
+  var _newBrush = function newBrush(state, config, pc, events, brushGroup) {
+    return function (axis, _selector) {
+      var brushes = state.brushes,
+        brushNodes = state.brushNodes;
+      var brushRangeMax = config.dimensions[axis].type === 'string' ? config.dimensions[axis].yscale.range()[config.dimensions[axis].yscale.range().length - 1] : config.dimensions[axis].yscale.range()[0];
+      var brush = d3Brush.brushY().extent([[-15, 0], [15, brushRangeMax]]);
+      var id = brushes[axis] ? brushes[axis].length : 0;
+      var node = 'brush-' + Object.keys(config.dimensions).indexOf(axis) + '-' + id;
+      if (brushes[axis]) {
+        brushes[axis].push({
+          id: id,
+          brush: brush,
+          node: node
+        });
+      } else {
+        brushes[axis] = [{
+          id: id,
+          brush: brush,
+          node: node
+        }];
+      }
+      if (brushNodes[axis]) {
+        brushNodes[axis].push({
+          id: id,
+          node: node
+        });
+      } else {
+        brushNodes[axis] = [{
+          id: id,
+          node: node
+        }];
+      }
+      brush.on('start', function (event) {
+        if (event.sourceEvent !== null) {
+          events.call('brushstart', pc, config.brushed);
+          if (typeof event.sourceEvent.stopPropagation === 'function') {
+            event.sourceEvent.stopPropagation();
+          }
+        }
+      }).on('brush', function () {
+        // record selections
+        brushUpdated(config, pc, events)(selected$3(state, config, pc, events, brushGroup));
+      }).on('end', function (event) {
+        // Figure out if our latest brush has a selection
+        var lastBrushID = brushes[axis][brushes[axis].length - 1].id;
+        var lastBrush = document.getElementById('brush-' + Object.keys(config.dimensions).indexOf(axis) + '-' + lastBrushID);
+        var selection = d3Brush.brushSelection(lastBrush);
+        if (selection !== undefined && selection !== null && selection[0] !== selection[1]) {
+          _newBrush(state, config, pc, events, brushGroup)(axis, _selector);
+          drawBrushes(brushes[axis], config, pc, axis, _selector);
+          brushUpdated(config, pc, events)(selected$3(state, config, pc, events, brushGroup));
+        } else {
+          if (event.sourceEvent && event.sourceEvent.toString() === '[object MouseEvent]' && event.selection === null) {
+            pc.brushReset(axis);
+          }
+        }
+        events.call('brushend', pc, config.brushed);
+      });
+      return brush;
+    };
+  };
+
+  /**
+   *
+   * extents are in format of [[2,6], [3,5]]
+   *
+   * * @param state
+   * @param config
+   * @param pc
+   * @returns {Function}
+   */
+  var brushExtents = function brushExtents(state, config, pc, events, brushGroup) {
+    return function (extents) {
+      var brushes = state.brushes;
+      var hiddenAxes = pc.hideAxis();
+      if (typeof extents === 'undefined') {
+        return Object.keys(config.dimensions).filter(function (d) {
+          return !hiddenAxes.includes(d);
+        }).reduce(function (acc, cur, pos) {
+          var axisBrushes = brushes[cur];
+          if (axisBrushes === undefined || axisBrushes === null) {
+            acc[cur] = [];
+          } else {
+            acc[cur] = axisBrushes.reduce(function (d, p, i) {
+              var raw = d3Brush.brushSelection(document.getElementById('brush-' + pos + '-' + i));
+              if (raw) {
+                var yScale = config.dimensions[cur].yscale;
+                var scaled = invertByScale(raw, yScale);
+                d.push({
+                  extent: p.brush.extent(),
+                  selection: {
+                    raw: raw,
+                    scaled: scaled
+                  }
+                });
+              }
+              return d;
+            }, []);
+          }
+          return acc;
+        }, {});
+      } else {
+        // //first get all the brush selections
+        // loop over each dimension and update appropriately (if it was passed in through extents)
+        Object.keys(config.dimensions).forEach(function (d, pos) {
+          if (extents[d] === undefined || extents[d] === null) {
+            return;
+          }
+          var dim = config.dimensions[d];
+          var yExtents = extents[d].map(function (e) {
+            return e.map(dim.yscale);
+          });
+          var _bs = yExtents.map(function (e, j) {
+            var _brush = _newBrush(state, config, pc, events, brushGroup)(d, d3Selection.select('#brush-group-' + pos));
+            //update the extent
+            //sets the brushable extent to the specified array of points [[x0, y0], [x1, y1]]
+            _brush.extent([[-15, e[1]], [15, e[0]]]);
+            return {
+              id: j,
+              brush: _brush,
+              ext: e
+            };
+          });
+          brushes[d] = _bs;
+          drawBrushes(_bs, config, pc, d, d3Selection.select('#brush-group-' + pos));
+
+          //redraw the brush
+          //https://github.com/d3/d3-brush#brush_move
+          // For an x-brush, it must be defined as [x0, x1]; for a y-brush, it must be defined as [y0, y1].
+          _bs.forEach(function (f, k) {
+            d3Selection.select('#brush-' + pos + '-' + k).call(f.brush).call(f.brush.move, f.ext.reverse());
+          });
+        });
+
+        //redraw the chart
+        pc.renderBrushed();
+        return pc;
+      }
+    };
+  };
+
+  var _this$4 = undefined;
+  var brushReset$3 = function brushReset(state, config, pc) {
+    return function (dimension) {
+      var brushes = state.brushes;
+      if (dimension === undefined) {
+        if (pc.g() !== undefined && pc.g() !== null) {
+          Object.keys(config.dimensions).forEach(function (d, pos) {
+            var axisBrush = brushes[d];
+
+            // hidden axes will be undefined
+            if (axisBrush) {
+              axisBrush.forEach(function (e, i) {
+                var brush = document.getElementById('brush-' + pos + '-' + i);
+                if (brush && d3Brush.brushSelection(brush) !== null) {
+                  pc.g().select('#brush-' + pos + '-' + i).call(e.brush.move, null);
+                }
+              });
+            }
+          });
+          pc.renderBrushed();
+        }
+      } else {
+        if (pc.g() !== undefined && pc.g() !== null) {
+          var axisBrush = brushes[dimension];
+          var pos = Object.keys(config.dimensions).indexOf(dimension);
+          if (axisBrush) {
+            axisBrush.forEach(function (e, i) {
+              var brush = document.getElementById('brush-' + pos + '-' + i);
+              if (d3Brush.brushSelection(brush) !== null) {
+                pc.g().select('#brush-' + pos + '-' + i).call(e.brush.move, null);
+                if (typeof e.event === 'function') {
+                  e.event(d3Selection.select('#brush-' + pos + '-' + i));
+                }
+              }
+            });
+          }
+          pc.renderBrushed();
+        }
+      }
+      return _this$4;
+    };
+  };
+
+  var brushFor = function brushFor(state, config, pc, events, brushGroup) {
+    return function (axis, _selector) {
+      var brushes = state.brushes;
+      _newBrush(state, config, pc, events, brushGroup)(axis, _selector);
+      drawBrushes(brushes[axis], config, pc, axis, _selector);
+    };
+  };
+
+  var install$2 = function install(state, config, pc, events, brushGroup) {
+    return function () {
+      if (!pc.g()) {
+        pc.createAxes();
+      }
+      var hiddenAxes = pc.hideAxis();
+      pc.g().append('svg:g').attr('id', function (d, i) {
+        return 'brush-group-' + i;
+      }).attr('class', 'brush-group').attr('dimension', function (d) {
+        return d;
+      }).each(function (d) {
+        if (!hiddenAxes.includes(d)) {
+          brushFor(state, config, pc, events, brushGroup)(d, d3Selection.select(this));
+        }
+      });
+      pc.brushExtents = brushExtents(state, config, pc, events, brushGroup);
+      pc.brushReset = brushReset$3(state, config, pc);
+      return pc;
+    };
+  };
+
+  var uninstall$2 = function uninstall(state, pc) {
+    return function () {
+      if (pc.g() !== undefined && pc.g() !== null) pc.g().selectAll('.brush-group').remove();
+      state.brushes = {};
+      delete pc.brushExtents;
+      delete pc.brushReset;
+    };
+  };
+
+  var install1DMultiAxes = function install1DMultiAxes(brushGroup, config, pc, events) {
+    var state = {
+      brushes: {},
+      brushNodes: {}
+    };
+    brushGroup.modes['1D-axes-multi'] = {
+      install: install$2(state, config, pc, events, brushGroup),
+      uninstall: uninstall$2(state, pc),
+      selected: selected$3(state, config, brushGroup),
+      brushState: brushExtents(state, config, pc)
+    };
+  };
+
+  var uninstall$1 = function uninstall(state, pc) {
+    return function () {
+      pc.selection.select('svg').select('g#strums').remove();
+      pc.selection.select('svg').select('rect#strum-events').remove();
+      pc.on('axesreorder.strums', undefined);
+      delete pc.brushReset;
+      state.strumRect = undefined;
+    };
+  };
+
+  // test if point falls between lines
+  var containmentTest$1 = function containmentTest(strum, width) {
+    return function (p) {
+      var p1 = [strum.p1[0] - strum.minX, strum.p1[1] - strum.minX],
+        p2 = [strum.p2[0] - strum.minX, strum.p2[1] - strum.minX],
+        m1 = 1 - width / p1[0],
+        b1 = p1[1] * (1 - m1),
+        m2 = 1 - width / p2[0],
+        b2 = p2[1] * (1 - m2);
+      var x = p[0],
+        y = p[1],
+        y1 = m1 * x + b1,
+        y2 = m2 * x + b2;
+      return y > Math.min(y1, y2) && y < Math.max(y1, y2);
+    };
+  };
+  var crossesStrum$1 = function crossesStrum(state, config) {
+    return function (d, id) {
+      var strum = state.strums[id],
+        test = containmentTest$1(strum, state.strums.width(id)),
+        d1 = strum.dims.left,
+        d2 = strum.dims.right,
+        y1 = config.dimensions[d1].yscale,
+        y2 = config.dimensions[d2].yscale,
+        point = [y1(d[d1]) - strum.minX, y2(d[d2]) - strum.minX];
+      return test(point);
+    };
+  };
+  var selected$2 = function selected(brushGroup, state, config) {
+    // Get the ids of the currently active strums.
+    var ids = Object.getOwnPropertyNames(state.strums).filter(function (d) {
+        return !isNaN(d);
+      }),
+      brushed = config.data;
+    if (ids.length === 0) {
+      return brushed;
+    }
+    var crossTest = crossesStrum$1(state, config);
+    return brushed.filter(function (d) {
+      switch (brushGroup.predicate) {
+        case 'AND':
+          return ids.every(function (id) {
+            return crossTest(d, id);
+          });
+        case 'OR':
+          return ids.some(function (id) {
+            return crossTest(d, id);
+          });
+        default:
+          throw new Error('Unknown brush predicate ' + config.brushPredicate);
+      }
+    });
+  };
+
+  var removeStrum$1 = function removeStrum(state, pc) {
+    var strum = state.strums[state.strums.active],
+      svg = pc.selection.select('svg').select('g#strums');
+    delete state.strums[state.strums.active];
+    svg.selectAll('line#strum-' + strum.dims.i).remove();
+    svg.selectAll('circle#strum-' + strum.dims.i).remove();
+  };
+
+  var onDragEnd$1 = function onDragEnd(brushGroup, state, config, pc, events) {
+    return function () {
+      var strum = state.strums[state.strums.active];
+
+      // Okay, somewhat unexpected, but not totally unsurprising, a mousclick is
+      // considered a drag without move. So we have to deal with that case
+      if (strum && strum.p1[0] === strum.p2[0] && strum.p1[1] === strum.p2[1]) {
+        removeStrum$1(state, pc);
+      }
+      var brushed = selected$2(brushGroup, state, config);
+      state.strums.active = undefined;
+      config.brushed = brushed;
+      pc.renderBrushed();
+      events.call('brushend', pc, config.brushed);
+    };
+  };
+
+  var _drawStrum$1 = function drawStrum(brushGroup, state, config, pc, events, strum, activePoint) {
+    var _svg = pc.selection.select('svg').select('g#strums'),
+      id = strum.dims.i,
+      points = [strum.p1, strum.p2],
+      _line = _svg.selectAll('line#strum-' + id).data([strum]),
+      circles = _svg.selectAll('circle#strum-' + id).data(points),
+      _drag = d3Drag.drag();
+    _line.enter().append('line').attr('id', 'strum-' + id).attr('class', 'strum');
+    _line.attr('x1', function (d) {
+      return d.p1[0];
+    }).attr('y1', function (d) {
+      return d.p1[1];
+    }).attr('x2', function (d) {
+      return d.p2[0];
+    }).attr('y2', function (d) {
+      return d.p2[1];
+    }).attr('stroke', 'black').attr('stroke-width', 2);
+    _drag.on('drag', function (event, d) {
+      var i = points.indexOf(d) + 1;
+      strum['p' + i][0] = Math.min(Math.max(strum.minX + 1, event.x), strum.maxX);
+      strum['p' + i][1] = Math.min(Math.max(strum.minY, event.y), strum.maxY);
+      _drawStrum$1(brushGroup, state, config, pc, events, strum, i - 1);
+    }).on('end', onDragEnd$1(brushGroup, state, config, pc, events));
+    circles.enter().append('circle').attr('id', 'strum-' + id).attr('class', 'strum');
+    circles.attr('cx', function (d) {
+      return d[0];
+    }).attr('cy', function (d) {
+      return d[1];
+    }).attr('r', 5).style('opacity', function (d, i) {
+      return activePoint !== undefined && i === activePoint ? 0.8 : 0;
+    }).on('mouseover', function () {
+      d3Selection.select(this).style('opacity', 0.8);
+    }).on('mouseout', function () {
+      d3Selection.select(this).style('opacity', 0);
+    }).call(_drag);
+  };
+  var onDrag$1 = function onDrag(brushGroup, state, config, pc, events) {
+    return function (event) {
+      var strum = state.strums[state.strums.active];
+
+      // Make sure that the point is within the bounds
+      strum.p2[0] = Math.min(Math.max(strum.minX + 1, event.x - config.margin.left), strum.maxX);
+      strum.p2[1] = Math.min(Math.max(strum.minY, event.y - config.margin.top), strum.maxY);
+      _drawStrum$1(brushGroup, state, config, pc, events, strum, 1);
+    };
+  };
+
+  var h = function h(config) {
+    return config.height - config.margin.top - config.margin.bottom;
+  };
+
+  var dimensionsForPoint = function dimensionsForPoint(config, pc, xscale, p) {
+    var dims = {
+      i: -1,
+      left: undefined,
+      right: undefined
+    };
+    Object.keys(config.dimensions).some(function (dim, i) {
+      if (xscale(dim) < p[0]) {
+        dims.i = i;
+        dims.left = dim;
+        dims.right = Object.keys(config.dimensions)[pc.getOrderedDimensionKeys().indexOf(dim) + 1];
+        return false;
+      }
+      return true;
+    });
+    if (dims.left === undefined) {
+      // Event on the left side of the first axis.
+      dims.i = 0;
+      dims.left = pc.getOrderedDimensionKeys()[0];
+      dims.right = pc.getOrderedDimensionKeys()[1];
+    } else if (dims.right === undefined) {
+      // Event on the right side of the last axis
+      dims.i = Object.keys(config.dimensions).length - 1;
+      dims.right = dims.left;
+      dims.left = pc.getOrderedDimensionKeys()[Object.keys(config.dimensions).length - 2];
+    }
+    return dims;
+  };
+
+  // First we need to determine between which two axes the sturm was started.
+  // This will determine the freedom of movement, because a strum can
+  // logically only happen between two axes, so no movement outside these axes
+  // should be allowed.
+  var onDragStart$1 = function onDragStart(state, config, pc, xscale) {
+    return function (event) {
+      var p = d3Selection.pointer(event, state.strumRect.node());
+      p[0] = p[0] - config.margin.left;
+      p[1] = p[1] - config.margin.top;
+      var dims = dimensionsForPoint(config, pc, xscale, p);
+      var strum = {
+        p1: p,
+        dims: dims,
+        minX: xscale(dims.left),
+        maxX: xscale(dims.right),
+        minY: 0,
+        maxY: h(config)
+      };
+
+      // Make sure that the point is within the bounds
+      strum.p1[0] = Math.min(Math.max(strum.minX, p[0]), strum.maxX);
+      strum.p2 = strum.p1.slice();
+      state.strums[dims.i] = strum;
+      state.strums.active = dims.i;
+    };
+  };
+
+  var brushReset$2 = function brushReset(brushGroup, state, config, pc, events) {
+    return function () {
+      var ids = Object.getOwnPropertyNames(state.strums).filter(function (d) {
+        return !isNaN(d);
+      });
+      ids.forEach(function (d) {
+        state.strums.active = d;
+        removeStrum$1(state, pc);
+      });
+      onDragEnd$1(brushGroup, state, config, pc, events)();
+    };
+  };
+
+  // Checks if the first dimension is directly left of the second dimension.
+  var consecutive = function consecutive(dimensions) {
+    return function (first, second) {
+      var keys = Object.keys(dimensions);
+      return keys.some(function (d, i) {
+        return d === first ? i + i < keys.length && dimensions[i + 1] === second : false;
+      });
+    };
+  };
+
+  var install$1 = function install(brushGroup, state, config, pc, events, xscale) {
+    return function () {
+      if (pc.g() === undefined || pc.g() === null) {
+        pc.createAxes();
+      }
+      var _drag = d3Drag.drag();
+
+      // Map of current strums. Strums are stored per segment of the PC. A segment,
+      // being the area between two axes. The left most area is indexed at 0.
+      state.strums.active = undefined;
+      // Returns the width of the PC segment where currently a strum is being
+      // placed. NOTE: even though they are evenly spaced in our current
+      // implementation, we keep for when non-even spaced segments are supported as
+      // well.
+      state.strums.width = function (id) {
+        return state.strums[id] === undefined ? undefined : state.strums[id].maxX - state.strums[id].minX;
+      };
+      pc.on('axesreorder.strums', function () {
+        var ids = Object.getOwnPropertyNames(state.strums).filter(function (d) {
+          return !isNaN(d);
+        });
+        if (ids.length > 0) {
+          // We have some strums, which might need to be removed.
+          ids.forEach(function (d) {
+            var dims = state.strums[d].dims;
+            state.strums.active = d;
+            // If the two dimensions of the current strum are not next to each other
+            // any more, than we'll need to remove the strum. Otherwise we keep it.
+            if (!consecutive(config.dimensions)(dims.left, dims.right)) {
+              removeStrum$1(state, pc);
+            }
+          });
+          onDragEnd$1(brushGroup, state, config, pc, events)();
+        }
+      });
+
+      // Add a new svg group in which we draw the strums.
+      pc.selection.select('svg').append('g').attr('id', 'strums').attr('transform', 'translate(' + config.margin.left + ',' + config.margin.top + ')');
+
+      // Install the required brushReset function
+      pc.brushReset = brushReset$2(brushGroup, state, config, pc, events);
+      _drag.on('start', onDragStart$1(state, config, pc, xscale)).on('drag', onDrag$1(brushGroup, state, config, pc, events)).on('end', onDragEnd$1(brushGroup, state, config, pc, events));
+
+      // NOTE: The styling needs to be done here and not in the css. This is because
+      //       for 1D brushing, the canvas layers should not listen to
+      //       pointer-events._.
+      state.strumRect = pc.selection.select('svg').insert('rect', 'g#strums').attr('id', 'strum-events').attr('x', config.margin.left).attr('y', config.margin.top).attr('width', w(config)).attr('height', h(config) + 2).style('opacity', 0).call(_drag);
+    };
+  };
+
+  var install2DStrums = function install2DStrums(brushGroup, config, pc, events, xscale) {
+    var state = {
+      strums: {},
+      strumRect: {}
+    };
+    brushGroup.modes['2D-strums'] = {
+      install: install$1(brushGroup, state, config, pc, events, xscale),
+      uninstall: uninstall$1(state, pc),
+      selected: selected$2(brushGroup, state, config),
+      brushState: function brushState() {
+        return state.strums;
+      }
+    };
+  };
+
+  var uninstall = function uninstall(state, pc) {
+    return function () {
+      pc.selection.select('svg').select('g#arcs').remove();
+      pc.selection.select('svg').select('rect#arc-events').remove();
+      pc.on('axesreorder.arcs', undefined);
+      delete pc.brushReset;
+      state.strumRect = undefined;
+    };
+  };
+
+  var hypothenuse = function hypothenuse(a, b) {
+    return Math.sqrt(a * a + b * b);
+  };
+
+  // [0, 2*PI] -> [-PI/2, PI/2]
+  var signedAngle = function signedAngle(angle) {
+    return angle > Math.PI ? 1.5 * Math.PI - angle : 0.5 * Math.PI - angle;
+  };
+
+  /**
+   * angles are stored in radians from in [0, 2*PI], where 0 in 12 o'clock.
+   * However, one can only select lines from 0 to PI, so we compute the
+   * 'signed' angle, where 0 is the horizontal line (3 o'clock), and +/- PI/2
+   * are 12 and 6 o'clock respectively.
+   */
+  var containmentTest = function containmentTest(arc) {
+    return function (a) {
+      var startAngle = signedAngle(arc.startAngle);
+      var endAngle = signedAngle(arc.endAngle);
+      if (startAngle > endAngle) {
+        var tmp = startAngle;
+        startAngle = endAngle;
+        endAngle = tmp;
+      }
+
+      // test if segment angle is contained in angle interval
+      return a >= startAngle && a <= endAngle;
+    };
+  };
+  var crossesStrum = function crossesStrum(state, config) {
+    return function (d, id) {
+      var arc = state.arcs[id],
+        test = containmentTest(arc),
+        d1 = arc.dims.left,
+        d2 = arc.dims.right,
+        y1 = config.dimensions[d1].yscale,
+        y2 = config.dimensions[d2].yscale,
+        a = state.arcs.width(id),
+        b = y1(d[d1]) - y2(d[d2]),
+        c = hypothenuse(a, b),
+        angle = Math.asin(b / c); // rad in [-PI/2, PI/2]
+      return test(angle);
+    };
+  };
+  var selected$1 = function selected(brushGroup, state, config) {
+    var ids = Object.getOwnPropertyNames(state.arcs).filter(function (d) {
+      return !isNaN(d);
+    });
+    var brushed = config.data;
+    if (ids.length === 0) {
+      return brushed;
+    }
+    var crossTest = crossesStrum(state, config);
+    return brushed.filter(function (d) {
+      switch (brushGroup.predicate) {
+        case 'AND':
+          return ids.every(function (id) {
+            return crossTest(d, id);
+          });
+        case 'OR':
+          return ids.some(function (id) {
+            return crossTest(d, id);
+          });
+        default:
+          throw new Error('Unknown brush predicate ' + config.brushPredicate);
+      }
+    });
+  };
+
+  var removeStrum = function removeStrum(state, pc) {
+    var arc = state.arcs[state.arcs.active],
+      svg = pc.selection.select('svg').select('g#arcs');
+    delete state.arcs[state.arcs.active];
+    state.arcs.active = undefined;
+    svg.selectAll('line#arc-' + arc.dims.i).remove();
+    svg.selectAll('circle#arc-' + arc.dims.i).remove();
+    svg.selectAll('path#arc-' + arc.dims.i).remove();
+  };
+
+  var onDragEnd = function onDragEnd(brushGroup, state, config, pc, events) {
+    return function () {
+      var arc = state.arcs[state.arcs.active];
+
+      // Okay, somewhat unexpected, but not totally unsurprising, a mousclick is
+      // considered a drag without move. So we have to deal with that case
+      if (arc && arc.p1[0] === arc.p2[0] && arc.p1[1] === arc.p2[1]) {
+        removeStrum(state, pc);
+      }
+      if (arc) {
+        var angle = state.arcs.startAngle(state.arcs.active);
+        arc.startAngle = angle;
+        arc.endAngle = angle;
+        arc.arc.outerRadius(state.arcs.length(state.arcs.active)).startAngle(angle).endAngle(angle);
+      }
+      state.arcs.active = undefined;
+      config.brushed = selected$1(brushGroup, state, config);
+      pc.renderBrushed();
+      events.call('brushend', pc, config.brushed);
+    };
+  };
+
+  var _drawStrum = function drawStrum(brushGroup, state, config, pc, events, arc, activePoint) {
+    var svg = pc.selection.select('svg').select('g#arcs'),
+      id = arc.dims.i,
+      points = [arc.p2, arc.p3],
+      _line = svg.selectAll('line#arc-' + id).data([{
+        p1: arc.p1,
+        p2: arc.p2
+      }, {
+        p1: arc.p1,
+        p2: arc.p3
+      }]),
+      circles = svg.selectAll('circle#arc-' + id).data(points),
+      _drag = d3Drag.drag(),
+      _path = svg.selectAll('path#arc-' + id).data([arc]);
+    _path.enter().append('path').attr('id', 'arc-' + id).attr('class', 'arc').style('fill', 'orange').style('opacity', 0.5);
+    _path.attr('d', arc.arc).attr('transform', 'translate(' + arc.p1[0] + ',' + arc.p1[1] + ')');
+    _line.enter().append('line').attr('id', 'arc-' + id).attr('class', 'arc');
+    _line.attr('x1', function (d) {
+      return d.p1[0];
+    }).attr('y1', function (d) {
+      return d.p1[1];
+    }).attr('x2', function (d) {
+      return d.p2[0];
+    }).attr('y2', function (d) {
+      return d.p2[1];
+    }).attr('stroke', 'black').attr('stroke-width', 2);
+    _drag.on('drag', function (event, d) {
+      var i = points.indexOf(d) + 2;
+      arc['p' + i][0] = Math.min(Math.max(arc.minX + 1, event.x), arc.maxX);
+      arc['p' + i][1] = Math.min(Math.max(arc.minY, event.y), arc.maxY);
+      var angle = i === 3 ? state.arcs.startAngle(id) : state.arcs.endAngle(id);
+      if (arc.startAngle < Math.PI && arc.endAngle < Math.PI && angle < Math.PI || arc.startAngle >= Math.PI && arc.endAngle >= Math.PI && angle >= Math.PI) {
+        if (i === 2) {
+          arc.endAngle = angle;
+          arc.arc.endAngle(angle);
+        } else if (i === 3) {
+          arc.startAngle = angle;
+          arc.arc.startAngle(angle);
+        }
+      }
+      _drawStrum(brushGroup, state, config, pc, events, arc, i - 2);
+    }).on('end', onDragEnd(brushGroup, state, config, pc, events));
+    circles.enter().append('circle').attr('id', 'arc-' + id).attr('class', 'arc');
+    circles.attr('cx', function (d) {
+      return d[0];
+    }).attr('cy', function (d) {
+      return d[1];
+    }).attr('r', 5).style('opacity', function (d, i) {
+      return activePoint !== undefined && i === activePoint ? 0.8 : 0;
+    }).on('mouseover', function () {
+      d3Selection.select(this).style('opacity', 0.8);
+    }).on('mouseout', function () {
+      d3Selection.select(this).style('opacity', 0);
+    }).call(_drag);
+  };
+  var onDrag = function onDrag(brushGroup, state, config, pc, events) {
+    return function (event) {
+      var arc = state.arcs[state.arcs.active];
+
+      // Make sure that the point is within the bounds
+      arc.p2[0] = Math.min(Math.max(arc.minX + 1, event.x - config.margin.left), arc.maxX);
+      arc.p2[1] = Math.min(Math.max(arc.minY, event.y - config.margin.top), arc.maxY);
+      arc.p3 = arc.p2.slice();
+      _drawStrum(brushGroup, state, config, pc, events, arc, 1);
+    };
+  };
+
+  // First we need to determine between which two axes the arc was started.
+  // This will determine the freedom of movement, because a arc can
+  // logically only happen between two axes, so no movement outside these axes
+  // should be allowed.
+  var onDragStart = function onDragStart(state, config, pc, xscale) {
+    return function (event) {
+      var p = d3Selection.pointer(event, state.strumRect.node());
+      p[0] = p[0] - config.margin.left;
+      p[1] = p[1] - config.margin.top;
+      var dims = dimensionsForPoint(config, pc, xscale, p);
+      var arc = {
+        p1: p,
+        dims: dims,
+        minX: xscale(dims.left),
+        maxX: xscale(dims.right),
+        minY: 0,
+        maxY: h(config),
+        startAngle: undefined,
+        endAngle: undefined,
+        arc: d3Shape.arc().innerRadius(0)
+      };
+
+      // Make sure that the point is within the bounds
+      arc.p1[0] = Math.min(Math.max(arc.minX, p[0]), arc.maxX);
+      arc.p2 = arc.p1.slice();
+      arc.p3 = arc.p1.slice();
+      state.arcs[dims.i] = arc;
+      state.arcs.active = dims.i;
+    };
+  };
+
+  var brushReset$1 = function brushReset(brushGroup, state, config, pc, events) {
+    return function () {
+      var ids = Object.getOwnPropertyNames(state.arcs).filter(function (d) {
+        return !isNaN(d);
+      });
+      ids.forEach(function (d) {
+        state.arcs.active = d;
+        removeStrum(state, pc);
+      });
+      onDragEnd(brushGroup, state, config, pc, events)();
+    };
+  };
+
+  // returns angles in [-PI/2, PI/2]
+  var angle = function angle(p1, p2) {
+    var a = p1[0] - p2[0],
+      b = p1[1] - p2[1],
+      c = hypothenuse(a, b);
+    return Math.asin(b / c);
+  };
+  var endAngle = function endAngle(state) {
+    return function (id) {
+      var arc = state.arcs[id];
+      if (arc === undefined) {
+        return undefined;
+      }
+      var sAngle = angle(arc.p1, arc.p2),
+        uAngle = -sAngle + Math.PI / 2;
+      if (arc.p1[0] > arc.p2[0]) {
+        uAngle = 2 * Math.PI - uAngle;
+      }
+      return uAngle;
+    };
+  };
+  var startAngle = function startAngle(state) {
+    return function (id) {
+      var arc = state.arcs[id];
+      if (arc === undefined) {
+        return undefined;
+      }
+      var sAngle = angle(arc.p1, arc.p3),
+        uAngle = -sAngle + Math.PI / 2;
+      if (arc.p1[0] > arc.p3[0]) {
+        uAngle = 2 * Math.PI - uAngle;
+      }
+      return uAngle;
+    };
+  };
+  var length = function length(state) {
+    return function (id) {
+      var arc = state.arcs[id];
+      if (arc === undefined) {
+        return undefined;
+      }
+      var a = arc.p1[0] - arc.p2[0],
+        b = arc.p1[1] - arc.p2[1];
+      return hypothenuse(a, b);
+    };
+  };
+  var install = function install(brushGroup, state, config, pc, events, xscale) {
+    return function () {
+      if (!pc.g()) {
+        pc.createAxes();
+      }
+      var _drag = d3Drag.drag();
+
+      // Map of current arcs. arcs are stored per segment of the PC. A segment,
+      // being the area between two axes. The left most area is indexed at 0.
+      state.arcs.active = undefined;
+      // Returns the width of the PC segment where currently a arc is being
+      // placed. NOTE: even though they are evenly spaced in our current
+      // implementation, we keep for when non-even spaced segments are supported as
+      // well.
+      state.arcs.width = function (id) {
+        var arc = state.arcs[id];
+        return arc === undefined ? undefined : arc.maxX - arc.minX;
+      };
+
+      // returns angles in [0, 2 * PI]
+      state.arcs.endAngle = endAngle(state);
+      state.arcs.startAngle = startAngle(state);
+      state.arcs.length = length(state);
+      pc.on('axesreorder.arcs', function () {
+        var ids = Object.getOwnPropertyNames(arcs).filter(function (d) {
+          return !isNaN(d);
+        });
+        if (ids.length > 0) {
+          // We have some arcs, which might need to be removed.
+          ids.forEach(function (d) {
+            var dims = arcs[d].dims;
+            state.arcs.active = d;
+            // If the two dimensions of the current arc are not next to each other
+            // any more, than we'll need to remove the arc. Otherwise we keep it.
+            if (!consecutive(dims)(dims.left, dims.right)) {
+              removeStrum(state, pc);
+            }
+          });
+          onDragEnd(brushGroup, state, config, pc, events)();
+        }
+      });
+
+      // Add a new svg group in which we draw the arcs.
+      pc.selection.select('svg').append('g').attr('id', 'arcs').attr('transform', 'translate(' + config.margin.left + ',' + config.margin.top + ')');
+
+      // Install the required brushReset function
+      pc.brushReset = brushReset$1(brushGroup, state, config, pc, events);
+      _drag.on('start', onDragStart(state, config, pc, xscale)).on('drag', onDrag(brushGroup, state, config, pc, events)).on('end', onDragEnd(brushGroup, state, config, pc, events));
+
+      // NOTE: The styling needs to be done here and not in the css. This is because
+      //       for 1D brushing, the canvas layers should not listen to
+      //       pointer-events._.
+      state.strumRect = pc.selection.select('svg').insert('rect', 'g#arcs').attr('id', 'arc-events').attr('x', config.margin.left).attr('y', config.margin.top).attr('width', w(config)).attr('height', h(config) + 2).style('opacity', 0).call(_drag);
+    };
+  };
+
+  var installAngularBrush = function installAngularBrush(brushGroup, config, pc, events, xscale) {
+    var state = {
+      arcs: {},
+      strumRect: {}
+    };
+    brushGroup.modes['angular'] = {
+      install: install(brushGroup, state, config, pc, events, xscale),
+      uninstall: uninstall(state, pc),
+      selected: selected$1(brushGroup, state, config),
+      brushState: function brushState() {
+        return state.arcs;
+      }
+    };
+  };
+
+  // calculate 2d intersection of line a->b with line c->d
+  // points are objects with x and y properties
+  var intersection = function intersection(a, b, c, d) {
+    return {
+      x: ((a.x * b.y - a.y * b.x) * (c.x - d.x) - (a.x - b.x) * (c.x * d.y - c.y * d.x)) / ((a.x - b.x) * (c.y - d.y) - (a.y - b.y) * (c.x - d.x)),
+      y: ((a.x * b.y - a.y * b.x) * (c.y - d.y) - (a.y - b.y) * (c.x * d.y - c.y * d.x)) / ((a.x - b.x) * (c.y - d.y) - (a.y - b.y) * (c.x - d.x))
+    };
+  };
+
+  // Merges the canvases and SVG elements into one canvas element which is then passed into the callback
+  // (so you can choose to save it to disk, etc.)
+  var mergeParcoords = function mergeParcoords(pc) {
+    return function (callback) {
+      // Retina display, etc.
+      var devicePixelRatio = window.devicePixelRatio || 1;
+
+      // Create a canvas element to store the merged canvases
+      var mergedCanvas = document.createElement('canvas');
+      var foregroundCanvas = pc.canvas.foreground;
+      // We will need to adjust for canvas margins to align the svg and canvas
+      var canvasMarginLeft = Number(foregroundCanvas.style.marginLeft.replace('px', ''));
+      var textTopAdjust = 15;
+      var canvasMarginTop = Number(foregroundCanvas.style.marginTop.replace('px', '')) + textTopAdjust;
+      var width = (foregroundCanvas.clientWidth + canvasMarginLeft) * devicePixelRatio;
+      var height = (foregroundCanvas.clientHeight + canvasMarginTop) * devicePixelRatio;
+      mergedCanvas.width = width + 50; // pad so that svg labels at right will not get cut off
+      mergedCanvas.height = height + 30; // pad so that svg labels at bottom will not get cut off
+      mergedCanvas.style.width = mergedCanvas.width / devicePixelRatio + 'px';
+      mergedCanvas.style.height = mergedCanvas.height / devicePixelRatio + 'px';
+
+      // Give the canvas a white background
+      var context = mergedCanvas.getContext('2d');
+      context.fillStyle = '#ffffff';
+      context.fillRect(0, 0, mergedCanvas.width, mergedCanvas.height);
+
+      // Merge all the canvases
+      for (var key in pc.canvas) {
+        context.drawImage(pc.canvas[key], canvasMarginLeft * devicePixelRatio, canvasMarginTop * devicePixelRatio, width - canvasMarginLeft * devicePixelRatio, height - canvasMarginTop * devicePixelRatio);
+      }
+      var serializer = new XMLSerializer();
+      // axis labels are translated (0,-5) so we will clone the svg
+      //   and translate down so the labels are drawn on the canvas
+      var svgNodeCopy = pc.selection.select('svg').node().cloneNode(true);
+      svgNodeCopy.setAttribute('transform', 'translate(0,' + textTopAdjust + ')');
+      svgNodeCopy.setAttribute('height', svgNodeCopy.getAttribute('height') + textTopAdjust);
+      // text will need fill attribute since css styles will not get picked up
+      //   this is not sophisticated since it doesn't look up css styles
+      //   if the user changes
+      d3Selection.select(svgNodeCopy).selectAll('text').attr('fill', 'black');
+      var svgStr = serializer.serializeToString(svgNodeCopy);
+
+      // Create a Data URI.
+      var src = 'data:image/svg+xml;base64,' + window.btoa(svgStr);
+      var img = new Image();
+      img.onload = function () {
+        context.drawImage(img, 0, 0, img.width * devicePixelRatio, img.height * devicePixelRatio);
+        if (typeof callback === 'function') {
+          callback(mergedCanvas);
+        }
+      };
+      img.src = src;
+    };
+  };
+
+  var selected = function selected(config, pc) {
+    return function () {
+      var actives = [];
+      var extents = [];
+      var ranges = {};
+      //get brush selections from each node, convert to actual values
+      //invert order of values in array to comply with the parcoords architecture
+      if (config.brushes.length === 0) {
+        var nodes = pc.g().selectAll('.brush').nodes();
+        for (var k = 0; k < nodes.length; k++) {
+          if (d3Brush.brushSelection(nodes[k]) !== null) {
+            actives.push(nodes[k].__data__);
+            var values = [];
+            var ranger = d3Brush.brushSelection(nodes[k]);
+            if (typeof config.dimensions[nodes[k].__data__].yscale.domain()[0] === 'number') {
+              for (var i = 0; i < ranger.length; i++) {
+                if (actives.includes(nodes[k].__data__) && config.flipAxes.includes(nodes[k].__data__)) {
+                  values.push(config.dimensions[nodes[k].__data__].yscale.invert(ranger[i]));
+                } else if (config.dimensions[nodes[k].__data__].yscale() !== 1) {
+                  values.unshift(config.dimensions[nodes[k].__data__].yscale.invert(ranger[i]));
+                }
+              }
+              extents.push(values);
+              for (var ii = 0; ii < extents.length; ii++) {
+                if (extents[ii].length === 0) {
+                  extents[ii] = [1, 1];
+                }
+              }
+            } else {
+              ranges[nodes[k].__data__] = d3Brush.brushSelection(nodes[k]);
+              var dimRange = config.dimensions[nodes[k].__data__].yscale.range();
+              config.dimensions[nodes[k].__data__].yscale.domain();
+              for (var j = 0; j < dimRange.length; j++) {
+                if (dimRange[j] >= ranger[0] && dimRange[j] <= ranger[1] && actives.includes(nodes[k].__data__) && config.flipAxes.includes(nodes[k].__data__)) {
+                  values.push(dimRange[j]);
+                } else if (dimRange[j] >= ranger[0] && dimRange[j] <= ranger[1]) {
+                  values.unshift(dimRange[j]);
+                }
+              }
+              extents.push(values);
+              for (var _ii = 0; _ii < extents.length; _ii++) {
+                if (extents[_ii].length === 0) {
+                  extents[_ii] = [1, 1];
+                }
+              }
+            }
+          }
+        }
+        // test if within range
+        var within = {
+          date: function date(d, p, dimension) {
+            var category = d[p];
+            var categoryIndex = config.dimensions[p].yscale.domain().indexOf(category);
+            var categoryRangeValue = config.dimensions[p].yscale.range()[categoryIndex];
+            return categoryRangeValue >= ranges[p][0] && categoryRangeValue <= ranges[p][1];
+          },
+          number: function number(d, p, dimension) {
+            return extents[dimension][0] <= d[p] && d[p] <= extents[dimension][1];
+          },
+          string: function string(d, p, dimension) {
+            var category = d[p];
+            var categoryIndex = config.dimensions[p].yscale.domain().indexOf(category);
+            var categoryRangeValue = config.dimensions[p].yscale.range()[categoryIndex];
+            return categoryRangeValue >= ranges[p][0] && categoryRangeValue <= ranges[p][1];
+          }
+        };
+        return config.data.filter(function (d) {
+          return actives.every(function (p, dimension) {
+            return within[config.dimensions[p].type](d, p, dimension);
+          });
+        });
+      } else {
+        // need to get data from each brush instead of each axis
+        // first must find active axes by iterating through all brushes
+        // then go through similiar process as above.
+        var multiBrushData = [];
+        var _loop = function _loop(idx) {
+          var brush = config.brushes[idx];
+          var values = [];
+          var ranger = brush.extent;
+          var actives = [brush.data];
+          if (typeof config.dimensions[brush.data].yscale.domain()[0] === 'number') {
+            for (var _i = 0; _i < ranger.length; _i++) {
+              if (actives.includes(brush.data) && config.flipAxes.includes(brush.data)) {
+                values.push(config.dimensions[brush.data].yscale.invert(ranger[_i]));
+              } else if (config.dimensions[brush.data].yscale() !== 1) {
+                values.unshift(config.dimensions[brush.data].yscale.invert(ranger[_i]));
+              }
+            }
+            extents.push(values);
+            for (var _ii2 = 0; _ii2 < extents.length; _ii2++) {
+              if (extents[_ii2].length === 0) {
+                extents[_ii2] = [1, 1];
+              }
+            }
+          } else {
+            ranges[brush.data] = brush.extent;
+            var _dimRange = config.dimensions[brush.data].yscale.range();
+            config.dimensions[brush.data].yscale.domain();
+            for (var _j = 0; _j < _dimRange.length; _j++) {
+              if (_dimRange[_j] >= ranger[0] && _dimRange[_j] <= ranger[1] && actives.includes(brush.data) && config.flipAxes.includes(brush.data)) {
+                values.push(_dimRange[_j]);
+              } else if (_dimRange[_j] >= ranger[0] && _dimRange[_j] <= ranger[1]) {
+                values.unshift(_dimRange[_j]);
+              }
+            }
+            extents.push(values);
+            for (var _ii3 = 0; _ii3 < extents.length; _ii3++) {
+              if (extents[_ii3].length === 0) {
+                extents[_ii3] = [1, 1];
+              }
+            }
+          }
+          var within = {
+            date: function date(d, p, dimension) {
+              var category = d[p];
+              var categoryIndex = config.dimensions[p].yscale.domain().indexOf(category);
+              var categoryRangeValue = config.dimensions[p].yscale.range()[categoryIndex];
+              return categoryRangeValue >= ranges[p][0] && categoryRangeValue <= ranges[p][1];
+            },
+            number: function number(d, p, dimension) {
+              return extents[idx][0] <= d[p] && d[p] <= extents[idx][1];
+            },
+            string: function string(d, p, dimension) {
+              var category = d[p];
+              var categoryIndex = config.dimensions[p].yscale.domain().indexOf(category);
+              var categoryRangeValue = config.dimensions[p].yscale.range()[categoryIndex];
+              return categoryRangeValue >= ranges[p][0] && categoryRangeValue <= ranges[p][1];
+            }
+          };
+
+          // filter data, but instead of returning it now,
+          // put it into multiBrush data which is returned after
+          // all brushes are iterated through.
+          var filtered = config.data.filter(function (d) {
+            return actives.every(function (p, dimension) {
+              return within[config.dimensions[p].type](d, p, dimension);
+            });
+          });
+          for (var z = 0; z < filtered.length; z++) {
+            multiBrushData.push(filtered[z]);
+          }
+          actives = [];
+          ranges = {};
+        };
+        for (var idx = 0; idx < config.brushes.length; idx++) {
+          _loop(idx);
+        }
+        return multiBrushData;
+      }
+    };
+  };
+
+  var brushPredicate = function brushPredicate(brushGroup, config, pc) {
+    return function () {
+      var predicate = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+      if (predicate === null) {
+        return brushGroup.predicate;
+      }
+      predicate = String(predicate).toUpperCase();
+      if (predicate !== 'AND' && predicate !== 'OR') {
+        throw new Error('Invalid predicate ' + predicate);
+      }
+      brushGroup.predicate = predicate;
+      config.brushed = brushGroup.currentMode().selected();
+      pc.renderBrushed();
+      return pc;
+    };
+  };
+  var brushMode = function brushMode(brushGroup, config, pc) {
+    return function () {
+      var mode = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+      if (mode === null) {
+        return brushGroup.mode;
+      }
+      if (pc.brushModes().indexOf(mode) === -1) {
+        throw new Error('pc.brushmode: Unsupported brush mode: ' + mode);
+      }
+
+      // Make sure that we don't trigger unnecessary events by checking if the mode
+      // actually changes.
+      if (mode !== brushGroup.mode) {
+        // When changing brush modes, the first thing we need to do is clearing any
+        // brushes from the current mode, if any.
+        if (brushGroup.mode !== 'None') {
+          pc.brushReset();
+        }
+
+        // Next, we need to 'uninstall' the current brushMode.
+        brushGroup.modes[brushGroup.mode].uninstall(pc);
+        // Finally, we can install the requested one.
+        brushGroup.mode = mode;
+        brushGroup.modes[brushGroup.mode].install();
+        if (mode === 'None') {
+          delete pc.brushPredicate;
+        } else {
+          pc.brushPredicate = brushPredicate(brushGroup, config, pc);
+        }
+      }
+      return pc;
+    };
+  };
+
+  /**
+   * dimension display names
+   *
+   * @param config
+   * @param d
+   * @returns {*}
+   */
+  var dimensionLabels = function dimensionLabels(config) {
+    return function (d) {
+      return config.dimensions[d].title ? config.dimensions[d].title : d;
+    };
+  };
+
+  var flipAxisAndUpdatePCP = function flipAxisAndUpdatePCP(config, pc, axis) {
+    return function (dimension) {
+      pc.flip(dimension);
+      pc.brushReset(dimension);
+
+      // select(this.parentElement)
+      pc.selection.select('svg').selectAll('g.axis').filter(function (d) {
+        return d === dimension;
+      }).transition().duration(config.animationTime).call(axis.scale(config.dimensions[dimension].yscale));
+      pc.render();
+    };
+  };
+
+  var rotateLabels = function rotateLabels(config, pc) {
+    return function (event) {
+      if (!config.rotateLabels) return;
+      var delta = event.deltaY;
+      delta = delta < 0 ? -5 : delta;
+      delta = delta > 0 ? 5 : delta;
+      config.dimensionTitleRotation += delta;
+      pc.svg.selectAll('text.label').attr('transform', 'translate(0,-5) rotate(' + config.dimensionTitleRotation + ')');
+      event.preventDefault();
+    };
+  };
+
+  var _this$3 = undefined;
+  var updateAxes = function updateAxes(config, pc, position, axis, flags) {
+    return function () {
+      var animationTime = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+      if (animationTime === null) {
+        animationTime = config.animationTime;
+      }
+      var g_data = pc.svg.selectAll('.dimension').data(pc.getOrderedDimensionKeys());
+      // Enter
+      g_data.enter().append('svg:g').attr('class', 'dimension').attr('transform', function (p) {
+        return 'translate(' + position(p) + ')';
+      }).style('opacity', 0).append('svg:g').attr('class', 'axis').attr('transform', 'translate(0,0)').each(function (d) {
+        var axisElement = d3Selection.select(this).call(pc.applyAxisConfig(axis, config.dimensions[d]));
+        axisElement.selectAll('path').style('fill', 'none').style('stroke', '#222').style('shape-rendering', 'crispEdges');
+        axisElement.selectAll('line').style('fill', 'none').style('stroke', '#222').style('shape-rendering', 'crispEdges');
+      }).append('svg:text').attr('text-anchor', 'middle').attr('class', 'label').attr('x', 0).attr('y', 0).attr('transform', 'translate(0,-5) rotate(' + config.dimensionTitleRotation + ')').text(dimensionLabels(config)).on('dblclick', flipAxisAndUpdatePCP(config, pc, axis)).on('wheel', rotateLabels(config, pc));
+
+      // Update
+      g_data.attr('opacity', 0);
+      g_data.select('.axis').transition().duration(animationTime).each(function (d) {
+        d3Selection.select(this).call(pc.applyAxisConfig(axis, config.dimensions[d]));
+      });
+      g_data.select('.label').transition().duration(animationTime).text(dimensionLabels(config)).attr('transform', 'translate(0,-5) rotate(' + config.dimensionTitleRotation + ')');
+
+      // Exit
+      g_data.exit().remove();
+      var g = pc.svg.selectAll('.dimension');
+      g.transition().duration(animationTime).attr('transform', function (p) {
+        return 'translate(' + position(p) + ')';
+      }).style('opacity', 1);
+      pc.svg.selectAll('.axis').transition().duration(animationTime).each(function (d) {
+        d3Selection.select(this).call(pc.applyAxisConfig(axis, config.dimensions[d]));
+      });
+      if (flags.brushable) pc.brushable();
+      if (flags.reorderable) pc.reorderable();
+      if (pc.brushMode() !== 'None') {
+        var mode = pc.brushMode();
+        pc.brushMode('None');
+        pc.brushMode(mode);
+      }
+      return _this$3;
+    };
+  };
+
+  /** adjusts an axis' default range [h()+1, 1] if a NullValueSeparator is set */
+  var getRange = function getRange(config) {
+    var h = config.height - config.margin.top - config.margin.bottom;
+    if (config.nullValueSeparator == 'bottom') {
+      return [h + 1 - config.nullValueSeparatorPadding.bottom - config.nullValueSeparatorPadding.top, 1];
+    } else if (config.nullValueSeparator == 'top') {
+      return [h + 1, 1 + config.nullValueSeparatorPadding.bottom + config.nullValueSeparatorPadding.top];
+    }
+    return [h + 1, 1];
+  };
+
+  var autoscale = function autoscale(config, pc, xscale, ctx) {
+    return function () {
+      // yscale
+      var defaultScales = {
+        date: function date(k) {
+          var _extent = d3Array.extent(config.data, function (d) {
+            return d[k] ? d[k].getTime() : null;
+          });
+          // special case if single value
+          if (_extent[0] === _extent[1]) {
+            return d3Scale.scalePoint().domain(_extent).range(getRange(config));
+          }
+          if (config.flipAxes.includes(k)) {
+            _extent = _extent.map(function (val) {
+              return tempDate.unshift(val);
+            });
+          }
+          return d3Scale.scaleTime().domain(_extent).range(getRange(config));
+        },
+        number: function number(k) {
+          var _extent = d3Array.extent(config.data, function (d) {
+            return +d[k];
+          });
+          // special case if single value
+          if (_extent[0] === _extent[1]) {
+            return d3Scale.scalePoint().domain(_extent).range(getRange(config));
+          }
+          if (config.flipAxes.includes(k)) {
+            _extent = _extent.map(function (val) {
+              return tempDate.unshift(val);
+            });
+          }
+          return d3Scale.scaleLinear().domain(_extent).range(getRange(config));
+        },
+        string: function string(k) {
+          var counts = {},
+            domain = [];
+          // Let's get the count for each value so that we can sort the domain based
+          // on the number of items for each value.
+          config.data.map(function (p) {
+            if (p[k] === undefined && config.nullValueSeparator !== 'undefined') {
+              return null; // null values will be drawn beyond the horizontal null value separator!
+            }
+            if (counts[p[k]] === undefined) {
+              counts[p[k]] = 1;
+            } else {
+              counts[p[k]] = counts[p[k]] + 1;
+            }
+          });
+          if (config.flipAxes.includes(k)) {
+            domain = Object.getOwnPropertyNames(counts).sort();
+          } else {
+            var tempArr = Object.getOwnPropertyNames(counts).sort();
+            for (var i = 0; i < Object.getOwnPropertyNames(counts).length; i++) {
+              domain.push(tempArr.pop());
+            }
+          }
+
+          //need to create an ordinal scale for categorical data
+          var categoricalRange = [];
+          if (domain.length === 1) {
+            //edge case
+            domain = [' ', domain[0], ' '];
+          }
+          var addBy = getRange(config)[0] / (domain.length - 1);
+          for (var j = 0; j < domain.length; j++) {
+            if (categoricalRange.length === 0) {
+              categoricalRange.push(0);
+              continue;
+            }
+            categoricalRange.push(categoricalRange[j - 1] + addBy);
+          }
+          return d3Scale.scaleOrdinal().domain(domain).range(categoricalRange);
+        }
+      };
+      Object.keys(config.dimensions).forEach(function (k) {
+        if (config.dimensions[k].yscale === undefined || config.dimensions[k].yscale === null) {
+          config.dimensions[k].yscale = defaultScales[config.dimensions[k].type](k);
+        }
+      });
+
+      // xscale
+      // add padding for d3 >= v4 default 0.2
+      xscale.range([0, w(config)]).padding(0.2);
+
+      // Retina display, etc.
+      var devicePixelRatio = window.devicePixelRatio || 1;
+
+      // canvas sizes
+      pc.selection.selectAll('canvas').style('margin-top', config.margin.top + 'px').style('margin-left', config.margin.left + 'px').style('width', w(config) + 2 + 'px').style('height', h(config) + 2 + 'px').attr('width', (w(config) + 2) * devicePixelRatio).attr('height', (h(config) + 2) * devicePixelRatio);
+      // default styles, needs to be set when canvas width changes
+      ctx.foreground.strokeStyle = config.color;
+      ctx.foreground.lineWidth = config.lineWidth;
+      ctx.foreground.globalCompositeOperation = config.composite;
+      ctx.foreground.globalAlpha = config.alpha;
+      ctx.foreground.scale(devicePixelRatio, devicePixelRatio);
+      ctx.brushed.strokeStyle = config.brushedColor;
+      ctx.brushed.lineWidth = config.lineWidth;
+      ctx.brushed.globalCompositeOperation = config.composite;
+      ctx.brushed.globalAlpha = config.alpha;
+      ctx.brushed.scale(devicePixelRatio, devicePixelRatio);
+      ctx.highlight.lineWidth = config.highlightedLineWidth;
+      ctx.highlight.scale(devicePixelRatio, devicePixelRatio);
+      ctx.marked.lineWidth = config.markedLineWidth;
+      ctx.marked.shadowColor = config.markedShadowColor;
+      ctx.marked.shadowBlur = config.markedShadowBlur;
+      ctx.marked.scale(devicePixelRatio, devicePixelRatio);
+      return this;
+    };
+  };
+
+  var brushable = function brushable(config, pc, flags) {
+    return function () {
+      if (!pc.g()) {
+        pc.createAxes();
+      }
+      var g = pc.g();
+
+      // Add and store a brush for each axis.
+      g.append('svg:g').attr('class', 'brush').each(function (d) {
+        if (config.dimensions[d] !== undefined) {
+          config.dimensions[d]['brush'] = d3Brush.brushY(d3Selection.select(this)).extent([[-15, 0], [15, config.dimensions[d].yscale.range()[0]]]);
+          d3Selection.select(this).call(config.dimensions[d]['brush'].on('start', function (event) {
+            if (event.sourceEvent !== null && !event.sourceEvent.ctrlKey) {
+              pc.brushReset();
+            }
+          }).on('brush', function (event) {
+            if (!event.sourceEvent.ctrlKey) {
+              pc.brush();
+            }
+          }).on('end', function (event) {
+            // save brush selection is ctrl key is held
+            // store important brush information and
+            // the html element of the selection,
+            // to make a dummy selection element
+            if (event.sourceEvent.ctrlKey) {
+              var html = d3Selection.select(this).select('.selection').nodes()[0].outerHTML;
+              html = html.replace('class="selection"', 'class="selection dummy' + ' selection-' + config.brushes.length + '"');
+              var dat = d3Selection.select(this).nodes()[0].__data__;
+              var brush = {
+                id: config.brushes.length,
+                extent: d3Brush.brushSelection(this),
+                html: html,
+                data: dat
+              };
+              config.brushes.push(brush);
+              d3Selection.select(d3Selection.select(this).nodes()[0].parentNode).select('.axis').nodes()[0].outerHTML += html;
+              pc.brush();
+              config.dimensions[d].brush.move(d3Selection.select(this, null));
+              d3Selection.select(this).select('.selection').attr('style', 'display:none');
+              pc.brushable();
+            } else {
+              pc.brush();
+            }
+          }));
+          d3Selection.select(this).on('dblclick', function () {
+            pc.brushReset(d);
+          });
+        }
+      });
+      flags.brushable = true;
+      return this;
+    };
+  };
+
+  var commonScale = function commonScale(config, pc) {
+    return function (global, type) {
+      var t = type || 'number';
+      if (typeof global === 'undefined') {
+        global = true;
+      }
+
+      // try to autodetect dimensions and create scales
+      if (!Object.keys(config.dimensions).length) {
+        pc.detectDimensions();
+      }
+      pc.autoscale();
+
+      // scales of the same type
+      var scales = Object.keys(config.dimensions).filter(function (p) {
+        return config.dimensions[p].type == t;
+      });
+      if (global) {
+        var _extent = d3Array.extent(scales.map(function (d) {
+          return config.dimensions[d].yscale.domain();
+        }).reduce(function (cur, acc) {
+          return cur.concat(acc);
+        }));
+        scales.forEach(function (d) {
+          config.dimensions[d].yscale.domain(_extent);
+        });
+      } else {
+        scales.forEach(function (d) {
+          config.dimensions[d].yscale.domain(d3Array.extent(config.data, function (d) {
+            return +d[k];
+          }));
+        });
+      }
+
+      // update centroids
+      if (config.bundleDimension !== null) {
+        pc.bundleDimension(config.bundleDimension);
+      }
+      return this;
+    };
+  };
+
+  var computeRealCentroids = function computeRealCentroids(config, position) {
+    return function (row) {
+      return Object.keys(config.dimensions).map(function (d) {
+        var x = position(d);
+        var y = config.dimensions[d].yscale(row[d]);
+        return [x, y];
+      });
+    };
+  };
+
+  var isValid = function isValid(d) {
+    return d !== null && d !== undefined;
+  };
+  var applyDimensionDefaults = function applyDimensionDefaults(config, pc) {
+    return function (dims) {
+      var types = pc.detectDimensionTypes(config.data);
+      dims = dims ? dims : Object.keys(types);
+      return dims.reduce(function (acc, cur, i) {
+        var k = config.dimensions[cur] ? config.dimensions[cur] : {};
+        acc[cur] = _objectSpread2(_objectSpread2({}, k), {}, {
+          orient: isValid(k.orient) ? k.orient : 'left',
+          ticks: isValid(k.ticks) ? k.ticks : 5,
+          innerTickSize: isValid(k.innerTickSize) ? k.innerTickSize : 6,
+          outerTickSize: isValid(k.outerTickSize) ? k.outerTickSize : 0,
+          tickPadding: isValid(k.tickPadding) ? k.tickPadding : 3,
+          type: isValid(k.type) ? k.type : types[cur],
+          index: isValid(k.index) ? k.index : i
+        });
+        return acc;
+      }, {});
+    };
+  };
+
+  /**
+   * Create static SVG axes with dimension names, ticks, and labels.
+   *
+   * @param config
+   * @param pc
+   * @param xscale
+   * @param flags
+   * @param axis
+   * @returns {Function}
+   */
+  var createAxes = function createAxes(config, pc, xscale, flags, axis) {
+    return function () {
+      if (pc.g() !== undefined) {
+        pc.removeAxes();
+      }
+      // Add a group element for each dimension.
+      pc._g = pc.svg.selectAll('.dimension').data(pc.getOrderedDimensionKeys(), function (d) {
+        return d;
+      }).enter().append('svg:g').attr('class', 'dimension').attr('transform', function (d) {
+        return 'translate(' + xscale(d) + ')';
+      });
+      // Add an axis and title.
+      pc._g.append('svg:g').attr('class', 'axis').attr('transform', 'translate(0,0)').each(function (d) {
+        var axisElement = d3Selection.select(this).call(pc.applyAxisConfig(axis, config.dimensions[d]));
+        axisElement.selectAll('path').style('fill', 'none').style('stroke', '#222').style('shape-rendering', 'crispEdges');
+        axisElement.selectAll('line').style('fill', 'none').style('stroke', '#222').style('shape-rendering', 'crispEdges');
+      }).append('svg:text').attr('text-anchor', 'middle').attr('y', 0).attr('transform', 'translate(0,-5) rotate(' + config.dimensionTitleRotation + ')').attr('x', 0).attr('class', 'label').text(dimensionLabels(config)).on('dblclick', flipAxisAndUpdatePCP(config, pc, axis)).on('wheel', rotateLabels(config, pc));
+      if (config.nullValueSeparator === 'top') {
+        pc.svg.append('line').attr('x1', 0).attr('y1', 1 + config.nullValueSeparatorPadding.top).attr('x2', w(config)).attr('y2', 1 + config.nullValueSeparatorPadding.top).attr('stroke-width', 1).attr('stroke', '#777').attr('fill', 'none').attr('shape-rendering', 'crispEdges');
+      } else if (config.nullValueSeparator === 'bottom') {
+        pc.svg.append('line').attr('x1', 0).attr('y1', h(config) + 1 - config.nullValueSeparatorPadding.bottom).attr('x2', w(config)).attr('y2', h(config) + 1 - config.nullValueSeparatorPadding.bottom).attr('stroke-width', 1).attr('stroke', '#777').attr('fill', 'none').attr('shape-rendering', 'crispEdges');
+      }
+      flags.axes = true;
+      return this;
+    };
+  };
+
+  var _this$2 = undefined;
+
+  //draw dots with radius r on the axis line where data intersects
+  var axisDots = function axisDots(config, pc, position) {
+    return function (_r) {
+      var r = _r || 0.1;
+      var ctx = pc.ctx.dots;
+      var startAngle = 0;
+      var endAngle = 2 * Math.PI;
+      ctx.globalAlpha = d3Array.min([1 / Math.pow(config.data.length, 1 / 2), 1]);
+      config.data.forEach(function (d) {
+        Object.entries(config.dimensions).forEach(function (_ref, i) {
+          var _ref2 = _slicedToArray(_ref, 1),
+            key = _ref2[0];
+          ctx.beginPath();
+          ctx.arc(position(key), config.dimensions[key].yscale(d[key]), r, startAngle, endAngle);
+          ctx.stroke();
+          ctx.fill();
+        });
+      });
+      return _this$2;
+    };
+  };
+
+  var applyAxisConfig = function applyAxisConfig(axis, dimension) {
+    var axisCfg;
+    switch (dimension.orient) {
+      case 'left':
+        axisCfg = d3Axis.axisLeft(dimension.yscale);
+        break;
+      case 'right':
+        axisCfg = d3Axis.axisRight(dimension.yscale);
+        break;
+      case 'top':
+        axisCfg = d3Axis.axisTop(dimension.yscale);
+        break;
+      case 'bottom':
+        axisCfg = d3Axis.axisBottom(dimension.yscale);
+        break;
+      default:
+        axisCfg = d3Axis.axisLeft(dimension.yscale);
+        break;
+    }
+    axisCfg.ticks(dimension.ticks).tickValues(dimension.tickValues).tickSizeInner(dimension.innerTickSize).tickSizeOuter(dimension.outerTickSize).tickPadding(dimension.tickPadding).tickFormat(dimension.tickFormat);
+    return axisCfg;
+  };
+
+  // Jason Davies, http://bl.ocks.org/1341281
+  var reorderable = function reorderable(config, pc, xscale, position, dragging, flags) {
+    return function () {
+      if (pc.g() === undefined) pc.createAxes();
+      var g = pc.g();
+      g.style('cursor', 'move').call(d3Drag.drag().on('start', function (event, d) {
+        dragging[d] = this.__origin__ = xscale(d);
+      }).on('drag', function (event, d) {
+        dragging[d] = Math.min(w(config), Math.max(0, this.__origin__ += event.dx));
+        pc.sortDimensions();
+        xscale.domain(pc.getOrderedDimensionKeys());
+        pc.render();
+        g.attr('transform', function (d) {
+          return 'translate(' + position(d) + ')';
+        });
+      }).on('end', function (event, d) {
+        delete this.__origin__;
+        delete dragging[d];
+        d3Selection.select(this).transition().attr('transform', 'translate(' + xscale(d) + ')');
+        pc.render();
+        pc.renderMarked();
+      }));
+      flags.reorderable = true;
+      return this;
+    };
+  };
+
+  // rescale for height, width and margins
+  // TODO currently assumes chart is brushable, and destroys old brushes
+  var resize = function resize(config, pc, flags, events) {
+    return function () {
+      // selection size
+      pc.selection.select('svg').attr('width', config.width).attr('height', config.height);
+      pc.svg.attr('transform', 'translate(' + config.margin.left + ',' + config.margin.top + ')');
+
+      // FIXME: the current brush state should pass through
+      if (flags.brushable) pc.brushReset();
+
+      // scales
+      pc.autoscale();
+
+      // axes, destroys old brushes.
+      if (pc.g()) pc.createAxes();
+      if (flags.brushable) pc.brushable();
+      if (flags.reorderable) pc.reorderable();
+      events.call('resize', this, {
+        width: config.width,
+        height: config.height,
+        margin: config.margin
+      });
+      return this;
+    };
+  };
+
+  // Reorder dimensions, such that the highest value (visually) is on the left and
+  // the lowest on the right. Visual values are determined by the data values in
+  // the given row.
+  var reorder = function reorder(config, pc, xscale) {
+    return function (rowdata) {
+      var firstDim = pc.getOrderedDimensionKeys()[0];
+      pc.sortDimensionsByRowData(rowdata);
+      // NOTE: this is relatively cheap given that:
+      // number of dimensions < number of data items
+      // Thus we check equality of order to prevent rerendering when this is the case.
+      var reordered = firstDim !== pc.getOrderedDimensionKeys()[0];
+      if (reordered) {
+        xscale.domain(pc.getOrderedDimensionKeys());
+        var highlighted = config.highlighted.slice(0);
+        pc.unhighlight();
+        var marked = config.marked.slice(0);
+        pc.unmark();
+        var g = pc.g();
+        g.transition().duration(1500).attr('transform', function (d) {
+          return 'translate(' + xscale(d) + ')';
+        });
+        pc.render();
+
+        // pc.highlight() does not check whether highlighted is length zero, so we do that here.
+        if (highlighted.length !== 0) {
+          pc.highlight(highlighted);
+        }
+        if (marked.length !== 0) {
+          pc.mark(marked);
+        }
+      }
+    };
+  };
+
+  var sortDimensions = function sortDimensions(config, position) {
+    return function () {
+      var copy = Object.assign({}, config.dimensions);
+      var positionSortedKeys = Object.keys(config.dimensions).sort(function (a, b) {
+        return position(a) - position(b) === 0 ? 1 : position(a) - position(b);
+      });
+      config.dimensions = {};
+      positionSortedKeys.forEach(function (p, i) {
+        config.dimensions[p] = copy[p];
+        config.dimensions[p].index = i;
+      });
+    };
+  };
+
+  var sortDimensionsByRowData = function sortDimensionsByRowData(config) {
+    return function (rowdata) {
+      var copy = Object.assign({}, config.dimensions);
+      var positionSortedKeys = Object.keys(config.dimensions).sort(function (a, b) {
+        var pixelDifference = config.dimensions[a].yscale(rowdata[a]) - config.dimensions[b].yscale(rowdata[b]);
+
+        // Array.sort is not necessarily stable, this means that if pixelDifference is zero
+        // the ordering of dimensions might change unexpectedly. This is solved by sorting on
+        // variable name in that case.
+        return pixelDifference === 0 ? a.localeCompare(b) : pixelDifference;
+      });
+      config.dimensions = {};
+      positionSortedKeys.forEach(function (p, i) {
+        config.dimensions[p] = copy[p];
+        config.dimensions[p].index = i;
+      });
+    };
+  };
+
+  var isBrushed = function isBrushed(config, brushGroup) {
+    if (config.brushed && config.brushed.length !== config.data.length) return true;
+    var object = brushGroup.currentMode().brushState();
+    for (var key in object) {
+      if (object.hasOwnProperty(key)) {
+        return true;
+      }
+    }
+    return false;
+  };
+
+  var clear = function clear(config, pc, ctx, brushGroup) {
+    return function (layer) {
+      ctx[layer].clearRect(0, 0, w(config) + 2, h(config) + 2);
+
+      // This will make sure that the foreground items are transparent
+      // without the need for changing the opacity style of the foreground canvas
+      // as this would stop the css styling from working
+      if (layer === 'brushed' && isBrushed(config, brushGroup)) {
+        ctx.brushed.fillStyle = pc.selection.style('background-color');
+        ctx.brushed.globalAlpha = 1 - config.alphaOnBrushed;
+        ctx.brushed.fillRect(0, 0, w(config) + 2, h(config) + 2);
+        ctx.brushed.globalAlpha = config.alpha;
+      }
+      return this;
+    };
+  };
+
+  const PRECISION = 1e-6;
+
+  class Matrix {
+    constructor(elements) {
+      this.setElements(elements);
+    }
+    e(i, j) {
+      if (i < 1 || i > this.elements.length || j < 1 || j > this.elements[0].length) {
+        return null;
+      }
+      return this.elements[i - 1][j - 1];
+    }
+    row(i) {
+      if (i > this.elements.length) {
+        return null;
+      }
+      return new Vector(this.elements[i - 1]);
+    }
+    col(j) {
+      if (this.elements.length === 0) {
+        return null;
+      }
+      if (j > this.elements[0].length) {
+        return null;
+      }
+      var col = [],
+        n = this.elements.length;
+      for (var i = 0; i < n; i++) {
+        col.push(this.elements[i][j - 1]);
+      }
+      return new Vector(col);
+    }
+    dimensions() {
+      var cols = this.elements.length === 0 ? 0 : this.elements[0].length;
+      return {
+        rows: this.elements.length,
+        cols: cols
+      };
+    }
+    rows() {
+      return this.elements.length;
+    }
+    cols() {
+      if (this.elements.length === 0) {
+        return 0;
+      }
+      return this.elements[0].length;
+    }
+    eql(matrix) {
+      var M = matrix.elements || matrix;
+      if (!M[0] || typeof M[0][0] === 'undefined') {
+        M = new Matrix(M).elements;
+      }
+      if (this.elements.length === 0 || M.length === 0) {
+        return this.elements.length === M.length;
+      }
+      if (this.elements.length !== M.length) {
+        return false;
+      }
+      if (this.elements[0].length !== M[0].length) {
+        return false;
+      }
+      var i = this.elements.length,
+        nj = this.elements[0].length,
+        j;
+      while (i--) {
+        j = nj;
+        while (j--) {
+          if (Math.abs(this.elements[i][j] - M[i][j]) > PRECISION) {
+            return false;
+          }
+        }
+      }
+      return true;
+    }
+    dup() {
+      return new Matrix(this.elements);
+    }
+    map(fn, context) {
+      if (this.elements.length === 0) {
+        return new Matrix([]);
+      }
+      var els = [],
+        i = this.elements.length,
+        nj = this.elements[0].length,
+        j;
+      while (i--) {
+        j = nj;
+        els[i] = [];
+        while (j--) {
+          els[i][j] = fn.call(context, this.elements[i][j], i + 1, j + 1);
+        }
+      }
+      return new Matrix(els);
+    }
+    isSameSizeAs(matrix) {
+      var M = matrix.elements || matrix;
+      if (typeof M[0][0] === 'undefined') {
+        M = new Matrix(M).elements;
+      }
+      if (this.elements.length === 0) {
+        return M.length === 0;
+      }
+      return this.elements.length === M.length && this.elements[0].length === M[0].length;
+    }
+    add(matrix) {
+      if (this.elements.length === 0) {
+        return this.map(function (x) {
+          return x;
+        });
+      }
+      var M = matrix.elements || matrix;
+      if (typeof M[0][0] === 'undefined') {
+        M = new Matrix(M).elements;
+      }
+      if (!this.isSameSizeAs(M)) {
+        return null;
+      }
+      return this.map(function (x, i, j) {
+        return x + M[i - 1][j - 1];
+      });
+    }
+    subtract(matrix) {
+      if (this.elements.length === 0) {
+        return this.map(function (x) {
+          return x;
+        });
+      }
+      var M = matrix.elements || matrix;
+      if (typeof M[0][0] === 'undefined') {
+        M = new Matrix(M).elements;
+      }
+      if (!this.isSameSizeAs(M)) {
+        return null;
+      }
+      return this.map(function (x, i, j) {
+        return x - M[i - 1][j - 1];
+      });
+    }
+    canMultiplyFromLeft(matrix) {
+      if (this.elements.length === 0) {
+        return false;
+      }
+      var M = matrix.elements || matrix;
+      if (typeof M[0][0] === 'undefined') {
+        M = new Matrix(M).elements;
+      }
+      // this.columns should equal matrix.rows
+      return this.elements[0].length === M.length;
+    }
+    multiply(matrix) {
+      if (this.elements.length === 0) {
+        return null;
+      }
+      if (!matrix.elements) {
+        return this.map(function (x) {
+          return x * matrix;
+        });
+      }
+      var returnVector = matrix.modulus ? true : false;
+      var M = matrix.elements || matrix;
+      if (typeof M[0][0] === 'undefined') {
+        M = new Matrix(M).elements;
+      }
+      if (!this.canMultiplyFromLeft(M)) {
+        return null;
+      }
+      var i = this.elements.length,
+        nj = M[0].length,
+        j;
+      var cols = this.elements[0].length,
+        c,
+        elements = [],
+        sum;
+      while (i--) {
+        j = nj;
+        elements[i] = [];
+        while (j--) {
+          c = cols;
+          sum = 0;
+          while (c--) {
+            sum += this.elements[i][c] * M[c][j];
+          }
+          elements[i][j] = sum;
+        }
+      }
+      var M = new Matrix(elements);
+      return returnVector ? M.col(1) : M;
+    }
+    minor(a, b, c, d) {
+      if (this.elements.length === 0) {
+        return null;
+      }
+      var elements = [],
+        ni = c,
+        i,
+        nj,
+        j;
+      var rows = this.elements.length,
+        cols = this.elements[0].length;
+      while (ni--) {
+        i = c - ni - 1;
+        elements[i] = [];
+        nj = d;
+        while (nj--) {
+          j = d - nj - 1;
+          elements[i][j] = this.elements[(a + i - 1) % rows][(b + j - 1) % cols];
+        }
+      }
+      return new Matrix(elements);
+    }
+    transpose() {
+      if (this.elements.length === 0) {
+        return new Matrix([]);
+      }
+      var rows = this.elements.length,
+        i,
+        cols = this.elements[0].length,
+        j;
+      var elements = [],
+        i = cols;
+      while (i--) {
+        j = rows;
+        elements[i] = [];
+        while (j--) {
+          elements[i][j] = this.elements[j][i];
+        }
+      }
+      return new Matrix(elements);
+    }
+    isSquare() {
+      var cols = this.elements.length === 0 ? 0 : this.elements[0].length;
+      return this.elements.length === cols;
+    }
+    max() {
+      if (this.elements.length === 0) {
+        return null;
+      }
+      var m = 0,
+        i = this.elements.length,
+        nj = this.elements[0].length,
+        j;
+      while (i--) {
+        j = nj;
+        while (j--) {
+          if (Math.abs(this.elements[i][j]) > Math.abs(m)) {
+            m = this.elements[i][j];
+          }
+        }
+      }
+      return m;
+    }
+    indexOf(x) {
+      if (this.elements.length === 0) {
+        return null;
+      }
+      var ni = this.elements.length,
+        i,
+        nj = this.elements[0].length,
+        j;
+      for (i = 0; i < ni; i++) {
+        for (j = 0; j < nj; j++) {
+          if (this.elements[i][j] === x) {
+            return {
+              i: i + 1,
+              j: j + 1
+            };
+          }
+        }
+      }
+      return null;
+    }
+    diagonal() {
+      if (!this.isSquare) {
+        return null;
+      }
+      var els = [],
+        n = this.elements.length;
+      for (var i = 0; i < n; i++) {
+        els.push(this.elements[i][i]);
+      }
+      return new Vector(els);
+    }
+    toRightTriangular() {
+      if (this.elements.length === 0) {
+        return new Matrix([]);
+      }
+      var M = this.dup(),
+        els;
+      var n = this.elements.length,
+        i,
+        j,
+        np = this.elements[0].length,
+        p;
+      for (i = 0; i < n; i++) {
+        if (M.elements[i][i] === 0) {
+          for (j = i + 1; j < n; j++) {
+            if (M.elements[j][i] !== 0) {
+              els = [];
+              for (p = 0; p < np; p++) {
+                els.push(M.elements[i][p] + M.elements[j][p]);
+              }
+              M.elements[i] = els;
+              break;
+            }
+          }
+        }
+        if (M.elements[i][i] !== 0) {
+          for (j = i + 1; j < n; j++) {
+            var multiplier = M.elements[j][i] / M.elements[i][i];
+            els = [];
+            for (p = 0; p < np; p++) {
+              // Elements with column numbers up to an including the number of the
+              // row that we're subtracting can safely be set straight to zero,
+              // since that's the point of this routine and it avoids having to
+              // loop over and correct rounding errors later
+              els.push(p <= i ? 0 : M.elements[j][p] - M.elements[i][p] * multiplier);
+            }
+            M.elements[j] = els;
+          }
+        }
+      }
+      return M;
+    }
+    determinant() {
+      if (this.elements.length === 0) {
+        return 1;
+      }
+      if (!this.isSquare()) {
+        return null;
+      }
+      var M = this.toRightTriangular();
+      var det = M.elements[0][0],
+        n = M.elements.length;
+      for (var i = 1; i < n; i++) {
+        det = det * M.elements[i][i];
+      }
+      return det;
+    }
+    isSingular() {
+      return this.isSquare() && this.determinant() === 0;
+    }
+    trace() {
+      if (this.elements.length === 0) {
+        return 0;
+      }
+      if (!this.isSquare()) {
+        return null;
+      }
+      var tr = this.elements[0][0],
+        n = this.elements.length;
+      for (var i = 1; i < n; i++) {
+        tr += this.elements[i][i];
+      }
+      return tr;
+    }
+    rank() {
+      if (this.elements.length === 0) {
+        return 0;
+      }
+      var M = this.toRightTriangular(),
+        rank = 0;
+      var i = this.elements.length,
+        nj = this.elements[0].length,
+        j;
+      while (i--) {
+        j = nj;
+        while (j--) {
+          if (Math.abs(M.elements[i][j]) > PRECISION) {
+            rank++;
+            break;
+          }
+        }
+      }
+      return rank;
+    }
+    augment(matrix) {
+      if (this.elements.length === 0) {
+        return this.dup();
+      }
+      var M = matrix.elements || matrix;
+      if (typeof M[0][0] === 'undefined') {
+        M = new Matrix(M).elements;
+      }
+      var T = this.dup(),
+        cols = T.elements[0].length;
+      var i = T.elements.length,
+        nj = M[0].length,
+        j;
+      if (i !== M.length) {
+        return null;
+      }
+      while (i--) {
+        j = nj;
+        while (j--) {
+          T.elements[i][cols + j] = M[i][j];
+        }
+      }
+      return T;
+    }
+    inverse() {
+      if (this.elements.length === 0) {
+        return null;
+      }
+      if (!this.isSquare() || this.isSingular()) {
+        return null;
+      }
+      var n = this.elements.length,
+        i = n,
+        j;
+      var M = this.augment(Matrix.I(n)).toRightTriangular();
+      var np = M.elements[0].length,
+        p,
+        els,
+        divisor;
+      var inverse_elements = [],
+        new_element;
+      // Matrix is non-singular so there will be no zeros on the
+      // diagonal. Cycle through rows from last to first.
+      while (i--) {
+        // First, normalise diagonal elements to 1
+        els = [];
+        inverse_elements[i] = [];
+        divisor = M.elements[i][i];
+        for (p = 0; p < np; p++) {
+          new_element = M.elements[i][p] / divisor;
+          els.push(new_element);
+          // Shuffle off the current row of the right hand side into the results
+          // array as it will not be modified by later runs through this loop
+          if (p >= n) {
+            inverse_elements[i].push(new_element);
+          }
+        }
+        M.elements[i] = els;
+        // Then, subtract this row from those above it to give the identity matrix
+        // on the left hand side
+        j = i;
+        while (j--) {
+          els = [];
+          for (p = 0; p < np; p++) {
+            els.push(M.elements[j][p] - M.elements[i][p] * M.elements[j][i]);
+          }
+          M.elements[j] = els;
+        }
+      }
+      return new Matrix(inverse_elements);
+    }
+    round() {
+      return this.map(function (x) {
+        return Math.round(x);
+      });
+    }
+    snapTo(x) {
+      return this.map(function (p) {
+        return Math.abs(p - x) <= PRECISION ? x : p;
+      });
+    }
+    inspect() {
+      var matrix_rows = [];
+      var n = this.elements.length;
+      if (n === 0) return '[]';
+      for (var i = 0; i < n; i++) {
+        matrix_rows.push(new Vector(this.elements[i]).inspect());
+      }
+      return matrix_rows.join('\n');
+    }
+    setElements(els) {
+      var i,
+        j,
+        elements = els.elements || els;
+      if (elements[0] && typeof elements[0][0] !== 'undefined') {
+        i = elements.length;
+        this.elements = [];
+        while (i--) {
+          j = elements[i].length;
+          this.elements[i] = [];
+          while (j--) {
+            this.elements[i][j] = elements[i][j];
+          }
+        }
+        return this;
+      }
+      var n = elements.length;
+      this.elements = [];
+      for (i = 0; i < n; i++) {
+        this.elements.push([elements[i]]);
+      }
+      return this;
+    }
+
+    //From glUtils.js
+    flatten() {
+      var result = [];
+      if (this.elements.length == 0) {
+        return [];
+      }
+      for (var j = 0; j < this.elements[0].length; j++) {
+        for (var i = 0; i < this.elements.length; i++) {
+          result.push(this.elements[i][j]);
+        }
+      }
+      return result;
+    }
+
+    //From glUtils.js
+    ensure4x4() {
+      if (this.elements.length == 4 && this.elements[0].length == 4) {
+        return this;
+      }
+      if (this.elements.length > 4 || this.elements[0].length > 4) {
+        return null;
+      }
+      for (var i = 0; i < this.elements.length; i++) {
+        for (var j = this.elements[i].length; j < 4; j++) {
+          if (i == j) {
+            this.elements[i].push(1);
+          } else {
+            this.elements[i].push(0);
+          }
+        }
+      }
+      for (var i = this.elements.length; i < 4; i++) {
+        if (i == 0) {
+          this.elements.push([1, 0, 0, 0]);
+        } else if (i == 1) {
+          this.elements.push([0, 1, 0, 0]);
+        } else if (i == 2) {
+          this.elements.push([0, 0, 1, 0]);
+        } else if (i == 3) {
+          this.elements.push([0, 0, 0, 1]);
+        }
+      }
+      return this;
+    }
+
+    //From glUtils.js
+    make3x3() {
+      if (this.elements.length != 4 || this.elements[0].length != 4) {
+        return null;
+      }
+      return new Matrix([[this.elements[0][0], this.elements[0][1], this.elements[0][2]], [this.elements[1][0], this.elements[1][1], this.elements[1][2]], [this.elements[2][0], this.elements[2][1], this.elements[2][2]]]);
+    }
+  }
+  Matrix.I = function (n) {
+    var els = [],
+      i = n,
+      j;
+    while (i--) {
+      j = n;
+      els[i] = [];
+      while (j--) {
+        els[i][j] = i === j ? 1 : 0;
+      }
+    }
+    return new Matrix(els);
+  };
+  Matrix.Diagonal = function (elements) {
+    var i = elements.length;
+    var M = Matrix.I(i);
+    while (i--) {
+      M.elements[i][i] = elements[i];
+    }
+    return M;
+  };
+  Matrix.Rotation = function (theta, a) {
+    if (!a) {
+      return new Matrix([[Math.cos(theta), -Math.sin(theta)], [Math.sin(theta), Math.cos(theta)]]);
+    }
+    var axis = a.dup();
+    if (axis.elements.length !== 3) {
+      return null;
+    }
+    var mod = axis.modulus();
+    var x = axis.elements[0] / mod,
+      y = axis.elements[1] / mod,
+      z = axis.elements[2] / mod;
+    var s = Math.sin(theta),
+      c = Math.cos(theta),
+      t = 1 - c;
+    // Formula derived here: http://www.gamedev.net/reference/articles/article1199.asp
+    // That proof rotates the co-ordinate system so theta becomes -theta and sin
+    // becomes -sin here.
+    return new Matrix([[t * x * x + c, t * x * y - s * z, t * x * z + s * y], [t * x * y + s * z, t * y * y + c, t * y * z - s * x], [t * x * z - s * y, t * y * z + s * x, t * z * z + c]]);
+  };
+  Matrix.RotationX = function (t) {
+    var c = Math.cos(t),
+      s = Math.sin(t);
+    return new Matrix([[1, 0, 0], [0, c, -s], [0, s, c]]);
+  };
+  Matrix.RotationY = function (t) {
+    var c = Math.cos(t),
+      s = Math.sin(t);
+    return new Matrix([[c, 0, s], [0, 1, 0], [-s, 0, c]]);
+  };
+  Matrix.RotationZ = function (t) {
+    var c = Math.cos(t),
+      s = Math.sin(t);
+    return new Matrix([[c, -s, 0], [s, c, 0], [0, 0, 1]]);
+  };
+  Matrix.Random = function (n, m) {
+    return Matrix.Zero(n, m).map(function () {
+      return Math.random();
+    });
+  };
+
+  //From glUtils.js
+  Matrix.Translation = function (v) {
+    if (v.elements.length == 2) {
+      var r = Matrix.I(3);
+      r.elements[2][0] = v.elements[0];
+      r.elements[2][1] = v.elements[1];
+      return r;
+    }
+    if (v.elements.length == 3) {
+      var r = Matrix.I(4);
+      r.elements[0][3] = v.elements[0];
+      r.elements[1][3] = v.elements[1];
+      r.elements[2][3] = v.elements[2];
+      return r;
+    }
+    throw "Invalid length for Translation";
+  };
+  Matrix.Zero = function (n, m) {
+    var els = [],
+      i = n,
+      j;
+    while (i--) {
+      j = m;
+      els[i] = [];
+      while (j--) {
+        els[i][j] = 0;
+      }
+    }
+    return new Matrix(els);
+  };
+  Matrix.prototype.toUpperTriangular = Matrix.prototype.toRightTriangular;
+  Matrix.prototype.det = Matrix.prototype.determinant;
+  Matrix.prototype.tr = Matrix.prototype.trace;
+  Matrix.prototype.rk = Matrix.prototype.rank;
+  Matrix.prototype.inv = Matrix.prototype.inverse;
+  Matrix.prototype.x = Matrix.prototype.multiply;
+
+  class Vector {
+    constructor(elements) {
+      this.setElements(elements);
+    }
+    e(i) {
+      return i < 1 || i > this.elements.length ? null : this.elements[i - 1];
+    }
+    dimensions() {
+      return this.elements.length;
+    }
+    modulus() {
+      return Math.sqrt(this.dot(this));
+    }
+    eql(vector) {
+      var n = this.elements.length;
+      var V = vector.elements || vector;
+      if (n !== V.length) {
+        return false;
+      }
+      while (n--) {
+        if (Math.abs(this.elements[n] - V[n]) > PRECISION) {
+          return false;
+        }
+      }
+      return true;
+    }
+    dup() {
+      return new Vector(this.elements);
+    }
+    map(fn, context) {
+      var elements = [];
+      this.each(function (x, i) {
+        elements.push(fn.call(context, x, i));
+      });
+      return new Vector(elements);
+    }
+    forEach(fn, context) {
+      var n = this.elements.length;
+      for (var i = 0; i < n; i++) {
+        fn.call(context, this.elements[i], i + 1);
+      }
+    }
+    toUnitVector() {
+      var r = this.modulus();
+      if (r === 0) {
+        return this.dup();
+      }
+      return this.map(function (x) {
+        return x / r;
+      });
+    }
+    angleFrom(vector) {
+      var V = vector.elements || vector;
+      var n = this.elements.length;
+      if (n !== V.length) {
+        return null;
+      }
+      var dot = 0,
+        mod1 = 0,
+        mod2 = 0;
+      // Work things out in parallel to save time
+      this.each(function (x, i) {
+        dot += x * V[i - 1];
+        mod1 += x * x;
+        mod2 += V[i - 1] * V[i - 1];
+      });
+      mod1 = Math.sqrt(mod1);
+      mod2 = Math.sqrt(mod2);
+      if (mod1 * mod2 === 0) {
+        return null;
+      }
+      var theta = dot / (mod1 * mod2);
+      if (theta < -1) {
+        theta = -1;
+      }
+      if (theta > 1) {
+        theta = 1;
+      }
+      return Math.acos(theta);
+    }
+    isParallelTo(vector) {
+      var angle = this.angleFrom(vector);
+      return angle === null ? null : angle <= PRECISION;
+    }
+    isAntiparallelTo(vector) {
+      var angle = this.angleFrom(vector);
+      return angle === null ? null : Math.abs(angle - Math.PI) <= PRECISION;
+    }
+    isPerpendicularTo(vector) {
+      var dot = this.dot(vector);
+      return dot === null ? null : Math.abs(dot) <= PRECISION;
+    }
+    add(vector) {
+      var V = vector.elements || vector;
+      if (this.elements.length !== V.length) {
+        return null;
+      }
+      return this.map(function (x, i) {
+        return x + V[i - 1];
+      });
+    }
+    subtract(vector) {
+      var V = vector.elements || vector;
+      if (this.elements.length !== V.length) {
+        return null;
+      }
+      return this.map(function (x, i) {
+        return x - V[i - 1];
+      });
+    }
+    multiply(k) {
+      return this.map(function (x) {
+        return x * k;
+      });
+    }
+    dot(vector) {
+      var V = vector.elements || vector;
+      var product = 0,
+        n = this.elements.length;
+      if (n !== V.length) {
+        return null;
+      }
+      while (n--) {
+        product += this.elements[n] * V[n];
+      }
+      return product;
+    }
+    cross(vector) {
+      var B = vector.elements || vector;
+      if (this.elements.length !== 3 || B.length !== 3) {
+        return null;
+      }
+      var A = this.elements;
+      return new Vector([A[1] * B[2] - A[2] * B[1], A[2] * B[0] - A[0] * B[2], A[0] * B[1] - A[1] * B[0]]);
+    }
+    max() {
+      var m = 0,
+        i = this.elements.length;
+      while (i--) {
+        if (Math.abs(this.elements[i]) > Math.abs(m)) {
+          m = this.elements[i];
+        }
+      }
+      return m;
+    }
+    indexOf(x) {
+      var index = null,
+        n = this.elements.length;
+      for (var i = 0; i < n; i++) {
+        if (index === null && this.elements[i] === x) {
+          index = i + 1;
+        }
+      }
+      return index;
+    }
+    toDiagonalMatrix() {
+      return Matrix.Diagonal(this.elements);
+    }
+    round() {
+      return this.map(function (x) {
+        return Math.round(x);
+      });
+    }
+    snapTo(x) {
+      return this.map(function (y) {
+        return Math.abs(y - x) <= PRECISION ? x : y;
+      });
+    }
+    distanceFrom(obj) {
+      if (obj.anchor || obj.start && obj.end) {
+        return obj.distanceFrom(this);
+      }
+      var V = obj.elements || obj;
+      if (V.length !== this.elements.length) {
+        return null;
+      }
+      var sum = 0,
+        part;
+      this.each(function (x, i) {
+        part = x - V[i - 1];
+        sum += part * part;
+      });
+      return Math.sqrt(sum);
+    }
+    liesOn(line) {
+      return line.contains(this);
+    }
+    liesIn(plane) {
+      return plane.contains(this);
+    }
+    rotate(t, obj) {
+      var V,
+        R = null,
+        x,
+        y,
+        z;
+      if (t.determinant) {
+        R = t.elements;
+      }
+      switch (this.elements.length) {
+        case 2:
+          {
+            V = obj.elements || obj;
+            if (V.length !== 2) {
+              return null;
+            }
+            if (!R) {
+              R = Matrix.Rotation(t).elements;
+            }
+            x = this.elements[0] - V[0];
+            y = this.elements[1] - V[1];
+            return new Vector([V[0] + R[0][0] * x + R[0][1] * y, V[1] + R[1][0] * x + R[1][1] * y]);
+          }
+        case 3:
+          {
+            if (!obj.direction) {
+              return null;
+            }
+            var C = obj.pointClosestTo(this).elements;
+            if (!R) {
+              R = Matrix.Rotation(t, obj.direction).elements;
+            }
+            x = this.elements[0] - C[0];
+            y = this.elements[1] - C[1];
+            z = this.elements[2] - C[2];
+            return new Vector([C[0] + R[0][0] * x + R[0][1] * y + R[0][2] * z, C[1] + R[1][0] * x + R[1][1] * y + R[1][2] * z, C[2] + R[2][0] * x + R[2][1] * y + R[2][2] * z]);
+          }
+        default:
+          {
+            return null;
+          }
+      }
+    }
+    reflectionIn(obj) {
+      if (obj.anchor) {
+        // obj is a plane or line
+        var P = this.elements.slice();
+        var C = obj.pointClosestTo(P).elements;
+        return new Vector([C[0] + (C[0] - P[0]), C[1] + (C[1] - P[1]), C[2] + (C[2] - (P[2] || 0))]);
+      } else {
+        // obj is a point
+        var Q = obj.elements || obj;
+        if (this.elements.length !== Q.length) {
+          return null;
+        }
+        return this.map(function (x, i) {
+          return Q[i - 1] + (Q[i - 1] - x);
+        });
+      }
+    }
+    to3D() {
+      var V = this.dup();
+      switch (V.elements.length) {
+        case 3:
+          {
+            break;
+          }
+        case 2:
+          {
+            V.elements.push(0);
+            break;
+          }
+        default:
+          {
+            return null;
+          }
+      }
+      return V;
+    }
+    inspect() {
+      return '[' + this.elements.join(', ') + ']';
+    }
+    setElements(els) {
+      this.elements = (els.elements || els).slice();
+      return this;
+    }
+
+    //From glUtils.js
+    flatten() {
+      return this.elements;
+    }
+  }
+  Vector.Random = function (n) {
+    var elements = [];
+    while (n--) {
+      elements.push(Math.random());
+    }
+    return new Vector(elements);
+  };
+  Vector.Zero = function (n) {
+    var elements = [];
+    while (n--) {
+      elements.push(0);
+    }
+    return new Vector(elements);
+  };
+  Vector.prototype.x = Vector.prototype.multiply;
+  Vector.prototype.each = Vector.prototype.forEach;
+  Vector.i = new Vector([1, 0, 0]);
+  Vector.j = new Vector([0, 1, 0]);
+  Vector.k = new Vector([0, 0, 1]);
+
+  var computeCentroids = function computeCentroids(config, position, row) {
+    var centroids = [];
+    var p = Object.keys(config.dimensions);
+    var cols = p.length;
+    var a = 0.5; // center between axes
+    for (var i = 0; i < cols; ++i) {
+      // centroids on 'real' axes
+      var x = position(p[i]);
+      var y = config.dimensions[p[i]].yscale(row[p[i]]);
+      centroids.push(new Vector([x, y]));
+
+      // centroids on 'virtual' axes
+      if (i < cols - 1) {
+        var cx = x + a * (position(p[i + 1]) - x);
+        var cy = y + a * (config.dimensions[p[i + 1]].yscale(row[p[i + 1]]) - y);
+        if (config.bundleDimension !== null) {
+          var leftCentroid = config.clusterCentroids.get(config.dimensions[config.bundleDimension].yscale(row[config.bundleDimension])).get(p[i]);
+          var rightCentroid = config.clusterCentroids.get(config.dimensions[config.bundleDimension].yscale(row[config.bundleDimension])).get(p[i + 1]);
+          var centroid = 0.5 * (leftCentroid + rightCentroid);
+          cy = centroid + (1 - config.bundlingStrength) * (cy - centroid);
+        }
+        centroids.push(new Vector([cx, cy]));
+      }
+    }
+    return centroids;
+  };
+
+  var computeControlPoints = function computeControlPoints(smoothness, centroids) {
+    var cols = centroids.length;
+    var a = smoothness;
+    var cps = [];
+    cps.push(centroids[0]);
+    cps.push(new Vector([centroids[0].e(1) + a * 2 * (centroids[1].e(1) - centroids[0].e(1)), centroids[0].e(2)]));
+    for (var col = 1; col < cols - 1; ++col) {
+      var mid = centroids[col];
+      var left = centroids[col - 1];
+      var right = centroids[col + 1];
+      var diff = left.subtract(right);
+      cps.push(mid.add(diff.x(a)));
+      cps.push(mid);
+      cps.push(mid.subtract(diff.x(a)));
+    }
+    cps.push(new Vector([centroids[cols - 1].e(1) + a * 2 * (centroids[cols - 2].e(1) - centroids[cols - 1].e(1)), centroids[cols - 1].e(2)]));
+    cps.push(centroids[cols - 1]);
+    return cps;
+  };
+
+  // draw single cubic bezier curve
+  var singleCurve = function singleCurve(config, position, d, ctx) {
+    var centroids = computeCentroids(config, position, d);
+    var cps = computeControlPoints(config.smoothness, centroids);
+    ctx.moveTo(cps[0].e(1), cps[0].e(2));
+    for (var i = 1; i < cps.length; i += 3) {
+      if (config.showControlPoints) {
+        for (var j = 0; j < 3; j++) {
+          ctx.fillRect(cps[i + j].e(1), cps[i + j].e(2), 2, 2);
+        }
+      }
+      ctx.bezierCurveTo(cps[i].e(1), cps[i].e(2), cps[i + 1].e(1), cps[i + 1].e(2), cps[i + 2].e(1), cps[i + 2].e(2));
+    }
+  };
+
+  // returns the y-position just beyond the separating null value line
+  var getNullPosition = function getNullPosition(config) {
+    if (config.nullValueSeparator === 'bottom') {
+      return h(config) + 1;
+    } else if (config.nullValueSeparator === 'top') {
+      return 1;
+    } else {
+      console.log("A value is NULL, but nullValueSeparator is not set; set it to 'bottom' or 'top'.");
+    }
+    return h(config) + 1;
+  };
+  var singlePath = function singlePath(config, position, d, ctx) {
+    Object.keys(config.dimensions).map(function (p) {
+      return [position(p), d[p] === undefined ? getNullPosition(config) : config.dimensions[p].yscale(d[p])];
+    }).sort(function (a, b) {
+      return a[0] - b[0];
+    }).forEach(function (p, i) {
+      i === 0 ? ctx.moveTo(p[0], p[1]) : ctx.lineTo(p[0], p[1]);
+    });
+  };
+
+  // draw single polyline
+  var colorPath = function colorPath(config, position, d, ctx) {
+    ctx.beginPath();
+    if (config.bundleDimension !== null && config.bundlingStrength > 0 || config.smoothness > 0) {
+      singleCurve(config, position, d, ctx);
+    } else {
+      singlePath(config, position, d, ctx);
+    }
+    ctx.stroke();
+  };
+
+  var _functor = function _functor(v) {
+    return typeof v === 'function' ? v : function () {
+      return v;
+    };
+  };
+
+  var pathMark = function pathMark(config, ctx, position) {
+    return function (d, i) {
+      ctx.marked.strokeStyle = _functor(config.color)(d, i);
+      return colorPath(config, position, d, ctx.marked);
+    };
+  };
+  var renderMarkedDefault = function renderMarkedDefault(config, pc, ctx, position) {
+    return function () {
+      pc.clear('marked');
+      if (config.marked.length) {
+        config.marked.forEach(pathMark(config, ctx, position));
+      }
+    };
+  };
+  var renderMarkedQueue = function renderMarkedQueue(config, markedQueue) {
+    return function () {
+      if (config.marked) {
+        markedQueue(config.marked);
+      } else {
+        markedQueue([]); // This is needed to clear the currently marked items
+      }
+    };
+  };
+  var renderMarked = function renderMarked(config, pc, events) {
+    return function () {
+      if (!Object.keys(config.dimensions).length) pc.detectDimensions();
+      pc.renderMarked[config.mode]();
+      events.call('render', this);
+      return this;
+    };
+  };
+
+  var pathBrushed = function pathBrushed(config, ctx, position) {
+    return function (d, i) {
+      if (config.brushedColor !== null) {
+        ctx.brushed.strokeStyle = _functor(config.brushedColor)(d, i);
+      } else {
+        ctx.brushed.strokeStyle = _functor(config.color)(d, i);
+      }
+      return colorPath(config, position, d, ctx.brushed);
+    };
+  };
+  var renderBrushedDefault = function renderBrushedDefault(config, ctx, position, pc, brushGroup) {
+    return function () {
+      pc.clear('brushed');
+      if (isBrushed(config, brushGroup) && config.brushed !== false) {
+        config.brushed.forEach(pathBrushed(config, ctx, position));
+      }
+    };
+  };
+  var renderBrushedQueue = function renderBrushedQueue(config, brushGroup, brushedQueue) {
+    return function () {
+      if (isBrushed(config, brushGroup)) {
+        brushedQueue(config.brushed);
+      } else {
+        brushedQueue([]); // This is needed to clear the currently brushed items
+      }
+    };
+  };
+  var renderBrushed = function renderBrushed(config, pc, events) {
+    return function () {
+      if (!Object.keys(config.dimensions).length) pc.detectDimensions();
+      pc.renderBrushed[config.mode]();
+      events.call('render', this);
+      return this;
+    };
+  };
+
+  var brushReset = function brushReset(config, pc) {
+    return function (dimension) {
+      var brushesToKeep = [];
+      for (var j = 0; j < config.brushes.length; j++) {
+        if (config.brushes[j].data !== dimension) {
+          brushesToKeep.push(config.brushes[j]);
+        }
+      }
+      config.brushes = brushesToKeep;
+      config.brushed = false;
+      if (pc.g() !== undefined) {
+        var nodes = pc.g().selectAll('.brush').nodes();
+        for (var i = 0; i < nodes.length; i++) {
+          if (nodes[i].__data__ === dimension) {
+            // remove all dummy brushes for this axis or the real brush
+            d3Selection.select(d3Selection.select(nodes[i]).nodes()[0].parentNode).selectAll('.dummy').remove();
+            config.dimensions[dimension].brush.move(d3Selection.select(nodes[i], null));
+          }
+        }
+      }
+      return this;
+    };
+  };
+
+  // a better "typeof" from this post: http://stackoverflow.com/questions/7390426/better-way-to-get-type-of-a-javascript-variable
+  var toType = function toType(v) {
+    return {}.toString.call(v).match(/\s([a-zA-Z]+)/)[1].toLowerCase();
+  };
+
+  // this descriptive text should live with other introspective methods
+  var toString = function toString(config) {
+    return function () {
+      return 'Parallel Coordinates: ' + Object.keys(config.dimensions).length + ' dimensions (' + Object.keys(config.data[0]).length + ' total) , ' + config.data.length + ' rows';
+    };
+  };
+
+  // pairs of adjacent dimensions
+  var adjacentPairs = function adjacentPairs(arr) {
+    var ret = [];
+    for (var i = 0; i < arr.length - 1; i++) {
+      ret.push([arr[i], arr[i + 1]]);
+    }
+    return ret;
+  };
+
+  var pathHighlight = function pathHighlight(config, ctx, position) {
+    return function (d, i) {
+      ctx.highlight.strokeStyle = _functor(config.color)(d, i);
+      return colorPath(config, position, d, ctx.highlight);
+    };
+  };
+
+  // highlight an array of data
+  var highlight = function highlight(config, pc, canvas, events, ctx, position) {
+    return function () {
+      var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+      if (data === null) {
+        return config.highlighted;
+      }
+      config.highlighted = data;
+      pc.clear('highlight');
+      d3Selection.selectAll([canvas.foreground, canvas.brushed]).classed('faded', true);
+      data.forEach(pathHighlight(config, ctx, position));
+      events.call('highlight', this, data);
+      return this;
+    };
+  };
+
+  // clear highlighting
+  var unhighlight = function unhighlight(config, pc, canvas) {
+    return function () {
+      config.highlighted = [];
+      pc.clear('highlight');
+      d3Selection.selectAll([canvas.foreground, canvas.brushed]).classed('faded', false);
+      return this;
+    };
+  };
+
+  // mark an array of data
+  var mark = function mark(config, pc, canvas, events, ctx, position) {
+    return function () {
+      var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+      if (data === null) {
+        return config.marked;
+      }
+
+      // add array to already marked data
+      config.marked = config.marked.concat(data);
+      d3Selection.selectAll([canvas.foreground, canvas.brushed]).classed('dimmed', true);
+      data.forEach(pathMark(config, ctx, position));
+      events.call('mark', this, data);
+      return this;
+    };
+  };
+
+  // clear marked data arrays
+  var unmark = function unmark(config, pc, canvas) {
+    return function () {
+      config.marked = [];
+      pc.clear('marked');
+      d3Selection.selectAll([canvas.foreground, canvas.brushed]).classed('dimmed', false);
+      return this;
+    };
+  };
+
+  var removeAxes = function removeAxes(pc) {
+    return function () {
+      pc._g.remove();
+      delete pc._g;
+      return this;
+    };
+  };
+
+  /**
+   * Renders the polylines.
+   * If no dimensions have been specified, it will attempt to detect quantitative
+   * dimensions based on the first data entry. If scales haven't been set, it will
+   * autoscale based on the extent for each dimension.
+   *
+   * @param config
+   * @param pc
+   * @param events
+   * @returns {Function}
+   */
+  var render = function render(config, pc, events) {
+    return function () {
+      // try to autodetect dimensions and create scales
+      if (!Object.keys(config.dimensions).length) {
+        pc.detectDimensions();
+      }
+      pc.autoscale();
+      pc.render[config.mode]();
+      events.call('render', this);
+      return this;
+    };
+  };
+
+  var pathForeground = function pathForeground(config, ctx, position) {
+    return function (d, i) {
+      ctx.foreground.strokeStyle = _functor(config.color)(d, i);
+      return colorPath(config, position, d, ctx.foreground);
+    };
+  };
+  var renderDefault = function renderDefault(config, pc, ctx, position) {
+    return function () {
+      pc.clear('foreground');
+      pc.clear('highlight');
+      pc.renderBrushed["default"]();
+      pc.renderMarked["default"]();
+      config.data.forEach(pathForeground(config, ctx, position));
+    };
+  };
+  var renderDefaultQueue = function renderDefaultQueue(config, pc, foregroundQueue) {
+    return function () {
+      pc.renderBrushed.queue();
+      pc.renderMarked.queue();
+      foregroundQueue(config.data);
+    };
+  };
+
+  // try to coerce to number before returning type
+  var toTypeCoerceNumbers = function toTypeCoerceNumbers(v) {
+    return parseFloat(v) == v && v !== null ? 'number' : toType(v);
+  };
+
+  // attempt to determine types of each dimension based on first row of data
+  var detectDimensionTypes = function detectDimensionTypes(data) {
+    return Object.keys(data[0]).reduce(function (acc, cur) {
+      var key = isNaN(Number(cur)) ? cur : parseInt(cur);
+      acc[key] = toTypeCoerceNumbers(data[0][cur]);
+      return acc;
+    }, {});
+  };
+
+  var getOrderedDimensionKeys = function getOrderedDimensionKeys(config) {
+    return function () {
+      return Object.keys(config.dimensions).sort(function (x, y) {
+        return d3Array.ascending(config.dimensions[x].index, config.dimensions[y].index);
+      });
+    };
+  };
+
+  var interactive = function interactive(flags) {
+    return function () {
+      flags.interactive = true;
+      return this;
+    };
+  };
+
+  var shadows = function shadows(flags, pc) {
+    return function () {
+      flags.shadows = true;
+      pc.alphaOnBrushed(0.1);
+      pc.render();
+      return this;
+    };
+  };
+
+  /**
+   * Setup a new parallel coordinates chart.
+   *
+   * @param config
+   * @param canvas
+   * @param ctx
+   * @returns {pc} a parcoords closure
+   */
+  var init = function init(config, canvas, ctx) {
+    /**
+     * Create the chart within a container. The selector can also be a d3 selection.
+     *
+     * @param selection a d3 selection
+     * @returns {pc} instance for chained api
+     */
+    var _pc = function pc(selection) {
+      selection = _pc.selection = d3Selection.select(selection);
+      config.width = selection.node().clientWidth;
+      config.height = selection.node().clientHeight;
+      // canvas data layers
+      ['dots', 'foreground', 'brushed', 'marked', 'highlight'].forEach(function (layer) {
+        canvas[layer] = selection.append('canvas').attr('class', layer).node();
+        ctx[layer] = canvas[layer].getContext('2d');
+      });
+
+      // svg tick and brush layers
+      _pc.svg = selection.append('svg').attr('width', config.width).attr('height', config.height).style('font', '14px sans-serif').style('position', 'absolute').append('svg:g').attr('transform', 'translate(' + config.margin.left + ',' + config.margin.top + ')');
+      // for chained api
+      return _pc;
+    };
+
+    // for partial-application style programming
+    return _pc;
+  };
+
+  var flip = function flip(config) {
+    return function (d) {
+      //__.dimensions[d].yscale.domain().reverse();                               // does not work
+      config.dimensions[d].yscale.domain(config.dimensions[d].yscale.domain().reverse()); // works
+
+      return this;
+    };
+  };
+
+  var detectDimensions = function detectDimensions(pc) {
+    return function () {
+      pc.dimensions(pc.applyDimensionDefaults());
+      return this;
+    };
+  };
+
+  var scale = function scale(config, pc) {
+    return function (d, domain) {
+      config.dimensions[d].yscale.domain(domain);
+      pc.render["default"]();
+      pc.updateAxes();
+      return this;
+    };
+  };
+
+  const version = "3.0.0";
+
+  var DefaultConfig = {
+    data: [],
+    highlighted: [],
+    marked: [],
+    dimensions: {},
+    dimensionTitleRotation: 0,
+    brushes: [],
+    brushed: false,
+    brushedColor: null,
+    alphaOnBrushed: 0.0,
+    lineWidth: 1.4,
+    highlightedLineWidth: 3,
+    mode: 'default',
+    markedLineWidth: 3,
+    markedShadowColor: '#ffffff',
+    markedShadowBlur: 10,
+    rate: 20,
+    width: 600,
+    height: 300,
+    margin: {
+      top: 24,
+      right: 20,
+      bottom: 12,
+      left: 20
+    },
+    nullValueSeparator: 'undefined',
+    // set to "top" or "bottom"
+    nullValueSeparatorPadding: {
+      top: 8,
+      right: 0,
+      bottom: 8,
+      left: 0
+    },
+    color: '#069',
+    composite: 'source-over',
+    alpha: 0.7,
+    bundlingStrength: 0.5,
+    bundleDimension: null,
+    smoothness: 0.0,
+    showControlPoints: false,
+    hideAxis: [],
+    flipAxes: [],
+    animationTime: 1100,
+    // How long it takes to flip the axis when you double click
+    rotateLabels: false
+  };
+
+  var _this$1 = undefined;
+  var initState = function initState(userConfig) {
+    var config = Object.assign({}, DefaultConfig, userConfig);
+    if (userConfig && userConfig.dimensionTitles) {
+      console.warn('dimensionTitles passed in userConfig is deprecated. Add title to dimension object.');
+      Object.entries(userConfig.dimensionTitles).forEach(function (_ref) {
+        var _ref2 = _slicedToArray(_ref, 2),
+          key = _ref2[0],
+          value = _ref2[1];
+        if (config.dimensions[key]) {
+          config.dimensions[key].title = config.dimensions[key].title ? config.dimensions[key].title : value;
+        } else {
+          config.dimensions[key] = {
+            title: value
+          };
+        }
+      });
+    }
+    var eventTypes = ['render', 'resize', 'highlight', 'mark', 'brush', 'brushend', 'brushstart', 'axesreorder'].concat(Object.keys(config));
+    var events = d3Dispatch.dispatch.apply(_this$1, eventTypes),
+      flags = {
+        brushable: false,
+        reorderable: false,
+        axes: false,
+        interactive: false,
+        debug: false
+      },
+      xscale = d3Scale.scalePoint(),
+      dragging = {},
+      axis = d3Axis.axisLeft().ticks(5),
+      ctx = {},
+      canvas = {};
+    var brush = {
+      modes: {
+        None: {
+          install: function install(pc) {},
+          // Nothing to be done.
+          uninstall: function uninstall(pc) {},
+          // Nothing to be done.
+          selected: function selected() {
+            return [];
+          },
+          // Nothing to return
+          brushState: function brushState() {
+            return {};
+          }
+        }
+      },
+      mode: 'None',
+      predicate: 'AND',
+      currentMode: function currentMode() {
+        return this.modes[this.mode];
+      }
+    };
+    return {
+      config: config,
+      events: events,
+      eventTypes: eventTypes,
+      flags: flags,
+      xscale: xscale,
+      dragging: dragging,
+      axis: axis,
+      ctx: ctx,
+      canvas: canvas,
+      brush: brush
+    };
+  };
+
+  var computeClusterCentroids = function computeClusterCentroids(config, d) {
+    var clusterCentroids = new Map();
+    var clusterCounts = new Map();
+    // determine clusterCounts
+    config.data.forEach(function (row) {
+      var scaled = config.dimensions[d].yscale(row[d]);
+      if (!clusterCounts.has(scaled)) {
+        clusterCounts.set(scaled, 0);
+      }
+      var count = clusterCounts.get(scaled);
+      clusterCounts.set(scaled, count + 1);
+    });
+    config.data.forEach(function (row) {
+      Object.keys(config.dimensions).map(function (p) {
+        var scaled = config.dimensions[d].yscale(row[d]);
+        if (!clusterCentroids.has(scaled)) {
+          var _map = new Map();
+          clusterCentroids.set(scaled, _map);
+        }
+        if (!clusterCentroids.get(scaled).has(p)) {
+          clusterCentroids.get(scaled).set(p, 0);
+        }
+        var value = clusterCentroids.get(scaled).get(p);
+        value += config.dimensions[p].yscale(row[p]) / clusterCounts.get(scaled);
+        clusterCentroids.get(scaled).set(p, value);
+      });
+    });
+    return clusterCentroids;
+  };
+
+  var _this = undefined;
+  var without = function without(arr, items) {
+    items.forEach(function (el) {
+      delete arr[el];
+    });
+    return arr;
+  };
+  var sideEffects = function sideEffects(config, ctx, pc, xscale, axis, flags, brushedQueue, markedQueue, foregroundQueue) {
+    return d3Dispatch.dispatch.apply(_this, Object.keys(config)).on('composite', function (d) {
+      ctx.foreground.globalCompositeOperation = d.value;
+      ctx.brushed.globalCompositeOperation = d.value;
+    }).on('alpha', function (d) {
+      ctx.foreground.globalAlpha = d.value;
+      ctx.brushed.globalAlpha = d.value;
+    }).on('brushedColor', function (d) {
+      ctx.brushed.strokeStyle = d.value;
+    }).on('width', function (d) {
+      return pc.resize();
+    }).on('height', function (d) {
+      return pc.resize();
+    }).on('margin', function (d) {
+      return pc.resize();
+    }).on('rate', function (d) {
+      brushedQueue.rate(d.value);
+      markedQueue.rate(d.value);
+      foregroundQueue.rate(d.value);
+    }).on('dimensions', function (d) {
+      config.dimensions = pc.applyDimensionDefaults(Object.keys(d.value));
+      xscale.domain(pc.getOrderedDimensionKeys());
+      pc.sortDimensions();
+      if (flags.interactive) {
+        pc.render().updateAxes();
+      }
+    }).on('bundleDimension', function (d) {
+      if (!Object.keys(config.dimensions).length) pc.detectDimensions();
+      pc.autoscale();
+      if (typeof d.value === 'number') {
+        if (d.value < Object.keys(config.dimensions).length) {
+          config.bundleDimension = config.dimensions[d.value];
+        } else if (d.value < config.hideAxis.length) {
+          config.bundleDimension = config.hideAxis[d.value];
+        }
+      } else {
+        config.bundleDimension = d.value;
+      }
+      config.clusterCentroids = computeClusterCentroids(config, config.bundleDimension);
+      if (flags.interactive) {
+        pc.render();
+      }
+    }).on('hideAxis', function (d) {
+      pc.brushReset();
+      pc.dimensions(pc.applyDimensionDefaults());
+      pc.dimensions(without(config.dimensions, d.value));
+      pc.render();
+    }).on('flipAxes', function (d) {
+      if (d.value && d.value.length) {
+        d.value.forEach(function (dimension) {
+          flipAxisAndUpdatePCP(config, pc, axis)(dimension);
+        });
+        pc.updateAxes(0);
+      }
+    });
+  };
+
+  var getset = function getset(obj, state, events, side_effects) {
+    Object.keys(state).forEach(function (key) {
+      obj[key] = function (x) {
+        if (!arguments.length) {
+          return state[key];
+        }
+        if (key === 'dimensions' && Object.prototype.toString.call(x) === '[object Array]') {
+          console.warn('pc.dimensions([]) is deprecated, use pc.dimensions({})');
+          x = obj.applyDimensionDefaults(x);
+        }
+        var old = state[key];
+        state[key] = x;
+        side_effects.call(key, obj, {
+          value: x,
+          previous: old
+        });
+        events.call(key, obj, {
+          value: x,
+          previous: old
+        });
+        return obj;
+      };
+    });
+  };
+
+  // side effects for setters
+  var d3_rebind = function d3_rebind(target, source, method) {
+    return function () {
+      var value = method.apply(source, arguments);
+      return value === source ? target : value;
+    };
+  };
+  var _rebind = function _rebind(target, source, method) {
+    target[method] = d3_rebind(target, source, source[method]);
+    return target;
+  };
+  var bindEvents = function bindEvents(__, ctx, pc, xscale, flags, brushedQueue, markedQueue, foregroundQueue, events, axis) {
+    var side_effects = sideEffects(__, ctx, pc, xscale, axis, flags, brushedQueue, markedQueue, foregroundQueue);
+
+    // create getter/setters
+    getset(pc, __, events, side_effects);
+
+    // expose events
+    // getter/setter with event firing
+    _rebind(pc, events, 'on');
+    _rebind(pc, axis, 'ticks');
+  };
+
+  // misc
+  var ParCoords = function ParCoords(userConfig) {
+    var state = initState(userConfig);
+    var config = state.config,
+      events = state.events,
+      flags = state.flags,
+      xscale = state.xscale,
+      dragging = state.dragging,
+      axis = state.axis,
+      ctx = state.ctx,
+      canvas = state.canvas,
+      brush = state.brush;
+    var pc = init(config, canvas, ctx);
+    var position = function position(d) {
+      if (xscale.range().length === 0) {
+        xscale.range([0, w(config)], 1);
+      }
+      return dragging[d] == null ? xscale(d) : dragging[d];
+    };
+    var brushedQueue = renderQueue(pathBrushed(config, ctx, position)).rate(50).clear(function () {
+      return pc.clear('brushed');
+    });
+    var markedQueue = renderQueue(pathMark(config, ctx, position)).rate(50).clear(function () {
+      return pc.clear('marked');
+    });
+    var foregroundQueue = renderQueue(pathForeground(config, ctx, position)).rate(50).clear(function () {
+      pc.clear('foreground');
+      pc.clear('highlight');
+    });
+    bindEvents(config, ctx, pc, xscale, flags, brushedQueue, markedQueue, foregroundQueue, events, axis);
+
+    // expose the state of the chart
+    pc.state = config;
+    pc.flags = flags;
+    pc.autoscale = autoscale(config, pc, xscale, ctx);
+    pc.scale = scale(config, pc);
+    pc.flip = flip(config);
+    pc.commonScale = commonScale(config, pc);
+    pc.detectDimensions = detectDimensions(pc);
+    // attempt to determine types of each dimension based on first row of data
+    pc.detectDimensionTypes = detectDimensionTypes;
+    pc.applyDimensionDefaults = applyDimensionDefaults(config, pc);
+    pc.getOrderedDimensionKeys = getOrderedDimensionKeys(config);
+
+    //Renders the polylines.
+    pc.render = render(config, pc, events);
+    pc.renderBrushed = renderBrushed(config, pc, events);
+    pc.renderMarked = renderMarked(config, pc, events);
+    pc.render["default"] = renderDefault(config, pc, ctx, position);
+    pc.render.queue = renderDefaultQueue(config, pc, foregroundQueue);
+    pc.renderBrushed["default"] = renderBrushedDefault(config, ctx, position, pc, brush);
+    pc.renderBrushed.queue = renderBrushedQueue(config, brush, brushedQueue);
+    pc.renderMarked["default"] = renderMarkedDefault(config, pc, ctx, position);
+    pc.renderMarked.queue = renderMarkedQueue(config, markedQueue);
+    pc.compute_real_centroids = computeRealCentroids(config, position);
+    pc.shadows = shadows(flags, pc);
+    pc.axisDots = axisDots(config, pc, position);
+    pc.clear = clear(config, pc, ctx, brush);
+    pc.createAxes = createAxes(config, pc, xscale, flags, axis);
+    pc.removeAxes = removeAxes(pc);
+    pc.updateAxes = updateAxes(config, pc, position, axis, flags);
+    pc.applyAxisConfig = applyAxisConfig;
+    pc.brushable = brushable(config, pc, flags);
+    pc.brushReset = brushReset(config, pc);
+    pc.selected = selected(config, pc);
+    pc.reorderable = reorderable(config, pc, xscale, position, dragging, flags);
+
+    // Reorder dimensions, such that the highest value (visually) is on the left and
+    // the lowest on the right. Visual values are determined by the data values in
+    // the given row.
+    pc.reorder = reorder(config, pc, xscale);
+    pc.sortDimensionsByRowData = sortDimensionsByRowData(config);
+    pc.sortDimensions = sortDimensions(config, position);
+
+    // pairs of adjacent dimensions
+    pc.adjacent_pairs = adjacentPairs;
+    pc.interactive = interactive(flags);
+
+    // expose internal state
+    pc.xscale = xscale;
+    pc.ctx = ctx;
+    pc.canvas = canvas;
+    pc.g = function () {
+      return pc._g;
+    };
+
+    // rescale for height, width and margins
+    // TODO currently assumes chart is brushable, and destroys old brushes
+    pc.resize = resize(config, pc, flags, events);
+
+    // highlight an array of data
+    pc.highlight = highlight(config, pc, canvas, events, ctx, position);
+    // clear highlighting
+    pc.unhighlight = unhighlight(config, pc, canvas);
+
+    // mark an array of data
+    pc.mark = mark(config, pc, canvas, events, ctx, position);
+    // clear marked data
+    pc.unmark = unmark(config, pc, canvas);
+
+    // calculate 2d intersection of line a->b with line c->d
+    // points are objects with x and y properties
+    pc.intersection = intersection;
+
+    // Merges the canvases and SVG elements into one canvas element which is then passed into the callback
+    // (so you can choose to save it to disk, etc.)
+    pc.mergeParcoords = mergeParcoords(pc);
+    pc.brushModes = function () {
+      return Object.getOwnPropertyNames(brush.modes);
+    };
+    pc.brushMode = brushMode(brush, config, pc);
+
+    // install brushes
+    install1DAxes(brush, config, pc, events);
+    install2DStrums(brush, config, pc, events, xscale);
+    installAngularBrush(brush, config, pc, events, xscale);
+    install1DMultiAxes(brush, config, pc, events);
+    pc.version = version;
+    // this descriptive text should live with other introspective methods
+    pc.toString = toString(config);
+    pc.toType = toType;
+    // try to coerce to number before returning type
+    pc.toTypeCoerceNumbers = toTypeCoerceNumbers;
+    return pc;
+  };
+
+  return ParCoords;
+
+}));
+//# sourceMappingURL=parcoords.js.map