@d3plus/core 3.0.0-alpha.0

package/es/src/charts/Viz.js

@@ -0,0 +1,2017 @@
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _array_without_holes(arr) {
+    if (Array.isArray(arr)) return _array_like_to_array(arr);
+}
+function _assert_this_initialized(self) {
+    if (self === void 0) {
+        throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+    }
+    return self;
+}
+function _call_super(_this, derived, args) {
+    derived = _get_prototype_of(derived);
+    return _possible_constructor_return(_this, _is_native_reflect_construct() ? Reflect.construct(derived, args || [], _get_prototype_of(_this).constructor) : derived.apply(_this, args));
+}
+function _class_call_check(instance, Constructor) {
+    if (!(instance instanceof Constructor)) {
+        throw new TypeError("Cannot call a class as a function");
+    }
+}
+function _defineProperties(target, props) {
+    for(var i = 0; i < props.length; i++){
+        var descriptor = props[i];
+        descriptor.enumerable = descriptor.enumerable || false;
+        descriptor.configurable = true;
+        if ("value" in descriptor) descriptor.writable = true;
+        Object.defineProperty(target, descriptor.key, descriptor);
+    }
+}
+function _create_class(Constructor, protoProps, staticProps) {
+    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+    if (staticProps) _defineProperties(Constructor, staticProps);
+    return Constructor;
+}
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _get_prototype_of(o) {
+    _get_prototype_of = Object.setPrototypeOf ? Object.getPrototypeOf : function getPrototypeOf(o) {
+        return o.__proto__ || Object.getPrototypeOf(o);
+    };
+    return _get_prototype_of(o);
+}
+function _inherits(subClass, superClass) {
+    if (typeof superClass !== "function" && superClass !== null) {
+        throw new TypeError("Super expression must either be null or a function");
+    }
+    subClass.prototype = Object.create(superClass && superClass.prototype, {
+        constructor: {
+            value: subClass,
+            writable: true,
+            configurable: true
+        }
+    });
+    if (superClass) _set_prototype_of(subClass, superClass);
+}
+function _instanceof(left, right) {
+    if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) {
+        return !!right[Symbol.hasInstance](left);
+    } else {
+        return left instanceof right;
+    }
+}
+function _iterable_to_array(iter) {
+    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    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 _non_iterable_spread() {
+    throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+function _possible_constructor_return(self, call) {
+    if (call && (_type_of(call) === "object" || typeof call === "function")) {
+        return call;
+    }
+    return _assert_this_initialized(self);
+}
+function _set_prototype_of(o, p) {
+    _set_prototype_of = Object.setPrototypeOf || function setPrototypeOf(o, p) {
+        o.__proto__ = p;
+        return o;
+    };
+    return _set_prototype_of(o, p);
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _to_consumable_array(arr) {
+    return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array(arr) || _non_iterable_spread();
+}
+function _type_of(obj) {
+    "@swc/helpers - typeof";
+    return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+function _is_native_reflect_construct() {
+    try {
+        var result = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() {}));
+    } catch (_) {}
+    return (_is_native_reflect_construct = function() {
+        return !!result;
+    })();
+}
+import { group, max, merge as arrayMerge, min, range, rollup } from "d3-array";
+import { brush } from "d3-brush";
+import { color } from "d3-color";
+import { queue } from "d3-queue";
+import { select } from "d3-selection";
+import { scaleOrdinal } from "d3-scale";
+import { zoom } from "d3-zoom";
+import lrucache from "lrucache";
+import { colorAssign, colorContrast, colorDefaults } from "@d3plus/color";
+import { addToQueue, merge, unique } from "@d3plus/data";
+import { assign, date, getSize, inViewport } from "@d3plus/dom";
+import { formatAbbreviate } from "@d3plus/format";
+import { fontFamily, fontFamilyStringify } from "@d3plus/text";
+import { ColorScale, Legend, TextBox, Timeline, Tooltip } from "../components/index.js";
+import { accessor, BaseClass, configPrep, constant } from "../utils/index.js";
+// import {Rect} from "../shape/index.js";
+import Message from "../components/Message.js";
+import drawBack from "./drawSteps/drawBack.js";
+import drawColorScale from "./drawSteps/drawColorScale.js";
+import { default as drawLegend, legendLabel } from "./drawSteps/drawLegend.js";
+import drawSubtitle from "./drawSteps/drawSubtitle.js";
+import drawTimeline from "./drawSteps/drawTimeline.js";
+import drawTitle from "./drawSteps/drawTitle.js";
+import drawTotal from "./drawSteps/drawTotal.js";
+import zoomControls from "./drawSteps/zoomControls.js";
+import drawAttribution from "./drawSteps/drawAttribution.js";
+import clickShape from "./events/click.shape.js";
+import clickLegend from "./events/click.legend.js";
+import mouseenter from "./events/mouseenter.js";
+import mouseleave from "./events/mouseleave.js";
+import mousemoveLegend from "./events/mousemove.legend.js";
+import mousemoveShape from "./events/mousemove.shape.js";
+import touchstartBody from "./events/touchstart.body.js";
+/**
+ * Default padding logic that will return false if the screen is less than 600 pixels wide.
+ */ function defaultPadding() {
+    return typeof window !== "undefined" ? window.innerWidth > 600 : true;
+}
+/**
+ * Turns an array of values into a list string.
+ */ function listify(n) {
+    return n.reduce(function(str, item, i) {
+        if (!i) str += item;
+        else if (i === n.length - 1 && i === 1) str += " and ".concat(item);
+        else if (i === n.length - 1) str += ", and ".concat(item);
+        else str += ", ".concat(item);
+        return str;
+    }, "");
+}
+/**
+ * A function that introspects the `d` Data Object for internally nested
+ * d3plus data and indices, runs the accessor function on that user data.
+ * @param {Function} acc Accessor function to use.
+ * @param {Object} d Data Object
+ * @param {Number} i Index of Data Object in Array
+ * @private
+ */ function accessorFetch(acc, d, i) {
+    while(d.__d3plus__ && d.data){
+        d = d.data;
+        i = d.i;
+    }
+    return acc(d, i);
+}
+var Viz = /*#__PURE__*/ function(BaseClass) {
+    "use strict";
+    _inherits(Viz, BaseClass);
+    function Viz() {
+        _class_call_check(this, Viz);
+        var _this;
+        _this = _call_super(this, Viz);
+        _this._aggs = {};
+        _this._ariaHidden = true;
+        _this._attribution = false;
+        _this._attributionStyle = {
+            background: "rgba(255, 255, 255, 0.75)",
+            border: "1px solid rgba(0, 0, 0, 0.25)",
+            color: "rgba(0, 0, 0, 0.75)",
+            display: "block",
+            font: "400 11px/11px ".concat(fontFamilyStringify(fontFamily)),
+            margin: "5px",
+            opacity: 0.75,
+            padding: "4px 6px 3px"
+        };
+        _this._backClass = new TextBox().on("click", function() {
+            if (_this._history.length) _this.config(_this._history.pop()).render();
+            else _this.depth(_this._drawDepth - 1).filter(false).render();
+        }).on("mousemove", function() {
+            return _this._backClass.select().style("cursor", "pointer");
+        });
+        _this._backConfig = {
+            fontSize: 10,
+            padding: 5,
+            resize: false
+        };
+        _this._cache = true;
+        _this._color = function(d, i) {
+            return _this._groupBy[0](d, i);
+        };
+        _this._colorDefaults = _object_spread_props(_object_spread({}, colorDefaults), {
+            scale: scaleOrdinal().range(colorDefaults.scale.range())
+        });
+        _this._colorScaleClass = new ColorScale();
+        _this._colorScaleConfig = {
+            axisConfig: {
+                rounding: "inside"
+            },
+            scale: "jenks"
+        };
+        _this._colorScalePadding = defaultPadding;
+        _this._colorScalePosition = function() {
+            return _this._width > _this._height * 1.5 ? "right" : "bottom";
+        };
+        _this._colorScaleMaxSize = 600;
+        _this._data = [];
+        _this._dataCutoff = 100;
+        _this._detectResize = true;
+        _this._detectResizeDelay = 400;
+        _this._detectVisible = true;
+        _this._detectVisibleInterval = 1000;
+        _this._downloadButton = false;
+        _this._downloadConfig = {
+            type: "png"
+        };
+        _this._downloadPosition = "top";
+        _this._duration = 600;
+        _this._fontFamily = fontFamily;
+        _this._hidden = [];
+        _this._hiddenColor = constant("#aaa");
+        _this._hiddenOpacity = constant(0.5);
+        _this._history = [];
+        _this._groupBy = [
+            accessor("id")
+        ];
+        _this._legend = function(config, arr) {
+            var maxGrouped = max(arr, function(d, i) {
+                var id = _this._groupBy[_this._legendDepth].bind(_this)(d, i);
+                return _instanceof(id, Array) ? id.length : 1;
+            });
+            return arr.length > 1 && maxGrouped <= 2;
+        };
+        _this._legendClass = new Legend();
+        _this._legendConfig = {
+            label: legendLabel.bind(_this),
+            shapeConfig: {
+                ariaLabel: legendLabel.bind(_this),
+                labelConfig: {
+                    fontColor: undefined,
+                    fontResize: false,
+                    padding: 0
+                }
+            }
+        };
+        _this._legendFilterInvert = constant(false);
+        _this._legendPadding = defaultPadding;
+        _this._legendPosition = function() {
+            return _this._width > _this._height * 1.5 ? "right" : "bottom";
+        };
+        _this._legendSort = function(a, b) {
+            return _this._drawLabel(a).localeCompare(_this._drawLabel(b));
+        };
+        _this._legendTooltip = {};
+        _this._loadingHTML = function() {
+            return '\n    <div style="left: 50%; top: 50%; position: absolute; transform: translate(-50%, -50%);">\n      <strong>'.concat(_this._translate("Loading Visualization"), '</strong>\n      <sub style="bottom: 0; display: block; line-height: 1; margin-top: 5px;"><a href="https://d3plus.org" target="_blank">').concat(_this._translate("Powered by D3plus"), "</a></sub>\n    </div>");
+        };
+        _this._loadingMessage = true;
+        _this._lrucache = lrucache(10);
+        _this._messageClass = new Message();
+        _this._messageMask = "rgba(0, 0, 0, 0.05)";
+        _this._messageStyle = {
+            "bottom": "0",
+            "left": "0",
+            "position": "absolute",
+            "right": "0",
+            "text-align": "center",
+            "top": "0"
+        };
+        _this._noDataHTML = function() {
+            return '\n    <div style="left: 50%; top: 50%; position: absolute; transform: translate(-50%, -50%);">\n      <strong>'.concat(_this._translate("No Data Available"), "</strong>\n    </div>");
+        };
+        _this._noDataMessage = true;
+        _this._on = {
+            "click.shape": clickShape.bind(_this),
+            "click.legend": clickLegend.bind(_this),
+            "mouseenter": mouseenter.bind(_this),
+            "mouseleave": mouseleave.bind(_this),
+            "mousemove.shape": mousemoveShape.bind(_this),
+            "mousemove.legend": mousemoveLegend.bind(_this)
+        };
+        _this._queue = [];
+        _this._resizeContainer = typeof window === "undefined" ? "" : window;
+        _this._scrollContainer = typeof window === "undefined" ? "" : window;
+        _this._shape = constant("Rect");
+        _this._shapes = [];
+        _this._shapeConfig = {
+            ariaLabel: function(d, i) {
+                return _this._drawLabel(d, i);
+            },
+            fill: function(d, i) {
+                while(d.__d3plus__ && d.data){
+                    d = d.data;
+                    i = d.i;
+                }
+                if (_this._colorScale) {
+                    var c = _this._colorScale(d, i);
+                    if (c !== undefined && c !== null) {
+                        var scale = _this._colorScaleClass._colorScale;
+                        var colors = _this._colorScaleClass.color();
+                        if (!scale) return _instanceof(colors, Array) ? colors[colors.length - 1] : colors;
+                        else if (!scale.domain().length) return scale.range()[scale.range().length - 1];
+                        return scale(c);
+                    }
+                }
+                var c1 = _this._color(d, i);
+                if (color(c1)) return c1;
+                return colorAssign(typeof c1 === "string" ? c1 : JSON.stringify(c1), _this._colorDefaults);
+            },
+            labelConfig: {
+                fontColor: function(d, i) {
+                    var c = typeof _this._shapeConfig.fill === "function" ? _this._shapeConfig.fill(d, i) : _this._shapeConfig.fill;
+                    return colorContrast(c);
+                }
+            },
+            opacity: constant(1),
+            stroke: function(d, i) {
+                var c = typeof _this._shapeConfig.fill === "function" ? _this._shapeConfig.fill(d, i) : _this._shapeConfig.fill;
+                return color(c).darker(0.25);
+            },
+            role: "presentation",
+            strokeWidth: constant(0)
+        };
+        _this._solo = [];
+        _this._subtitleClass = new TextBox();
+        _this._subtitleConfig = {
+            ariaHidden: true,
+            fontSize: 12,
+            padding: 5,
+            resize: false,
+            textAnchor: "middle"
+        };
+        _this._subtitlePadding = defaultPadding;
+        _this._svgDesc = "";
+        _this._svgTitle = "";
+        _this._timeline = true;
+        _this._timelineClass = new Timeline().align("end");
+        _this._timelineConfig = {
+            brushing: false,
+            padding: 5
+        };
+        _this._timelinePadding = defaultPadding;
+        _this._threshold = constant(0.0001);
+        _this._thresholdKey = undefined;
+        _this._thresholdName = function() {
+            return _this._translate("Values");
+        };
+        _this._titleClass = new TextBox();
+        _this._titleConfig = {
+            ariaHidden: true,
+            fontSize: 16,
+            padding: 5,
+            resize: false,
+            textAnchor: "middle"
+        };
+        _this._titlePadding = defaultPadding;
+        _this._tooltip = constant(true);
+        _this._tooltipClass = new Tooltip();
+        _this._tooltipConfig = {
+            pointerEvents: "none",
+            titleStyle: {
+                "max-width": "200px"
+            }
+        };
+        _this._totalClass = new TextBox();
+        _this._totalConfig = {
+            fontSize: 10,
+            padding: 5,
+            resize: false,
+            textAnchor: "middle"
+        };
+        _this._totalFormat = function(d) {
+            return "".concat(_this._translate("Total"), ": ").concat(formatAbbreviate(d, _this._locale));
+        };
+        _this._totalPadding = defaultPadding;
+        _this._zoom = false;
+        _this._zoomBehavior = zoom();
+        _this._zoomBrush = brush();
+        _this._zoomBrushHandleSize = 1;
+        _this._zoomBrushHandleStyle = {
+            fill: "#444"
+        };
+        _this._zoomBrushSelectionStyle = {
+            "fill": "#777",
+            "stroke-width": 0
+        };
+        _this._zoomControlStyle = {
+            "background": "rgba(255, 255, 255, 0.75)",
+            "border": "1px solid rgba(0, 0, 0, 0.75)",
+            "color": "rgba(0, 0, 0, 0.75)",
+            "display": "block",
+            "font": "900 15px/21px ".concat(fontFamilyStringify(fontFamily)),
+            "height": "20px",
+            "margin": "5px",
+            "opacity": 0.75,
+            "padding": 0,
+            "text-align": "center",
+            "width": "20px"
+        };
+        _this._zoomControlStyleActive = {
+            background: "rgba(0, 0, 0, 0.75)",
+            color: "rgba(255, 255, 255, 0.75)",
+            opacity: 1
+        };
+        _this._zoomControlStyleHover = {
+            cursor: "pointer",
+            opacity: 1
+        };
+        _this._zoomFactor = 2;
+        _this._zoomMax = 16;
+        _this._zoomPadding = 20;
+        _this._zoomPan = true;
+        _this._zoomScroll = true;
+        return _this;
+    }
+    _create_class(Viz, [
+        {
+            /**
+   @memberof Viz
+   @desc Called by draw before anything is drawn. Formats the data and performs preparations for draw.
+   @private
+   */ key: "_preDraw",
+            value: function _preDraw() {
+                var _this = this;
+                var _this1 = this;
+                var that = this;
+                // based on the groupBy, determine the draw depth and current depth id
+                this._drawDepth = this._depth !== void 0 ? min([
+                    this._depth >= 0 ? this._depth : 0,
+                    this._groupBy.length - 1
+                ]) : this._groupBy.length - 1;
+                // Returns the current unique ID for a data point, coerced to a String.
+                this._id = function(d, i) {
+                    var groupByDrawDepth = accessorFetch(_this._groupBy[_this._drawDepth], d, i);
+                    return typeof groupByDrawDepth === "number" ? "".concat(groupByDrawDepth) : groupByDrawDepth;
+                };
+                // Returns an array of the current unique groupBy ID for a data point, coerced to Strings.
+                this._ids = function(d, i) {
+                    return _this._groupBy.map(function(g) {
+                        return "".concat(accessorFetch(g, d, i));
+                    }).filter(Boolean);
+                };
+                this._drawLabel = function(d, i) {
+                    var depth = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : _this1._drawDepth;
+                    if (!d) return "";
+                    while(d.__d3plus__ && d.data){
+                        d = d.data;
+                        i = d.i;
+                    }
+                    if (d._isAggregation) {
+                        return "".concat(_this1._thresholdName(d, i), " < ").concat(formatAbbreviate(d._threshold * 100, _this1._locale), "%");
+                    }
+                    if (_this1._label && depth === _this1._drawDepth) return "".concat(_this1._label(d, i));
+                    var l = that._ids(d, i).slice(0, depth + 1);
+                    var n = l.reverse().find(function(ll) {
+                        return !_instanceof(ll, Array);
+                    }) || l[l.length - 1];
+                    return _instanceof(n, Array) ? listify(n) : "".concat(n);
+                };
+                // set the default timeFilter if it has not been specified
+                if (this._time && !this._timeFilter && this._data.length) {
+                    var dates = this._data.map(this._time).map(date);
+                    var d = this._data[0], i = 0;
+                    if (this._discrete && "_".concat(this._discrete) in this && this["_".concat(this._discrete)](d, i) === this._time(d, i)) {
+                        this._timeFilter = function() {
+                            return true;
+                        };
+                    } else {
+                        var latestTime = +max(dates);
+                        this._timeFilter = function(d, i) {
+                            return +date(_this._time(d, i)) === latestTime;
+                        };
+                    }
+                }
+                this._filteredData = [];
+                this._legendData = [];
+                var flatData = [];
+                if (this._data.length) {
+                    flatData = this._timeFilter ? this._data.filter(this._timeFilter) : this._data;
+                    if (this._filter) flatData = flatData.filter(this._filter);
+                    var nestKeys = [];
+                    for(var i1 = 0; i1 <= this._drawDepth; i1++)nestKeys.push(this._groupBy[i1]);
+                    if (this._discrete && "_".concat(this._discrete) in this) nestKeys.push(this["_".concat(this._discrete)]);
+                    if (this._discrete && "_".concat(this._discrete, "2") in this) nestKeys.push(this["_".concat(this._discrete, "2")]);
+                    var tree = rollup.apply(void 0, [
+                        flatData,
+                        function(leaves) {
+                            var index = _this._data.indexOf(leaves[0]);
+                            var shape = _this._shape(leaves[0], index);
+                            var id = _this._id(leaves[0], index);
+                            var d = merge(leaves, _this._aggs);
+                            if (!_this._hidden.includes(id) && (!_this._solo.length || _this._solo.includes(id))) {
+                                if (!_this._discrete && shape === "Line") _this._filteredData = _this._filteredData.concat(leaves);
+                                else _this._filteredData.push(d);
+                            }
+                            _this._legendData.push(d);
+                        }
+                    ].concat(_to_consumable_array(nestKeys)));
+                    this._filteredData = this._thresholdFunction(this._filteredData, tree);
+                }
+                // overrides the hoverOpacity of shapes if data is larger than cutoff
+                var uniqueIds = group(this._filteredData, this._id).size;
+                if (uniqueIds > this._dataCutoff) {
+                    if (this._userHover === undefined) this._userHover = this._shapeConfig.hoverOpacity || 0.5;
+                    if (this._userDuration === undefined) this._userDuration = this._shapeConfig.duration || 600;
+                    this._shapeConfig.hoverOpacity = 1;
+                    this._shapeConfig.duration = 0;
+                } else if (this._userHover !== undefined) {
+                    this._shapeConfig.hoverOpacity = this._userHover;
+                    this._shapeConfig.duration = this._userDuration;
+                }
+                if (this._noDataMessage && !this._filteredData.length) {
+                    this._messageClass.render({
+                        container: this._select.node().parentNode,
+                        html: this._noDataHTML(this),
+                        mask: false,
+                        style: this._messageStyle
+                    });
+                    this._select.transition().duration(this._duration).attr("opacity", 0);
+                }
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc Called by render once all checks are passed.
+      @private
+  */ key: "_draw",
+            value: function _draw() {
+                // Sanitizes user input for legendPosition and colorScalePosition
+                var legendPosition = this._legendPosition.bind(this)(this.config());
+                if (![
+                    false,
+                    "top",
+                    "bottom",
+                    "left",
+                    "right"
+                ].includes(legendPosition)) legendPosition = "bottom";
+                var colorScalePosition = this._colorScalePosition.bind(this)(this.config());
+                if (![
+                    false,
+                    "top",
+                    "bottom",
+                    "left",
+                    "right"
+                ].includes(colorScalePosition)) colorScalePosition = "bottom";
+                // Draws legend and colorScale if they are positioned "left" or "right"
+                if (legendPosition === "left" || legendPosition === "right") drawLegend.bind(this)(this._legendData);
+                if (colorScalePosition === "left" || colorScalePosition === "right" || colorScalePosition === false) drawColorScale.bind(this)(this._filteredData);
+                // Draws all of the top/bottom UI elements
+                drawBack.bind(this)();
+                drawTitle.bind(this)(this._filteredData);
+                drawSubtitle.bind(this)(this._filteredData);
+                drawTotal.bind(this)(this._filteredData);
+                drawTimeline.bind(this)(this._filteredData);
+                // Draws legend and colorScale if they are positioned "top" or "bottom"
+                if (legendPosition === "top" || legendPosition === "bottom") drawLegend.bind(this)(this._legendData);
+                if (colorScalePosition === "top" || colorScalePosition === "bottom") drawColorScale.bind(this)(this._filteredData);
+                this._shapes = [];
+            // Draws a container and zoomGroup to test functionality.
+            // this._testGroup = this._select.selectAll("g.d3plus-viz-testGroup").data([0]);
+            // const enterTest = this._testGroup.enter().append("g").attr("class", "d3plus-viz-testGroup")
+            //   .merge(this._testGroup);
+            // this._testGroup = enterTest.merge(this._testGroup);
+            // const bgHeight = this._height - this._margin.top - this._margin.bottom;
+            // const bgWidth = this._width - this._margin.left - this._margin.right;
+            // new Rect()
+            //   .data([{id: "background"}])
+            //   .select(this._testGroup.node())
+            //   .x(bgWidth / 2 + this._margin.left)
+            //   .y(bgHeight / 2 + this._margin.top)
+            //   .width(bgWidth)
+            //   .height(bgHeight)
+            //   .fill("#ccc")
+            //   .render();
+            // this._zoomGroup = this._select.selectAll("g.d3plus-viz-zoomGroup").data([0]);
+            // const enter = this._zoomGroup.enter().append("g").attr("class", "d3plus-viz-zoomGroup")
+            //   .merge(this._zoomGroup);
+            // this._zoomGroup = enter.merge(this._zoomGroup);
+            // const testConfig = {
+            //   on: {
+            //     click: this._on["click.shape"],
+            //     mouseenter: this._on.mouseenter,
+            //     mouseleave: this._on.mouseleave,
+            //     mousemove: this._on["mousemove.shape"]
+            //   }
+            // };
+            // const testWidth = 50;
+            // this._shapes.push(new Rect()
+            //   .config(this._shapeConfig)
+            //   .config(configPrep.bind(this)(testConfig))
+            //   .data(this._filteredData)
+            //   .label("Test Label")
+            //   .select(this._zoomGroup.node())
+            //   .id(this._id)
+            //   .x(d => {
+            //     if (!d.x) d.x = Math.random() * bgWidth;
+            //     return d.x;
+            //   })
+            //   .y(d => {
+            //     if (!d.y) d.y = Math.random() * bgHeight;
+            //     return d.y;
+            //   })
+            //   .width(testWidth)
+            //   .height(testWidth)
+            //   .render());
+            }
+        },
+        {
+            /**
+   * Applies the threshold algorithm according to the type of chart used.
+   * @param {Array} data The data to process.
+   */ key: "_thresholdFunction",
+            value: function _thresholdFunction(data) {
+                return data;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc Draws the visualization given the specified configuration.
+      @param {Function} [*callback*] An optional callback function that, if passed, will be called after animation is complete.
+      @chainable
+  */ key: "render",
+            value: function render(callback) {
+                var _this = this;
+                // Resets margins and padding
+                this._margin = {
+                    bottom: 0,
+                    left: 0,
+                    right: 0,
+                    top: 0
+                };
+                this._padding = {
+                    bottom: 0,
+                    left: 0,
+                    right: 0,
+                    top: 0
+                };
+                // Appends a fullscreen SVG to the BODY if a container has not been provided through .select().
+                if (this._select === void 0 || this._select.node().tagName.toLowerCase() !== "svg") {
+                    var parent = this._select === void 0 ? select("body").append("div") : this._select;
+                    var svg = parent.select(".d3plus-viz").size() ? parent.select(".d3plus-viz") : parent.append("svg");
+                    this.select(svg.node());
+                }
+                /** detects width and height and sets SVG properties */ function setSVGSize() {
+                    var display = this._select.style("display");
+                    this._select.style("display", "none");
+                    var _getSize = _sliced_to_array(getSize(this._select.node().parentNode), 2), w = _getSize[0], h = _getSize[1];
+                    w -= parseFloat(this._select.style("border-left-width"), 10);
+                    w -= parseFloat(this._select.style("border-right-width"), 10);
+                    h -= parseFloat(this._select.style("border-top-width"), 10);
+                    h -= parseFloat(this._select.style("border-bottom-width"), 10);
+                    this._select.style("display", display);
+                    if (this._autoWidth) {
+                        this.width(w);
+                        this._select.style("width", "".concat(this._width, "px")).attr("width", "".concat(this._width, "px"));
+                    }
+                    if (this._autoHeight) {
+                        this.height(h);
+                        this._select.style("height", "".concat(this._height, "px")).attr("height", "".concat(this._height, "px"));
+                    }
+                }
+                // Calculates the width and/or height of the Viz based on the this._select, if either has not been defined.
+                if ((!this._width || !this._height) && (!this._detectVisible || inViewport(this._select.node()))) {
+                    this._autoWidth = this._width === undefined;
+                    this._autoHeight = this._height === undefined;
+                    setSVGSize.bind(this)();
+                }
+                this._select.attr("class", "d3plus-viz").attr("aria-hidden", this._ariaHidden).attr("aria-labelledby", "".concat(this._uuid, "-title ").concat(this._uuid, "-desc")).attr("role", "img").attr("xmlns", "http://www.w3.org/2000/svg").attr("xmlns:xlink", "http://www.w3.org/1999/xlink").transition().duration(this._duration).style("width", this._width !== undefined ? "".concat(this._width, "px") : undefined).style("height", this._height !== undefined ? "".concat(this._height, "px") : undefined).attr("width", this._width !== undefined ? "".concat(this._width, "px") : undefined).attr("height", this._height !== undefined ? "".concat(this._height, "px") : undefined);
+                // sets "position: relative" on the SVG parent if currently undefined
+                var parent1 = select(this._select.node().parentNode);
+                var position = parent1.style("position");
+                if (position === "static") parent1.style("position", "relative");
+                parent1.style("font-family", fontFamilyStringify(this._fontFamily));
+                // sets initial opacity to 1, if it has not already been set
+                if (this._select.attr("opacity") === null) this._select.attr("opacity", 1);
+                // Updates the <title> tag if already exists else creates a new <title> tag on this.select.
+                var svgTitle = this._select.selectAll("title").data([
+                    0
+                ]);
+                var svgTitleEnter = svgTitle.enter().append("title").attr("id", "".concat(this._uuid, "-title"));
+                svgTitle.merge(svgTitleEnter).text(this._svgTitle);
+                // Updates the <desc> tag if already exists else creates a new <desc> tag on this.select.
+                var svgDesc = this._select.selectAll("desc").data([
+                    0
+                ]);
+                var svgDescEnter = svgDesc.enter().append("desc").attr("id", "".concat(this._uuid, "-desc"));
+                svgDesc.merge(svgDescEnter).text(this._svgDesc);
+                this._visiblePoll = clearInterval(this._visiblePoll);
+                this._resizePoll = clearTimeout(this._resizePoll);
+                this._scrollPoll = clearTimeout(this._scrollPoll);
+                select(this._scrollContainer).on("scroll.".concat(this._uuid), null);
+                select(this._resizeContainer).on("resize.".concat(this._uuid), null);
+                if (this._detectVisible && this._select.style("visibility") === "hidden") {
+                    this._visiblePoll = setInterval(function() {
+                        if (_this._select.style("visibility") !== "hidden") {
+                            _this._visiblePoll = clearInterval(_this._visiblePoll);
+                            _this.render(callback);
+                        }
+                    }, this._detectVisibleInterval);
+                } else if (this._detectVisible && this._select.style("display") === "none") {
+                    this._visiblePoll = setInterval(function() {
+                        if (_this._select.style("display") !== "none") {
+                            _this._visiblePoll = clearInterval(_this._visiblePoll);
+                            _this.render(callback);
+                        }
+                    }, this._detectVisibleInterval);
+                } else if (this._detectVisible && !inViewport(this._select.node())) {
+                    select(this._scrollContainer).on("scroll.".concat(this._uuid), function() {
+                        if (!_this._scrollPoll) {
+                            _this._scrollPoll = setTimeout(function() {
+                                if (inViewport(_this._select.node())) {
+                                    select(_this._scrollContainer).on("scroll.".concat(_this._uuid), null);
+                                    _this.render(callback);
+                                }
+                                _this._scrollPoll = clearTimeout(_this._scrollPoll);
+                            }, _this._detectVisibleInterval);
+                        }
+                    });
+                } else {
+                    var q = queue();
+                    this._queue.forEach(function(p) {
+                        var _q;
+                        var cache = _this._cache ? _this._lrucache.get("".concat(p[3], "_").concat(p[1])) : undefined;
+                        if (!cache) (_q = q).defer.apply(_q, _to_consumable_array(p));
+                        else _this["_".concat(p[3])] = p[2] ? p[2](cache) : cache;
+                    });
+                    this._queue = [];
+                    if (this._loadingMessage && q._tasks.length) {
+                        this._messageClass.render({
+                            container: this._select.node().parentNode,
+                            html: this._loadingHTML(this),
+                            mask: this._filteredData ? this._messageMask : false,
+                            style: this._messageStyle
+                        });
+                    }
+                    q.awaitAll(function() {
+                        // creates a data table as DOM elements inside of the SVG for accessibility
+                        // only if this._ariaHidden is set to true
+                        var columns = _instanceof(_this._data, Array) && _this._data.length > 0 ? Object.keys(_this._data[0]) : [];
+                        var svgTable = _this._select.selectAll("g.data-table").data(!_this._ariaHidden && _instanceof(_this._data, Array) && _this._data.length ? [
+                            0
+                        ] : []);
+                        var svgTableEnter = svgTable.enter().append("g").attr("class", "data-table").attr("role", "table");
+                        svgTable.exit().remove();
+                        var rows = svgTable.merge(svgTableEnter).selectAll("text").data(_instanceof(_this._data, Array) ? range(0, _this._data.length + 1) : []);
+                        rows.exit().remove();
+                        var cells = rows.merge(rows.enter().append("text").attr("role", "row")).selectAll("tspan").data(function(d, i) {
+                            return columns.map(function(c) {
+                                return {
+                                    role: i ? "cell" : "columnheader",
+                                    text: i ? _this._data[i - 1][c] : c
+                                };
+                            });
+                        });
+                        cells.exit().remove();
+                        cells.merge(cells.enter().append("tspan")).attr("role", function(d) {
+                            return d.role;
+                        }).attr("dy", "-1000px").html(function(d) {
+                            return d.text;
+                        });
+                        // finishes the draw cycle
+                        _this._preDraw();
+                        _this._draw(callback);
+                        zoomControls.bind(_this)();
+                        drawAttribution.bind(_this)();
+                        if (_this._messageClass._isVisible && (!_this._noDataMessage || _this._filteredData.length)) {
+                            _this._messageClass.hide();
+                            if (_this._select.attr("opacity") === "0") _this._select.transition().duration(_this._duration).attr("opacity", 1);
+                        }
+                        if (_this._detectResize && (_this._autoWidth || _this._autoHeight)) {
+                            select(_this._resizeContainer).on("resize.".concat(_this._uuid), function() {
+                                _this._resizePoll = clearTimeout(_this._resizePoll);
+                                _this._resizePoll = setTimeout(function() {
+                                    _this._resizePoll = clearTimeout(_this._resizePoll);
+                                    setSVGSize.bind(_this)();
+                                    _this.render(callback);
+                                }, _this._detectResizeDelay);
+                            });
+                        }
+                        if (callback) setTimeout(callback, _this._duration + 100);
+                    });
+                }
+                // Attaches touchstart event listener to the BODY to hide the tooltip when the user touches any element without data
+                select("body").on("touchstart.".concat(this._uuid), touchstartBody.bind(this));
+                return this;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc If *value* is specified, sets the active method to the specified function and returns the current class instance.
+      @param {Function} [*value*]
+      @chainable
+  */ key: "active",
+            value: function active(_) {
+                this._active = _;
+                if (this._shapeConfig.activeOpacity !== 1) {
+                    this._shapes.forEach(function(s) {
+                        return s.active(_);
+                    });
+                    if (this._legend) this._legendClass.active(_);
+                }
+                return this;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc If *value* is specified, sets the aggregation method for each key in the object and returns the current class instance.
+      @param {Object} [*value*]
+      @chainable
+  */ key: "aggs",
+            value: function aggs(_) {
+                return arguments.length ? (this._aggs = assign(this._aggs, _), this) : this._aggs;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc Sets the "aria-hidden" attribute of the containing SVG element. The default value is "false", but it you need to hide the SVG from screen readers set this property to "true".
+      @param {Boolean} [*value* = true]
+      @chainable
+  */ key: "ariaHidden",
+            value: function ariaHidden(_) {
+                return arguments.length ? (this._ariaHidden = _, this) : this._ariaHidden;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc Sets text to be shown positioned absolute on top of the visualization in the bottom-right corner. This is most often used in Geomaps to display the copyright of map tiles. The text is rendered as HTML, so any valid HTML string will render as expected (eg. anchor links work).
+      @param {HTMLString|Boolean} *value* = false
+      @chainable
+  */ key: "attribution",
+            value: function attribution(_) {
+                return arguments.length ? (this._attribution = _, this) : this._attribution;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc If *value* is specified, sets the config method for the back button and returns the current class instance.
+      @param {Object} [*value*]
+      @chainable
+  */ key: "attributionStyle",
+            value: function attributionStyle(_) {
+                return arguments.length ? (this._attributionStyle = assign(this._attributionStyle, _), this) : this._attributionStyle;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc If *value* is specified, sets the config method for the back button and returns the current class instance.
+      @param {Object} [*value*]
+      @chainable
+  */ key: "backConfig",
+            value: function backConfig(_) {
+                return arguments.length ? (this._backConfig = assign(this._backConfig, _), this) : this._backConfig;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc Enables a lru cache that stores up to 5 previously loaded files/URLs. Helpful when constantly writing over the data array with a URL in the render function of a react component.
+      @param {Boolean} [*value* = false]
+      @chainable
+  */ key: "cache",
+            value: function cache(_) {
+                return arguments.length ? (this._cache = _, this) : this._cache;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc Defines the main color to be used for each data point in a visualization. Can be either an accessor function or a string key to reference in each data point. If a color value is returned, it will be used as is. If a string is returned, a unique color will be assigned based on the string.
+      @param {Function|String|False} [*value*]
+      @chainable
+  */ key: "color",
+            value: function color(_) {
+                return arguments.length ? (this._color = !_ || typeof _ === "function" ? _ : accessor(_), this) : this._color;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc Defines the value to be used for a color scale. Can be either an accessor function or a string key to reference in each data point.
+      @param {Function|String|False} [*value*]
+      @chainable
+  */ key: "colorScale",
+            value: function colorScale(_) {
+                return arguments.length ? (this._colorScale = !_ || typeof _ === "function" ? _ : accessor(_), this) : this._colorScale;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc A pass-through to the config method of ColorScale.
+      @param {Object} [*value*]
+      @chainable
+  */ key: "colorScaleConfig",
+            value: function colorScaleConfig(_) {
+                return arguments.length ? (this._colorScaleConfig = assign(this._colorScaleConfig, _), this) : this._colorScaleConfig;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc Tells the colorScale whether or not to use the internal padding defined by the visualization in it's positioning. For example, d3plus-plot will add padding on the left so that the colorScale appears centered above the x-axis. By default, this padding is only applied on screens larger than 600 pixels wide.
+      @param {Boolean|Function} [*value*]
+      @chainable
+  */ key: "colorScalePadding",
+            value: function colorScalePadding(_) {
+                return arguments.length ? (this._colorScalePadding = typeof _ === "function" ? _ : constant(_), this) : this._colorScalePadding;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc Defines which side of the visualization to anchor the color scale. Acceptable values are `"top"`, `"bottom"`, `"left"`, `"right"`, and `false`. A `false` value will cause the color scale to not be displayed, but will still color shapes based on the scale.
+      @param {Function|String|Boolean} [*value* = "bottom"]
+      @chainable
+  */ key: "colorScalePosition",
+            value: function colorScalePosition(_) {
+                return arguments.length ? (this._colorScalePosition = typeof _ === "function" ? _ : constant(_), this) : this._colorScalePosition;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc Sets the maximum pixel size for drawing the color scale: width for horizontal scales and height for vertical scales.
+      @param {Number} [*value* = 600]
+      @chainable
+  */ key: "colorScaleMaxSize",
+            value: function colorScaleMaxSize(_) {
+                return arguments.length ? (this._colorScaleMaxSize = _, this) : this._colorScaleMaxSize;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc Sets the primary data array to be used when drawing the visualization. The value passed should be an *Array* of objects or a *String* representing a filepath or URL to be loaded. The following filetypes are supported: `csv`, `tsv`, `txt`, and `json`.
+
+If your data URL needs specific headers to be set, an Object with "url" and "headers" keys may also be passed.
+
+Additionally, a custom formatting function can be passed as a second argument to this method. This custom function will be passed the data that has been loaded, as long as there are no errors. This function should return the final array of obejcts to be used as the primary data array. For example, some JSON APIs return the headers split from the data values to save bandwidth. These would need be joined using a custom formatter.
+
+If you would like to specify certain configuration options based on the yet-to-be-loaded data, you can also return a full `config` object from the data formatter (including the new `data` array as a key in the object).
+
+If *data* is not specified, this method returns the current primary data array, which defaults to an empty array (`[]`);
+      @param {Array|String} *data* = []
+      @param {Function} [*formatter*]
+      @chainable
+  */ key: "data",
+            value: function data(_, f) {
+                if (arguments.length) {
+                    addToQueue.bind(this)(_, f, "data");
+                    this._hidden = [];
+                    this._solo = [];
+                    if (this._userData && JSON.stringify(_) !== JSON.stringify(this._userData)) {
+                        this._timeFilter = false;
+                        this._timelineSelection = false;
+                    }
+                    this._userData = _;
+                    return this;
+                }
+                return this._data;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc If the number of visible data points exceeds this number, the default hover behavior will be disabled (helpful for very large visualizations bogging down the DOM with opacity updates).
+      @param {Number} [*value* = 100]
+      @chainable
+  */ key: "dataCutoff",
+            value: function dataCutoff(_) {
+                return arguments.length ? (this._dataCutoff = _, this) : this._dataCutoff;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc If *value* is specified, sets the depth to the specified number and returns the current class instance. The *value* should correspond with an index in the [groupBy](#groupBy) array.
+      @param {Number} [*value*]
+      @chainable
+  */ key: "depth",
+            value: function depth(_) {
+                return arguments.length ? (this._depth = _, this) : this._depth;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc If the width and/or height of a Viz is not user-defined, it is determined by the size of it's parent element. When this method is set to `true`, the Viz will listen for the `window.onresize` event and adjust it's dimensions accordingly.
+      @param {Boolean} *value* = true
+      @chainable
+  */ key: "detectResize",
+            value: function detectResize(_) {
+                return arguments.length ? (this._detectResize = _, this) : this._detectResize;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc When resizing the browser window, this is the millisecond delay to trigger the resize event.
+      @param {Number} *value* = 400
+      @chainable
+  */ key: "detectResizeDelay",
+            value: function detectResizeDelay(_) {
+                return arguments.length ? (this._detectResizeDelay = _, this) : this._detectResizeDelay;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc Toggles whether or not the Viz should try to detect if it visible in the current viewport. When this method is set to `true`, the Viz will only be rendered when it has entered the viewport either through scrolling or if it's display or visibility is changed.
+      @param {Boolean} *value* = true
+      @chainable
+  */ key: "detectVisible",
+            value: function detectVisible(_) {
+                return arguments.length ? (this._detectVisible = _, this) : this._detectVisible;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc The interval, in milliseconds, for checking if the visualization is visible on the page.
+      @param {Number} *value* = 1000
+      @chainable
+  */ key: "detectVisibleInterval",
+            value: function detectVisibleInterval(_) {
+                return arguments.length ? (this._detectVisibleInterval = _, this) : this._detectVisibleInterval;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc If *value* is specified, sets the discrete accessor to the specified method name (usually an axis) and returns the current class instance.
+      @param {String} [*value*]
+      @chainable
+  */ key: "discrete",
+            value: function discrete(_) {
+                return arguments.length ? (this._discrete = _, this) : this._discrete;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc Shows a button that allows for downloading the current visualization.
+      @param {Boolean} [*value* = false]
+      @chainable
+  */ key: "downloadButton",
+            value: function downloadButton(_) {
+                return arguments.length ? (this._downloadButton = _, this) : this._downloadButton;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc Sets specific options of the saveElement function used when downloading the visualization.
+      @param {Object} [*value* = {type: "png"}]
+      @chainable
+  */ key: "downloadConfig",
+            value: function downloadConfig(_) {
+                return arguments.length ? (this._downloadConfig = assign(this._downloadConfig, _), this) : this._downloadConfig;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc Defines which control group to add the download button into.
+      @param {String} [*value* = "top"]
+      @chainable
+  */ key: "downloadPosition",
+            value: function downloadPosition(_) {
+                return arguments.length ? (this._downloadPosition = _, this) : this._downloadPosition;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc If *ms* is specified, sets the animation duration to the specified number and returns the current class instance. If *ms* is not specified, returns the current animation duration.
+      @param {Number} [*ms* = 600]
+      @chainable
+  */ key: "duration",
+            value: function duration(_) {
+                return arguments.length ? (this._duration = _, this) : this._duration;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc If *value* is specified, sets the filter to the specified function and returns the current class instance.
+      @param {Function} [*value*]
+      @chainable
+  */ key: "filter",
+            value: function filter(_) {
+                return arguments.length ? (this._filter = _, this) : this._filter;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc If *value* is specified, sets the filter to the specified function and returns the current class instance.
+      @param {Function} [*value*]
+      @chainable
+  */ key: "fontFamily",
+            value: function fontFamily(_) {
+                var _this = this;
+                if (arguments.length) {
+                    var labelConfig = {
+                        fontFamily: _
+                    };
+                    var axisConfig = {
+                        titleConfig: labelConfig,
+                        shapeConfig: {
+                            labelConfig: labelConfig
+                        }
+                    };
+                    this.shapeConfig({
+                        labelConfig: labelConfig
+                    });
+                    this.colorScaleConfig({
+                        axisConfig: axisConfig
+                    });
+                    [
+                        "axis",
+                        "column",
+                        "row",
+                        "timeline",
+                        "x",
+                        "y",
+                        "x2",
+                        "y2"
+                    ].forEach(function(axis) {
+                        var method = "".concat(axis, "Config");
+                        if (_this[method]) _this[method](axisConfig);
+                    });
+                    [
+                        "back",
+                        "title",
+                        "total",
+                        "subtitle"
+                    ].forEach(function(label) {
+                        var method = "".concat(label, "Config");
+                        if (_this[method]) _this[method](labelConfig);
+                    });
+                    this.tooltipConfig({
+                        tooltipStyle: {
+                            "font-family": fontFamilyStringify(_)
+                        }
+                    });
+                    this._fontFamily = _;
+                    return this;
+                }
+                return this._fontFamily;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc If *value* is specified, sets the group accessor(s) to the specified string, function, or array of values and returns the current class instance.
+      @param {String|Function|Array} [*value*]
+      @chainable
+      @example
+function value(d) {
+  return d.id;
+}
+  */ key: "groupBy",
+            value: function groupBy(_) {
+                var _this = this;
+                if (!arguments.length) return this._groupBy;
+                this._groupByRaw = _;
+                if (!_instanceof(_, Array)) _ = [
+                    _
+                ];
+                return this._groupBy = _.map(function(k) {
+                    if (typeof k === "function") return k;
+                    else {
+                        if (!_this._aggs[k]) {
+                            _this._aggs[k] = function(a, c) {
+                                var v = unique(a.map(c).map(String));
+                                return v.length === 1 ? v[0] : v;
+                            };
+                        }
+                        return accessor(k);
+                    }
+                }), this;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc If *value* is specified, sets the overall height to the specified number and returns the current class instance.
+      @param {Number} [*value* = window.innerHeight]
+      @chainable
+  */ key: "height",
+            value: function height(_) {
+                return arguments.length ? (this._height = _, this) : this._height;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc Defines the color used for legend shapes when the corresponding grouping is hidden from display (by clicking on the legend).
+      @param {Function|String} [*value* = "#aaa"]
+      @chainable
+  */ key: "hiddenColor",
+            value: function hiddenColor(_) {
+                return arguments.length ? (this._hiddenColor = typeof _ === "function" ? _ : constant(_), this) : this._hiddenColor;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc Defines the opacity used for legend labels when the corresponding grouping is hidden from display (by clicking on the legend).
+      @param {Function|Number} [*value* = 0.5]
+      @chainable
+  */ key: "hiddenOpacity",
+            value: function hiddenOpacity(_) {
+                return arguments.length ? (this._hiddenOpacity = typeof _ === "function" ? _ : constant(_), this) : this._hiddenOpacity;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc If *value* is specified, sets the hover method to the specified function and returns the current class instance.
+      @param {Function} [*value*]
+      @chainable
+  */ key: "hover",
+            value: function hover(_) {
+                var _this = this;
+                var hoverFunction = this._hover = _;
+                if (this._shapeConfig.hoverOpacity !== 1) {
+                    if (typeof _ === "function") {
+                        var shapeData = arrayMerge(this._shapes.map(function(s) {
+                            return s.data();
+                        }));
+                        shapeData = shapeData.concat(this._legendClass.data());
+                        var activeData = _ ? shapeData.filter(_) : [];
+                        var activeIds = [];
+                        activeData.map(this._ids).forEach(function(ids) {
+                            for(var x = 1; x <= ids.length; x++){
+                                activeIds.push(JSON.stringify(ids.slice(0, x)));
+                            }
+                        });
+                        activeIds = activeIds.filter(function(id, i) {
+                            return activeIds.indexOf(id) === i;
+                        });
+                        if (activeIds.length) hoverFunction = function(d, i) {
+                            return activeIds.includes(JSON.stringify(_this._ids(d, i)));
+                        };
+                    }
+                    this._shapes.forEach(function(s) {
+                        return s.hover(hoverFunction);
+                    });
+                    if (this._legend) this._legendClass.hover(hoverFunction);
+                }
+                return this;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc If *value* is specified, sets the label accessor to the specified function or string and returns the current class instance.
+      @param {Function|String} [*value*]
+      @chainable
+  */ key: "label",
+            value: function label(_) {
+                return arguments.length ? (this._label = typeof _ === "function" ? _ : constant(_), this) : this._label;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc If *value* is specified, toggles the legend based on the specified boolean and returns the current class instance.
+      @param {Boolean|Function} [*value* = true]
+      @chainable
+  */ key: "legend",
+            value: function legend(_) {
+                return arguments.length ? (this._legend = typeof _ === "function" ? _ : constant(_), this) : this._legend;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc If *value* is specified, the object is passed to the legend's config method.
+      @param {Object} [*value*]
+      @chainable
+  */ key: "legendConfig",
+            value: function legendConfig(_) {
+                return arguments.length ? (this._legendConfig = assign(this._legendConfig, _), this) : this._legendConfig;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc Defines the click functionality of categorical legend squares. When set to false, clicking will hide that category and shift+clicking will solo that category. When set to true, clicking with solo that category and shift+clicking will hide that category.
+      @param {Boolean|Function} [*value* = false]
+      @chainable
+  */ key: "legendFilterInvert",
+            value: function legendFilterInvert(_) {
+                return arguments.length ? (this._legendFilterInvert = typeof _ === "function" ? _ : constant(_), this) : this._legendFilterInvert;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc Tells the legend whether or not to use the internal padding defined by the visualization in it's positioning. For example, d3plus-plot will add padding on the left so that the legend appears centered underneath the x-axis. By default, this padding is only applied on screens larger than 600 pixels wide.
+      @param {Boolean|Function} [*value*]
+      @chainable
+  */ key: "legendPadding",
+            value: function legendPadding(_) {
+                return arguments.length ? (this._legendPadding = typeof _ === "function" ? _ : constant(_), this) : this._legendPadding;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc Defines which side of the visualization to anchor the legend. Expected values are `"top"`, `"bottom"`, `"left"`, and `"right"`.
+      @param {Function|String} [*value* = "bottom"]
+      @chainable
+  */ key: "legendPosition",
+            value: function legendPosition(_) {
+                return arguments.length ? (this._legendPosition = typeof _ === "function" ? _ : constant(_), this) : this._legendPosition;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc A JavaScript [sort comparator function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) used to sort the legend.
+      @param {Function} *value*
+      @chainable
+  */ key: "legendSort",
+            value: function legendSort(_) {
+                return arguments.length ? (this._legendSort = _, this) : this._legendSort;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc If *value* is specified, sets the config method for the legend tooltip and returns the current class instance.
+      @param {Object} [*value* = {}]
+      @chainable
+  */ key: "legendTooltip",
+            value: function legendTooltip(_) {
+                return arguments.length ? (this._legendTooltip = assign(this._legendTooltip, _), this) : this._legendTooltip;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc Sets the inner HTML of the status message that is displayed when loading AJAX requests and displaying errors. Must be a valid HTML string or a function that, when passed this Viz instance, returns a valid HTML string.
+      @param {Function|String} [*value*]
+      @chainable
+  */ key: "loadingHTML",
+            value: function loadingHTML(_) {
+                return arguments.length ? (this._loadingHTML = typeof _ === "function" ? _ : constant(_), this) : this._loadingHTML;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc Toggles the visibility of the status message that is displayed when loading AJAX requests and displaying errors.
+      @param {Boolean} [*value* = true]
+      @chainable
+  */ key: "loadingMessage",
+            value: function loadingMessage(_) {
+                return arguments.length ? (this._loadingMessage = _, this) : this._loadingMessage;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc Sets the color of the mask used underneath the status message that is displayed when loading AJAX requests and displaying errors. Additionally, `false` will turn off the mask completely.
+      @param {Boolean|String} [*value* = "rgba(0, 0, 0, 0.1)"]
+      @chainable
+  */ key: "messageMask",
+            value: function messageMask(_) {
+                return arguments.length ? (this._messageMask = _, this) : this._messageMask;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc Defines the CSS style properties for the status message that is displayed when loading AJAX requests and displaying errors.
+      @param {Object} [*value*]
+      @chainable
+  */ key: "messageStyle",
+            value: function messageStyle(_) {
+                return arguments.length ? (this._messageStyle = assign(this._messageStyle, _), this) : this._messageStyle;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc Sets the inner HTML of the status message that is displayed when no data is supplied to the visualization. Must be a valid HTML string or a function that, when passed this Viz instance, returns a valid HTML string.
+      @param {Function|String} [*value*]
+      @chainable
+  */ key: "noDataHTML",
+            value: function noDataHTML(_) {
+                return arguments.length ? (this._noDataHTML = typeof _ === "function" ? _ : constant(_), this) : this._noDataHTML;
+            }
+        },
+        {
+            /**
+     @memberof Viz
+     @desc Toggles the visibility of the status message that is displayed when no data is supplied to the visualization.
+     @param {Boolean} [*value* = true]
+     @chainable
+  */ key: "noDataMessage",
+            value: function noDataMessage(_) {
+                return arguments.length ? (this._noDataMessage = _, this) : this._noDataMessage;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc If using resize detection, this method allow a custom override of the element to which the resize detection function gets attached.
+      @param {String|HTMLElement} *selector*
+      @chainable
+  */ key: "resizeContainer",
+            value: function resizeContainer(_) {
+                return arguments.length ? (this._resizeContainer = _, this) : this._resizeContainer;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc If using scroll or visibility detection, this method allow a custom override of the element to which the scroll detection function gets attached.
+      @param {String|HTMLElement} *selector*
+      @chainable
+  */ key: "scrollContainer",
+            value: function scrollContainer(_) {
+                return arguments.length ? (this._scrollContainer = _, this) : this._scrollContainer;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc If *selector* is specified, sets the SVG container element to the specified d3 selector or DOM element and returns the current class instance. If *selector* is not specified, returns the current SVG container element, which is `undefined` by default.
+      @param {String|HTMLElement} [*selector*]
+      @chainable
+  */ key: "select",
+            value: function select1(_) {
+                return arguments.length ? (this._select = select(_), this) : this._select;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc If *value* is specified, sets the shape accessor to the specified function or number and returns the current class instance.
+      @param {Function|String} [*value*]
+      @chainable
+  */ key: "shape",
+            value: function shape(_) {
+                return arguments.length ? (this._shape = typeof _ === "function" ? _ : constant(_), this) : this._shape;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc If *value* is specified, sets the config method for each shape and returns the current class instance.
+      @param {Object} [*value*]
+      @chainable
+  */ key: "shapeConfig",
+            value: function shapeConfig(_) {
+                return arguments.length ? (this._shapeConfig = assign(this._shapeConfig, _), this) : this._shapeConfig;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc If *value* is specified, sets the subtitle accessor to the specified function or string and returns the current class instance.
+      @param {Function|String} [*value*]
+      @chainable
+  */ key: "subtitle",
+            value: function subtitle(_) {
+                return arguments.length ? (this._subtitle = typeof _ === "function" ? _ : constant(_), this) : this._subtitle;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc If *value* is specified, sets the config method for the subtitle and returns the current class instance.
+      @param {Object} [*value*]
+      @chainable
+  */ key: "subtitleConfig",
+            value: function subtitleConfig(_) {
+                return arguments.length ? (this._subtitleConfig = assign(this._subtitleConfig, _), this) : this._subtitleConfig;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc Tells the subtitle whether or not to use the internal padding defined by the visualization in it's positioning. For example, d3plus-plot will add padding on the left so that the subtitle appears centered above the x-axis. By default, this padding is only applied on screens larger than 600 pixels wide.
+      @param {Boolean|Function} [*value*]
+      @chainable
+  */ key: "subtitlePadding",
+            value: function subtitlePadding(_) {
+                return arguments.length ? (this._subtitlePadding = typeof _ === "function" ? _ : constant(_), this) : this._subtitlePadding;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc If *value* is specified, sets the description accessor to the specified string and returns the current class instance.
+      @param {String} [*value*]
+      @chainable
+  */ key: "svgDesc",
+            value: function svgDesc(_) {
+                return arguments.length ? (this._svgDesc = _, this) : this._svgDesc;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc If *value* is specified, sets the title accessor to the specified string and returns the current class instance.
+      @param {String} [*value*]
+      @chainable
+  */ key: "svgTitle",
+            value: function svgTitle(_) {
+                return arguments.length ? (this._svgTitle = _, this) : this._svgTitle;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc If *value* is specified, sets the threshold for buckets to the specified function or string, and returns the current class instance.
+      @param {Function|Number} [value]
+      @chainable
+   */ key: "threshold",
+            value: function threshold(_) {
+                if (arguments.length) {
+                    if (typeof _ === "function") {
+                        this._threshold = _;
+                    } else if (isFinite(_) && !isNaN(_)) {
+                        this._threshold = constant(_ * 1);
+                    }
+                    return this;
+                } else return this._threshold;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc If *value* is specified, sets the accesor for the value used in the threshold algorithm, and returns the current class instance.
+      @param {Function|Number} [value]
+      @chainable
+   */ key: "thresholdKey",
+            value: function thresholdKey(key) {
+                if (arguments.length) {
+                    if (typeof key === "function") {
+                        this._thresholdKey = key;
+                    } else {
+                        this._thresholdKey = accessor(key);
+                    }
+                    return this;
+                } else return this._thresholdKey;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc If *value* is specified, sets the label for the bucket item, and returns the current class instance.
+      @param {Function|String} [value]
+      @chainable
+   */ key: "thresholdName",
+            value: function thresholdName(_) {
+                return arguments.length ? (this._thresholdName = typeof _ === "function" ? _ : constant(_), this) : this._thresholdName;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc If *value* is specified, sets the time accessor to the specified function or string and returns the current class instance.
+      @param {Function|String} [*value*]
+      @chainable
+  */ key: "time",
+            value: function time(_) {
+                if (arguments.length) {
+                    if (typeof _ === "function") {
+                        this._time = _;
+                    } else {
+                        this._time = accessor(_);
+                        if (!this._aggs[_]) {
+                            this._aggs[_] = function(a, c) {
+                                var v = unique(a.map(c));
+                                return v.length === 1 ? v[0] : v;
+                            };
+                        }
+                        if (this._userTime && JSON.stringify(_) !== JSON.stringify(this._userTime)) {
+                            this._timeFilter = false;
+                            this._timelineSelection = false;
+                        }
+                        this._userTime = _;
+                    }
+                    return this;
+                } else return this._time;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc If *value* is specified, sets the time filter to the specified function and returns the current class instance.
+      @param {Function} [*value*]
+      @chainable
+  */ key: "timeFilter",
+            value: function timeFilter(_) {
+                return arguments.length ? (this._timeFilter = _, this) : this._timeFilter;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc If *value* is specified, toggles the timeline based on the specified boolean and returns the current class instance.
+      @param {Boolean} [*value* = true]
+      @chainable
+  */ key: "timeline",
+            value: function timeline(_) {
+                return arguments.length ? (this._timeline = _, this) : this._timeline;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc If *value* is specified, sets the config method for the timeline and returns the current class instance.
+      @param {Object} [*value*]
+      @chainable
+  */ key: "timelineConfig",
+            value: function timelineConfig(_) {
+                return arguments.length ? (this._timelineConfig = assign(this._timelineConfig, _), this) : this._timelineConfig;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc Sets the starting time or range for the timeline. The value provided can either be a single Date/String, or an Array of 2 values representing the min and max.
+      @param {Date|String|Array} [*value*]
+      @chainable
+  */ key: "timelineDefault",
+            value: function timelineDefault(_) {
+                if (arguments.length) {
+                    if (!_instanceof(_, Array)) _ = [
+                        _,
+                        _
+                    ];
+                    this._timelineDefault = _.map(date);
+                    return this;
+                } else return this._timelineDefault;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc Tells the timeline whether or not to use the internal padding defined by the visualization in it's positioning. For example, d3plus-plot will add padding on the left so that the timeline appears centered underneath the x-axis. By default, this padding is only applied on screens larger than 600 pixels wide.
+      @param {Boolean|Function} [*value*]
+      @chainable
+  */ key: "timelinePadding",
+            value: function timelinePadding(_) {
+                return arguments.length ? (this._timelinePadding = typeof _ === "function" ? _ : constant(_), this) : this._timelinePadding;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc If *value* is specified, sets the title accessor to the specified function or string and returns the current class instance.
+      @param {Function|String} [*value*]
+      @chainable
+  */ key: "title",
+            value: function title(_) {
+                return arguments.length ? (this._title = typeof _ === "function" ? _ : constant(_), this) : this._title;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc If *value* is specified, sets the config method for the title and returns the current class instance.
+      @param {Object} [*value*]
+      @chainable
+  */ key: "titleConfig",
+            value: function titleConfig(_) {
+                return arguments.length ? (this._titleConfig = assign(this._titleConfig, _), this) : this._titleConfig;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc Tells the title whether or not to use the internal padding defined by the visualization in it's positioning. For example, d3plus-plot will add padding on the left so that the title appears centered above the x-axis. By default, this padding is only applied on screens larger than 600 pixels wide.
+      @param {Boolean|Function} [*value*]
+      @chainable
+  */ key: "titlePadding",
+            value: function titlePadding(_) {
+                return arguments.length ? (this._titlePadding = typeof _ === "function" ? _ : constant(_), this) : this._titlePadding;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc If *value* is specified, toggles the tooltip based on the specified boolean and returns the current class instance.
+      @param {Boolean|Function} [*value* = true]
+      @chainable
+  */ key: "tooltip",
+            value: function tooltip(_) {
+                return arguments.length ? (this._tooltip = typeof _ === "function" ? _ : constant(_), this) : this._tooltip;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc If *value* is specified, sets the config method for the tooltip and returns the current class instance.
+      @param {Object} [*value*]
+      @chainable
+  */ key: "tooltipConfig",
+            value: function tooltipConfig(_) {
+                return arguments.length ? (this._tooltipConfig = assign(this._tooltipConfig, _), this) : this._tooltipConfig;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc If *value* is specified, sets the total accessor to the specified function or string and returns the current class instance.
+      @param {Boolean|Function|String} [*value*]
+      @chainable
+  */ key: "total",
+            value: function total(_) {
+                if (arguments.length) {
+                    if (typeof _ === "function") this._total = _;
+                    else if (_) this._total = accessor(_);
+                    else this._total = false;
+                    return this;
+                } else return this._total;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc If *value* is specified, sets the config method for the total and returns the current class instance.
+      @param {Object} [*value*]
+      @chainable
+  */ key: "totalConfig",
+            value: function totalConfig(_) {
+                return arguments.length ? (this._totalConfig = assign(this._totalConfig, _), this) : this._totalConfig;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc Formatter function for the value in the total bar.
+      @param {Function} *value*
+      @chainable
+  */ key: "totalFormat",
+            value: function totalFormat(_) {
+                return arguments.length ? (this._totalFormat = _, this) : this._totalFormat;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc Tells the total whether or not to use the internal padding defined by the visualization in it's positioning. For example, d3plus-plot will add padding on the left so that the total appears centered above the x-axis. By default, this padding is only applied on screens larger than 600 pixels wide.
+      @param {Boolean|Function} [*value*]
+      @chainable
+  */ key: "totalPadding",
+            value: function totalPadding(_) {
+                return arguments.length ? (this._totalPadding = typeof _ === "function" ? _ : constant(_), this) : this._totalPadding;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc If *value* is specified, sets the overallwidth to the specified number and returns the current class instance.
+      @param {Number} [*value* = window.innerWidth]
+      @chainable
+  */ key: "width",
+            value: function width(_) {
+                return arguments.length ? (this._width = _, this) : this._width;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc Toggles the ability to zoom/pan the visualization. Certain parameters for zooming are required to be hooked up on a visualization by visualization basis.
+      @param {Boolean} *value* = false
+      @chainable
+  */ key: "zoom",
+            value: function zoom(_) {
+                return arguments.length ? (this._zoom = _, this) : this._zoom;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc The pixel stroke-width of the zoom brush area.
+      @param {Number} *value* = 1
+      @chainable
+  */ key: "zoomBrushHandleSize",
+            value: function zoomBrushHandleSize(_) {
+                return arguments.length ? (this._zoomBrushHandleSize = _, this) : this._zoomBrushHandleSize;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc An object containing CSS key/value pairs that is used to style the outer handle area of the zoom brush. Passing `false` will remove all default styling.
+      @param {Object|Boolean} *value*
+      @chainable
+  */ key: "zoomBrushHandleStyle",
+            value: function zoomBrushHandleStyle(_) {
+                return arguments.length ? (this._zoomBrushHandleStyle = _, this) : this._zoomBrushHandleStyle;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc An object containing CSS key/value pairs that is used to style the inner selection area of the zoom brush. Passing `false` will remove all default styling.
+      @param {Object|Boolean} *value*
+      @chainable
+  */ key: "zoomBrushSelectionStyle",
+            value: function zoomBrushSelectionStyle(_) {
+                return arguments.length ? (this._zoomBrushSelectionStyle = _, this) : this._zoomBrushSelectionStyle;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc An object containing CSS key/value pairs that is used to style each zoom control button (`.zoom-in`, `.zoom-out`, `.zoom-reset`, and `.zoom-brush`). Passing `false` will remove all default styling.
+      @param {Object|Boolean} *value*
+      @chainable
+  */ key: "zoomControlStyle",
+            value: function zoomControlStyle(_) {
+                return arguments.length ? (this._zoomControlStyle = _, this) : this._zoomControlStyle;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc An object containing CSS key/value pairs that is used to style each zoom control button when active (`.zoom-in`, `.zoom-out`, `.zoom-reset`, and `.zoom-brush`). Passing `false` will remove all default styling.
+      @param {Object|Boolean} *value*
+      @chainable
+  */ key: "zoomControlStyleActive",
+            value: function zoomControlStyleActive(_) {
+                return arguments.length ? (this._zoomControlStyleActive = _, this) : this._zoomControlStyleActive;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc An object containing CSS key/value pairs that is used to style each zoom control button on hover (`.zoom-in`, `.zoom-out`, `.zoom-reset`, and `.zoom-brush`). Passing `false` will remove all default styling.
+      @param {Object|Boolean} *value*
+      @chainable
+  */ key: "zoomControlStyleHover",
+            value: function zoomControlStyleHover(_) {
+                return arguments.length ? (this._zoomControlStyleHover = _, this) : this._zoomControlStyleHover;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc The multiplier that is used in with the control buttons when zooming in and out.
+      @param {Number} *value* = 2
+      @chainable
+  */ key: "zoomFactor",
+            value: function zoomFactor(_) {
+                return arguments.length ? (this._zoomFactor = _, this) : this._zoomFactor;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc If *value* is specified, sets the max zoom scale to the specified number and returns the current class instance. If *value* is not specified, returns the current max zoom scale.
+      @param {Number} *value* = 16
+      @chainable
+  */ key: "zoomMax",
+            value: function zoomMax(_) {
+                return arguments.length ? (this._zoomMax = _, this) : this._zoomMax;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc If *value* is specified, toggles panning to the specified boolean and returns the current class instance. If *value* is not specified, returns the current panning value.
+      @param {Boolean} *value* = true
+      @chainable
+  */ key: "zoomPan",
+            value: function zoomPan(_) {
+                return arguments.length ? (this._zoomPan = _, this) : this._zoomPan;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc A pixel value to be used to pad all sides of a zoomed area.
+      @param {Number} *value* = 20
+      @chainable
+  */ key: "zoomPadding",
+            value: function zoomPadding(_) {
+                return arguments.length ? (this._zoomPadding = _, this) : this._zoomPadding;
+            }
+        },
+        {
+            /**
+      @memberof Viz
+      @desc If *value* is specified, toggles scroll zooming to the specified boolean and returns the current class instance. If *value* is not specified, returns the current scroll zooming value.
+      @param {Boolean} [*value* = true]
+      @chainable
+  */ key: "zoomScroll",
+            value: function zoomScroll(_) {
+                return arguments.length ? (this._zoomScroll = _, this) : this._zoomScroll;
+            }
+        }
+    ]);
+    return Viz;
+}(BaseClass);
+/**
+    @class Viz
+    @extends BaseClass
+    @desc Creates an x/y plot based on an array of data. If *data* is specified, immediately draws the tree map based on the specified array and returns the current class instance. If *data* is not specified on instantiation, it can be passed/updated after instantiation using the [data](#treemap.data) method. See [this example](https://d3plus.org/examples/d3plus-treemap/getting-started/) for help getting started using the treemap generator.
+*/ export { Viz as default };