@d3plus/core 3.0.16 → 3.1.0

package/es/src/charts/Viz.js

@@ -71,6 +71,7 @@ function _inherits(subClass, superClass) {
     if (superClass) _set_prototype_of(subClass, superClass);
 }
 function _instanceof(left, right) {
+    "@swc/helpers - instanceof";
     if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) {
         return !!right[Symbol.hasInstance](left);
     } else {
@@ -191,18 +192,16 @@ function _is_native_reflect_construct() {
 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 { accessor, BaseClass, constant } from "../utils/index.js";
 // import {Rect} from "../shape/index.js";
 import Message from "../components/Message.js";
 import drawBack from "./drawSteps/drawBack.js";
@@ -221,7 +220,8 @@ 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";
-function debounce(func, delay) {
+function debounce(// eslint-disable-next-line @typescript-eslint/no-explicit-any
+func, delay) {
     var timeout;
     return function() {
         for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
@@ -266,6 +266,41 @@ function debounce(func, delay) {
     }
     return acc(d, i);
 }
+/**
+    Minimal LRU cache backed by a Map (insertion-order iteration enables O(1) eviction).
+    Only .get() and .set() are used by Viz.
+    @private
+*/ var LRU = /*#__PURE__*/ function() {
+    "use strict";
+    function LRU(capacity) {
+        _class_call_check(this, LRU);
+        _define_property(this, "_cap", void 0);
+        _define_property(this, "_map", void 0);
+        this._cap = capacity;
+        this._map = new Map();
+    }
+    _create_class(LRU, [
+        {
+            key: "get",
+            value: function get(key) {
+                if (!this._map.has(key)) return undefined;
+                var val = this._map.get(key);
+                this._map.delete(key);
+                this._map.set(key, val);
+                return val;
+            }
+        },
+        {
+            key: "set",
+            value: function set(key, val) {
+                this._map.delete(key);
+                if (this._map.size >= this._cap) this._map.delete(this._map.keys().next().value);
+                this._map.set(key, val);
+            }
+        }
+    ]);
+    return LRU;
+}();
 var Viz = /*#__PURE__*/ function(BaseClass) {
     "use strict";
     _inherits(Viz, BaseClass);
@@ -276,10 +311,11 @@ var Viz = /*#__PURE__*/ function(BaseClass) {
         _this._aggs = {};
         _this._ariaHidden = true;
         _this._attribution = false;
+        var attributionBg = "rgba(255, 255, 255, 0.75)";
         _this._attributionStyle = {
-            background: "rgba(255, 255, 255, 0.75)",
+            background: attributionBg,
             border: "1px solid rgba(0, 0, 0, 0.25)",
-            color: "rgba(0, 0, 0, 0.75)",
+            color: colorContrast(attributionBg),
             display: "block",
             font: "400 11px/11px ".concat(fontFamilyStringify(fontFamily)),
             margin: "5px",
@@ -288,7 +324,8 @@ var Viz = /*#__PURE__*/ function(BaseClass) {
         };
         _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();
+            else _this.depth(_this._drawDepth - 1).filter(false);
+            _this.render();
         }).on("mousemove", function() {
             return _this._backClass.select().style("cursor", "pointer");
         });
@@ -341,7 +378,7 @@ var Viz = /*#__PURE__*/ function(BaseClass) {
                 var id = _this._groupBy[_this._legendDepth].bind(_this)(d, i);
                 return _instanceof(id, Array) ? id.length : 1;
             });
-            return arr.length > 1 && maxGrouped <= 2;
+            return arr.length > 1 && (maxGrouped !== null && maxGrouped !== void 0 ? maxGrouped : 0) <= 2;
         };
         _this._legendClass = new Legend();
         _this._legendConfig = {
@@ -368,7 +405,7 @@ var Viz = /*#__PURE__*/ function(BaseClass) {
             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._lrucache = new LRU(10);
         _this._messageClass = new Message();
         _this._messageMask = "rgba(0, 0, 0, 0.05)";
         _this._messageStyle = {
@@ -392,18 +429,21 @@ var Viz = /*#__PURE__*/ function(BaseClass) {
             "mousemove.legend": mousemoveLegend.bind(_this)
         };
         _this._queue = [];
-        _this._resizeObserver = new ResizeObserver(debounce(function() {
-            _this._setSVGSize();
-            _this.render(_this._callback);
+        _this._resizeObserver = new ResizeObserver(debounce(function(entries) {
+            var _entries__contentRect = entries[0].contentRect, width = _entries__contentRect.width, height = _entries__contentRect.height;
+            if ((width !== _this._width && _this._autoWidth || height !== _this._height && _this._autoHeight) && width && height) {
+                _this._setSVGSize(width, height);
+                if (!_this._callback) _this.render();
+            }
         }, _this._detectResizeDelay));
         _this._scrollContainer = typeof window === "undefined" ? "" : window;
         _this._shape = constant("Rect");
         _this._shapes = [];
         _this._shapeConfig = {
-            ariaLabel: function(d, i) {
+            ariaLabel: function ariaLabel(d, i) {
                 return _this._drawLabel(d, i);
             },
-            fill: function(d, i) {
+            fill: function fill(d, i) {
                 while(d.__d3plus__ && d.data){
                     d = d.data;
                     i = d.i;
@@ -423,13 +463,13 @@ var Viz = /*#__PURE__*/ function(BaseClass) {
                 return colorAssign(typeof c1 === "string" ? c1 : JSON.stringify(c1), _this._colorDefaults);
             },
             labelConfig: {
-                fontColor: function(d, i) {
+                fontColor: function fontColor(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) {
+            stroke: function stroke(d, i) {
                 var c = typeof _this._shapeConfig.fill === "function" ? _this._shapeConfig.fill(d, i) : _this._shapeConfig.fill;
                 return color(c).darker(0.25);
             },
@@ -498,10 +538,11 @@ var Viz = /*#__PURE__*/ function(BaseClass) {
             fill: "#777",
             "stroke-width": 0
         };
+        var zoomBg = "rgba(255, 255, 255, 0.75)";
         _this._zoomControlStyle = {
-            background: "rgba(255, 255, 255, 0.75)",
+            background: zoomBg,
             border: "1px solid rgba(0, 0, 0, 0.75)",
-            color: "rgba(0, 0, 0, 0.75)",
+            color: colorContrast(zoomBg),
             display: "block",
             font: "900 15px/21px ".concat(fontFamilyStringify(fontFamily)),
             height: "20px",
@@ -511,9 +552,10 @@ var Viz = /*#__PURE__*/ function(BaseClass) {
             "text-align": "center",
             width: "20px"
         };
+        var zoomActiveBg = "rgba(0, 0, 0, 0.75)";
         _this._zoomControlStyleActive = {
-            background: "rgba(0, 0, 0, 0.75)",
-            color: "rgba(255, 255, 255, 0.75)",
+            background: zoomActiveBg,
+            color: colorContrast(zoomActiveBg),
             opacity: 1
         };
         _this._zoomControlStyleHover = {
@@ -530,8 +572,7 @@ var Viz = /*#__PURE__*/ function(BaseClass) {
     _create_class(Viz, [
         {
             /**
-   @memberof Viz
-   @desc Called by draw before anything is drawn. Formats the data and performs preparations for draw.
+   Called by draw before anything is drawn. Formats the data and performs preparations for draw.
    @private
    */ key: "_preDraw",
             value: function _preDraw() {
@@ -636,8 +677,7 @@ var Viz = /*#__PURE__*/ function(BaseClass) {
         },
         {
             /**
-      @memberof Viz
-      @desc Called by render once all checks are passed.
+      Called by render once all checks are passed.
       @private
   */ key: "_draw",
             value: function _draw() {
@@ -660,7 +700,7 @@ var Viz = /*#__PURE__*/ function(BaseClass) {
                 ].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);
+                if (colorScalePosition === "left" || colorScalePosition === "right" || colorScalePosition === false) drawColorScale.bind(this)();
                 // Draws all of the top/bottom UI elements
                 drawBack.bind(this)();
                 drawTitle.bind(this)(this._filteredData);
@@ -669,7 +709,7 @@ var Viz = /*#__PURE__*/ function(BaseClass) {
                 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);
+                if (colorScalePosition === "top" || colorScalePosition === "bottom") drawColorScale.bind(this)();
                 this._shapes = [];
             // Draws a container and zoomGroup to test functionality.
             // this._testGroup = this._select.selectAll("g.d3plus-viz-testGroup").data([0]);
@@ -726,7 +766,7 @@ var Viz = /*#__PURE__*/ function(BaseClass) {
    * @param {Array} data The data to process.
    * @private
    */ key: "_thresholdFunction",
-            value: function _thresholdFunction(data) {
+            value: function _thresholdFunction(data, _tree) {
                 return data;
             }
         },
@@ -735,20 +775,20 @@ var Viz = /*#__PURE__*/ function(BaseClass) {
    * Detects width and height and sets SVG properties
    * @private
    */ key: "_setSVGSize",
-            value: 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) {
+            value: function _setSVGSize(width, height) {
+                var _ref = _sliced_to_array(width && height ? [
+                    width,
+                    height
+                ] : getSize(this._select.node().parentNode), 2), w = _ref[0], h = _ref[1];
+                w -= parseFloat(this._select.style("border-left-width"));
+                w -= parseFloat(this._select.style("border-right-width"));
+                h -= parseFloat(this._select.style("border-top-width"));
+                h -= parseFloat(this._select.style("border-bottom-width"));
+                if (this._autoWidth && this._width !== w) {
                     this.width(w);
                     this._select.style("width", "".concat(this._width, "px")).attr("width", "".concat(this._width, "px"));
                 }
-                if (this._autoHeight) {
+                if (this._autoHeight && this._height !== h) {
                     this.height(h);
                     this._select.style("height", "".concat(this._height, "px")).attr("height", "".concat(this._height, "px"));
                 }
@@ -756,10 +796,8 @@ var Viz = /*#__PURE__*/ function(BaseClass) {
         },
         {
             /**
-      @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
+      Draws the visualization given the specified configuration.
+    @param callback Optional callback invoked after rendering completes.
   */ key: "render",
             value: function render(callback) {
                 var _this = this;
@@ -779,7 +817,7 @@ var Viz = /*#__PURE__*/ function(BaseClass) {
                 };
                 // 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 parent = this._select === void 0 ? select("body").insert("div", "#d3plus-portal").style("height", "100dvh").style("width", "100%").style("min-height", "150px") : this._select;
                     var svg = parent.select(".d3plus-viz").size() ? parent.select(".d3plus-viz") : parent.append("svg");
                     this.select(svg.node());
                 }
@@ -789,9 +827,9 @@ var Viz = /*#__PURE__*/ function(BaseClass) {
                     this._autoHeight = this._height === undefined;
                     this._setSVGSize();
                 }
-                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);
+                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").style("position", "absolute").style("top", parent1.style("padding-top")).style("left", parent1.style("padding-left")).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 position = parent1.style("position");
                 if (position === "static") parent1.style("position", "relative");
                 parent1.style("font-family", fontFamilyStringify(this._fontFamily));
@@ -840,15 +878,20 @@ var Viz = /*#__PURE__*/ function(BaseClass) {
                         }
                     });
                 } else {
-                    var q = queue();
+                    var promises = [];
                     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;
+                        if (!cache) {
+                            promises.push(new Promise(function(resolve) {
+                                p[0](p[1], p[2], p[3], function(err) {
+                                    if (err) console.error(err);
+                                    resolve();
+                                });
+                            }));
+                        } else _this["_".concat(p[3])] = p[2] ? p[2](cache) : cache;
                     });
                     this._queue = [];
-                    if (this._loadingMessage && q._tasks.length) {
+                    if (this._loadingMessage && promises.length) {
                         this._messageClass.render({
                             container: this._select.node().parentNode,
                             html: this._loadingHTML(this),
@@ -856,7 +899,7 @@ var Viz = /*#__PURE__*/ function(BaseClass) {
                             style: this._messageStyle
                         });
                     }
-                    q.awaitAll(function() {
+                    Promise.all(promises).then(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]) : [];
@@ -883,7 +926,7 @@ var Viz = /*#__PURE__*/ function(BaseClass) {
                         });
                         // finishes the draw cycle
                         _this._preDraw();
-                        _this._draw(callback);
+                        _this._draw();
                         zoomControls.bind(_this)();
                         drawAttribution.bind(_this)();
                         if (_this._messageClass._isVisible && (!_this._noDataMessage || _this._filteredData.length)) {
@@ -895,7 +938,10 @@ var Viz = /*#__PURE__*/ function(BaseClass) {
                         } else {
                             _this._resizeObserver.unobserve(_this._select.node().parentNode);
                         }
-                        if (callback) setTimeout(callback, _this._duration + 100);
+                        if (callback) setTimeout(function() {
+                            callback();
+                            _this._callback = undefined;
+                        }, _this._duration + 100);
                     });
                 }
                 // Attaches touchstart event listener to the BODY to hide the tooltip when the user touches any element without data
@@ -905,11 +951,19 @@ var Viz = /*#__PURE__*/ function(BaseClass) {
         },
         {
             /**
-      @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",
+      Tears down the visualization: disconnects the ResizeObserver and removes DOM event listeners. Call this when unmounting to avoid memory leaks.
+  */ key: "destroy",
+            value: function destroy() {
+                this._resizeObserver.disconnect();
+                this._tooltipClass.data([]).render();
+                select("body").on("touchstart.".concat(this._uuid), null);
+                return this;
+            }
+        },
+        {
+            /**
+      The active callback function for highlighting shapes.
+*/ key: "active",
             value: function active(_) {
                 this._active = _;
                 if (this._shapeConfig.activeOpacity !== 1) {
@@ -923,140 +977,103 @@ var Viz = /*#__PURE__*/ function(BaseClass) {
         },
         {
             /**
-      @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",
+      Custom aggregation methods for each data key.
+*/ 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",
+      The "aria-hidden" attribute of the containing SVG element. The default value is "false", but if you need to hide the SVG from screen readers set this property to "true".
+*/ 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",
+      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).
+*/ 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",
+      Configuration object for the attribution style.
+*/ 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",
+      Configuration object for the back button.
+*/ 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",
+      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.
+*/ 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",
+      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.
+*/ 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",
+      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.
+*/ 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",
+      A pass-through to the config method of ColorScale.
+*/ 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",
+      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.
+*/ 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",
+      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.
+*/ 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",
+      The maximum pixel size for drawing the color scale: width for horizontal scales and height for vertical scales.
+*/ 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`.
+      The primary data array used to draw 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.
 
@@ -1064,13 +1081,12 @@ Additionally, a custom formatting function can be passed as a second argument to
 
 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
+Defaults to an empty array (`[]`).
+    @param f The data array or a URL string to load data from.
   */ key: "data",
             value: function data(_, f) {
                 if (arguments.length) {
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
                     addToQueue.bind(this)(_, f, "data");
                     this._hidden = [];
                     this._solo = [];
@@ -1086,143 +1102,104 @@ If *data* is not specified, this method returns the current primary data array,
         },
         {
             /**
-      @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",
+      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).
+*/ 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",
+      The current depth of the visualization. The value should correspond with an index in the [groupBy](#groupBy) array.
+*/ 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",
+      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.
+*/ 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",
+      When resizing the browser window, this is the millisecond delay to trigger the resize event.
+*/ 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",
+      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.
+*/ 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",
+      The interval, in milliseconds, for checking if the visualization is visible on the page.
+*/ 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",
+      If *value* is specified, sets the discrete accessor to the specified method name (usually an axis) and returns the current class instance.
+*/ 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",
+      Shows a button that allows for downloading the current visualization.
+*/ 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",
+      Sets specific options of the saveElement function used when downloading the visualization.
+*/ 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",
+      Defines which control group to add the download button into.
+*/ 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",
+      The animation duration in milliseconds.
+*/ 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",
+      A filter function applied to the data before drawing.
+*/ 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",
+      The font family used throughout the visualization.
+*/ key: "fontFamily",
             value: function fontFamily(_) {
                 var _this = this;
                 if (arguments.length) {
@@ -1276,19 +1253,16 @@ If *data* is not specified, this method returns the current primary data array,
         },
         {
             /**
-      @memberof Viz
-      @desc Defines the mapping between data and shape. The value can be a String matching a key in each data point (default is "id"), or an accessor Function that returns a unique value for each data point. Additionally, an Array of these values may be provided if the visualization supports nested hierarchies.
-      @param {String|Function|Array} [*value*]
-      @chainable
-  */ key: "groupBy",
+      Defines the mapping between data and shape. The value can be a String matching a key in each data point (default is "id"), or an accessor Function that returns a unique value for each data point. Additionally, an Array of these values may be provided if the visualization supports nested hierarchies.
+*/ key: "groupBy",
             value: function groupBy(_) {
                 var _this = this;
                 if (!arguments.length) return this._groupBy;
                 this._groupByRaw = _;
-                if (!_instanceof(_, Array)) _ = [
+                var arr = _instanceof(_, Array) ? _ : [
                     _
                 ];
-                return this._groupBy = _.map(function(k) {
+                return this._groupBy = arr.map(function(k) {
                     if (typeof k === "function") return k;
                     else {
                         if (!_this._aggs[k]) {
@@ -1304,44 +1278,32 @@ If *data* is not specified, this method returns the current primary data array,
         },
         {
             /**
-      @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",
+      The overall height of the visualization in pixels.
+*/ 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",
+      Defines the color used for legend shapes when the corresponding grouping is hidden from display (by clicking on the legend).
+*/ 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",
+      Defines the opacity used for legend labels when the corresponding grouping is hidden from display (by clicking on the legend).
+*/ 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",
+      The hover callback function for highlighting shapes on mouseover.
+*/ key: "hover",
             value: function hover(_) {
                 var _this = this;
                 var hoverFunction = this._hover = _;
@@ -1361,7 +1323,7 @@ If *data* is not specified, this method returns the current primary data array,
                         activeIds = activeIds.filter(function(id, i) {
                             return activeIds.indexOf(id) === i;
                         });
-                        if (activeIds.length) hoverFunction = function(d, i) {
+                        if (activeIds.length) hoverFunction = function hoverFunction(d, i) {
                             return activeIds.includes(JSON.stringify(_this._ids(d, i)));
                         };
                     }
@@ -1375,264 +1337,192 @@ If *data* is not specified, this method returns the current primary data array,
         },
         {
             /**
-      @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",
+      Accessor function or string key for the label of each data point.
+*/ 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",
+      Whether to display the legend.
+*/ 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",
+      Configuration object passed to the legend's config method.
+*/ 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",
+      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.
+*/ 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",
+      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.
+*/ 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",
+      Defines which side of the visualization to anchor the legend. Expected values are `"top"`, `"bottom"`, `"left"`, and `"right"`.
+*/ 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",
+      A JavaScript [sort comparator function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) used to sort the legend.
+*/ 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",
+      Configuration object for the legend tooltip.
+*/ 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",
+      The inner HTML of the status message 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.
+*/ 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",
+      Toggles the visibility of the status message that is displayed when loading AJAX requests and displaying errors.
+*/ 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",
+      The color of the mask displayed underneath the status message when loading AJAX requests and displaying errors. Set to `false` to turn off the mask completely.
+*/ 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",
+      Defines the CSS style properties for the status message that is displayed when loading AJAX requests and displaying errors.
+*/ 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",
+      The inner HTML of the status message 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.
+*/ 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",
+     Toggles the visibility of the status message that is displayed when no data is supplied to the visualization.
+*/ key: "noDataMessage",
             value: function noDataMessage(_) {
                 return arguments.length ? (this._noDataMessage = _, this) : this._noDataMessage;
             }
         },
         {
             /**
-      @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",
+      If using scroll or visibility detection, this method allow a custom override of the element to which the scroll detection function gets attached.
+*/ 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",
+      The SVG container element as a d3 selector or DOM element. Defaults to `undefined`.
+*/ key: "select",
             value: function select1(_) {
                 return arguments.length ? (this._select = select(_), this) : this._select;
             }
         },
         {
             /**
-      @memberof Viz
-      @desc Changes the primary shape used to represent each data point in a visualization. Not all visualizations support changing shapes, this method can be provided the String name of a D3plus shape class (for example, "Rect" or "Circle"), or an accessor Function that returns the String class name to be used for each individual data point.
-      @param {String|Function} [*value*]
-      @chainable
-  */ key: "shape",
+      Changes the primary shape used to represent each data point in a visualization. Not all visualizations support changing shapes, this method can be provided the String name of a D3plus shape class (for example, "Rect" or "Circle"), or an accessor Function that returns the String class name to be used for each individual data point.
+*/ 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",
+      Configuration object with key/value pairs applied as method calls on each shape.
+*/ 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",
+      Accessor function or string for the visualization's subtitle.
+*/ 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",
+      Configuration object for the subtitle.
+*/ 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",
+      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.
+*/ 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",
+      The description text for the SVG `<desc>` element, used for accessibility.
+*/ 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",
+      The title text for the SVG `<title>` element, used for accessibility.
+*/ 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",
+      The threshold value for bucketing small data points together.
+*/ key: "threshold",
             value: function threshold(_) {
                 if (arguments.length) {
                     if (typeof _ === "function") {
@@ -1646,11 +1536,9 @@ If *data* is not specified, this method returns the current primary data array,
         },
         {
             /**
-      @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",
+      Accessor for the value used in the threshold algorithm.
+    @param key The data key used to group values for thresholding.
+*/ key: "thresholdKey",
             value: function thresholdKey(key) {
                 if (arguments.length) {
                     if (typeof key === "function") {
@@ -1664,22 +1552,16 @@ If *data* is not specified, this method returns the current primary data array,
         },
         {
             /**
-      @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",
+      The label displayed for bucketed threshold items.
+*/ 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",
+      Accessor function or string key for the time dimension of each data point.
+*/ key: "time",
             value: function time(_) {
                 if (arguments.length) {
                     if (typeof _ === "function") {
@@ -1709,128 +1591,99 @@ If *data* is not specified, this method returns the current primary data array,
         },
         {
             /**
-      @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",
+      A filter function that limits which time periods are shown.
+*/ 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",
+      Whether to display the timeline.
+*/ 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",
+      Configuration object for the timeline.
+*/ 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",
+      The starting time or range for the timeline. Can be a single Date/String, or an Array of 2 values representing the min and max.
+*/ key: "timelineDefault",
             value: function timelineDefault(_) {
                 if (arguments.length) {
                     if (!_instanceof(_, Array)) _ = [
                         _,
                         _
                     ];
-                    this._timelineDefault = _.map(date);
+                    this._timelineDefault = _.map(function(d) {
+                        return date(d);
+                    }).filter(function(d) {
+                        return d !== false;
+                    });
                     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",
+      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.
+*/ 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",
+      Accessor function or string for the visualization's title.
+*/ 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",
+      Configuration object for the title.
+*/ 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",
+      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.
+*/ 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",
+      Whether to display tooltips on hover.
+*/ 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",
+      Configuration object for the tooltip.
+*/ 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",
+      Accessor function or string key for the total value displayed in the visualization.
+*/ key: "total",
             value: function total(_) {
                 if (arguments.length) {
                     if (typeof _ === "function") this._total = _;
@@ -1842,176 +1695,128 @@ If *data* is not specified, this method returns the current primary data array,
         },
         {
             /**
-      @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",
+      Configuration object for the total bar.
+*/ 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",
+      Formatter function for the value in the total bar.
+*/ 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",
+      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.
+*/ 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",
+      The overall width of the visualization in pixels.
+*/ 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",
+      Toggles the ability to zoom/pan the visualization. Certain parameters for zooming are required to be hooked up on a visualization by visualization basis.
+*/ 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",
+      The pixel stroke-width of the zoom brush area.
+*/ 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",
+      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.
+*/ 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",
+      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.
+*/ 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",
+      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.
+*/ 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",
+      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.
+*/ 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",
+      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.
+*/ 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",
+      The multiplier that is used in with the control buttons when zooming in and out.
+*/ 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",
+      The max zoom scale.
+*/ 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",
+      Toggles panning.
+*/ 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",
+      A pixel value to be used to pad all sides of a zoomed area.
+*/ 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",
+      Toggles scroll zooming.
+*/ key: "zoomScroll",
             value: function zoomScroll(_) {
                 return arguments.length ? (this._zoomScroll = _, this) : this._zoomScroll;
             }
@@ -2020,7 +1825,6 @@ If *data* is not specified, this method returns the current primary data array,
     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 };
+    Creates an x/y plot based on an array of data. See [this example](https://d3plus.org/examples/d3plus-treemap/getting-started/) for help getting started using the treemap generator.
+*/ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+export { Viz as default };