@ni/nimble-components 15.5.5 → 15.5.7

package/dist/all-components-bundle.js

@@ -1323,7 +1323,7 @@
 
     // A singleton Range instance used to efficiently remove ranges of DOM nodes.
     // See the implementation of HTMLView below for further details.
-    const range = document.createRange();
+    const range$1 = document.createRange();
     /**
      * The standard View implementation, which also implements ElementView and SyntheticView.
      * @public
@@ -1465,9 +1465,9 @@
             if (views.length === 0) {
                 return;
             }
-            range.setStartBefore(views[0].firstChild);
-            range.setEndAfter(views[views.length - 1].lastChild);
-            range.deleteContents();
+            range$1.setStartBefore(views[0].firstChild);
+            range$1.setEndAfter(views[views.length - 1].lastChild);
+            range$1.deleteContents();
             for (let i = 0, ii = views.length; i < ii; ++i) {
                 const view = views[i];
                 const behaviors = view.behaviors;
@@ -25932,11 +25932,2824 @@ Instead styling against the role which is more general and likely a better appro
         left: 'left',
         right: 'right'
     };
-    const WaferMapColorsScaleMode = {
+    const WaferMapColorScaleMode = {
         linear: 'linear',
         ordinal: 'ordinal'
     };
 
+    function ascending(a, b) {
+      return a == null || b == null ? NaN : a < b ? -1 : a > b ? 1 : a >= b ? 0 : NaN;
+    }
+
+    function descending(a, b) {
+      return a == null || b == null ? NaN
+        : b < a ? -1
+        : b > a ? 1
+        : b >= a ? 0
+        : NaN;
+    }
+
+    function bisector(f) {
+      let compare1, compare2, delta;
+
+      // If an accessor is specified, promote it to a comparator. In this case we
+      // can test whether the search value is (self-) comparable. We can’t do this
+      // for a comparator (except for specific, known comparators) because we can’t
+      // tell if the comparator is symmetric, and an asymmetric comparator can’t be
+      // used to test whether a single value is comparable.
+      if (f.length !== 2) {
+        compare1 = ascending;
+        compare2 = (d, x) => ascending(f(d), x);
+        delta = (d, x) => f(d) - x;
+      } else {
+        compare1 = f === ascending || f === descending ? f : zero$1;
+        compare2 = f;
+        delta = f;
+      }
+
+      function left(a, x, lo = 0, hi = a.length) {
+        if (lo < hi) {
+          if (compare1(x, x) !== 0) return hi;
+          do {
+            const mid = (lo + hi) >>> 1;
+            if (compare2(a[mid], x) < 0) lo = mid + 1;
+            else hi = mid;
+          } while (lo < hi);
+        }
+        return lo;
+      }
+
+      function right(a, x, lo = 0, hi = a.length) {
+        if (lo < hi) {
+          if (compare1(x, x) !== 0) return hi;
+          do {
+            const mid = (lo + hi) >>> 1;
+            if (compare2(a[mid], x) <= 0) lo = mid + 1;
+            else hi = mid;
+          } while (lo < hi);
+        }
+        return lo;
+      }
+
+      function center(a, x, lo = 0, hi = a.length) {
+        const i = left(a, x, lo, hi - 1);
+        return i > lo && delta(a[i - 1], x) > -delta(a[i], x) ? i - 1 : i;
+      }
+
+      return {left, center, right};
+    }
+
+    function zero$1() {
+      return 0;
+    }
+
+    function number$1(x) {
+      return x === null ? NaN : +x;
+    }
+
+    const ascendingBisect = bisector(ascending);
+    const bisectRight = ascendingBisect.right;
+    bisector(number$1).center;
+    var bisect = bisectRight;
+
+    class InternMap extends Map {
+      constructor(entries, key = keyof) {
+        super();
+        Object.defineProperties(this, {_intern: {value: new Map()}, _key: {value: key}});
+        if (entries != null) for (const [key, value] of entries) this.set(key, value);
+      }
+      get(key) {
+        return super.get(intern_get(this, key));
+      }
+      has(key) {
+        return super.has(intern_get(this, key));
+      }
+      set(key, value) {
+        return super.set(intern_set(this, key), value);
+      }
+      delete(key) {
+        return super.delete(intern_delete(this, key));
+      }
+    }
+
+    function intern_get({_intern, _key}, value) {
+      const key = _key(value);
+      return _intern.has(key) ? _intern.get(key) : value;
+    }
+
+    function intern_set({_intern, _key}, value) {
+      const key = _key(value);
+      if (_intern.has(key)) return _intern.get(key);
+      _intern.set(key, value);
+      return value;
+    }
+
+    function intern_delete({_intern, _key}, value) {
+      const key = _key(value);
+      if (_intern.has(key)) {
+        value = _intern.get(key);
+        _intern.delete(key);
+      }
+      return value;
+    }
+
+    function keyof(value) {
+      return value !== null && typeof value === "object" ? value.valueOf() : value;
+    }
+
+    var e10 = Math.sqrt(50),
+        e5 = Math.sqrt(10),
+        e2 = Math.sqrt(2);
+
+    function ticks(start, stop, count) {
+      var reverse,
+          i = -1,
+          n,
+          ticks,
+          step;
+
+      stop = +stop, start = +start, count = +count;
+      if (start === stop && count > 0) return [start];
+      if (reverse = stop < start) n = start, start = stop, stop = n;
+      if ((step = tickIncrement(start, stop, count)) === 0 || !isFinite(step)) return [];
+
+      if (step > 0) {
+        let r0 = Math.round(start / step), r1 = Math.round(stop / step);
+        if (r0 * step < start) ++r0;
+        if (r1 * step > stop) --r1;
+        ticks = new Array(n = r1 - r0 + 1);
+        while (++i < n) ticks[i] = (r0 + i) * step;
+      } else {
+        step = -step;
+        let r0 = Math.round(start * step), r1 = Math.round(stop * step);
+        if (r0 / step < start) ++r0;
+        if (r1 / step > stop) --r1;
+        ticks = new Array(n = r1 - r0 + 1);
+        while (++i < n) ticks[i] = (r0 + i) / step;
+      }
+
+      if (reverse) ticks.reverse();
+
+      return ticks;
+    }
+
+    function tickIncrement(start, stop, count) {
+      var step = (stop - start) / Math.max(0, count),
+          power = Math.floor(Math.log(step) / Math.LN10),
+          error = step / Math.pow(10, power);
+      return power >= 0
+          ? (error >= e10 ? 10 : error >= e5 ? 5 : error >= e2 ? 2 : 1) * Math.pow(10, power)
+          : -Math.pow(10, -power) / (error >= e10 ? 10 : error >= e5 ? 5 : error >= e2 ? 2 : 1);
+    }
+
+    function tickStep(start, stop, count) {
+      var step0 = Math.abs(stop - start) / Math.max(0, count),
+          step1 = Math.pow(10, Math.floor(Math.log(step0) / Math.LN10)),
+          error = step0 / step1;
+      if (error >= e10) step1 *= 10;
+      else if (error >= e5) step1 *= 5;
+      else if (error >= e2) step1 *= 2;
+      return stop < start ? -step1 : step1;
+    }
+
+    function range(start, stop, step) {
+      start = +start, stop = +stop, step = (n = arguments.length) < 2 ? (stop = start, start = 0, 1) : n < 3 ? 1 : +step;
+
+      var i = -1,
+          n = Math.max(0, Math.ceil((stop - start) / step)) | 0,
+          range = new Array(n);
+
+      while (++i < n) {
+        range[i] = start + i * step;
+      }
+
+      return range;
+    }
+
+    function initRange(domain, range) {
+      switch (arguments.length) {
+        case 0: break;
+        case 1: this.range(domain); break;
+        default: this.range(range).domain(domain); break;
+      }
+      return this;
+    }
+
+    const implicit = Symbol("implicit");
+
+    function ordinal() {
+      var index = new InternMap(),
+          domain = [],
+          range = [],
+          unknown = implicit;
+
+      function scale(d) {
+        let i = index.get(d);
+        if (i === undefined) {
+          if (unknown !== implicit) return unknown;
+          index.set(d, i = domain.push(d) - 1);
+        }
+        return range[i % range.length];
+      }
+
+      scale.domain = function(_) {
+        if (!arguments.length) return domain.slice();
+        domain = [], index = new InternMap();
+        for (const value of _) {
+          if (index.has(value)) continue;
+          index.set(value, domain.push(value) - 1);
+        }
+        return scale;
+      };
+
+      scale.range = function(_) {
+        return arguments.length ? (range = Array.from(_), scale) : range.slice();
+      };
+
+      scale.unknown = function(_) {
+        return arguments.length ? (unknown = _, scale) : unknown;
+      };
+
+      scale.copy = function() {
+        return ordinal(domain, range).unknown(unknown);
+      };
+
+      initRange.apply(scale, arguments);
+
+      return scale;
+    }
+
+    function band() {
+      var scale = ordinal().unknown(undefined),
+          domain = scale.domain,
+          ordinalRange = scale.range,
+          r0 = 0,
+          r1 = 1,
+          step,
+          bandwidth,
+          round = false,
+          paddingInner = 0,
+          paddingOuter = 0,
+          align = 0.5;
+
+      delete scale.unknown;
+
+      function rescale() {
+        var n = domain().length,
+            reverse = r1 < r0,
+            start = reverse ? r1 : r0,
+            stop = reverse ? r0 : r1;
+        step = (stop - start) / Math.max(1, n - paddingInner + paddingOuter * 2);
+        if (round) step = Math.floor(step);
+        start += (stop - start - step * (n - paddingInner)) * align;
+        bandwidth = step * (1 - paddingInner);
+        if (round) start = Math.round(start), bandwidth = Math.round(bandwidth);
+        var values = range(n).map(function(i) { return start + step * i; });
+        return ordinalRange(reverse ? values.reverse() : values);
+      }
+
+      scale.domain = function(_) {
+        return arguments.length ? (domain(_), rescale()) : domain();
+      };
+
+      scale.range = function(_) {
+        return arguments.length ? ([r0, r1] = _, r0 = +r0, r1 = +r1, rescale()) : [r0, r1];
+      };
+
+      scale.rangeRound = function(_) {
+        return [r0, r1] = _, r0 = +r0, r1 = +r1, round = true, rescale();
+      };
+
+      scale.bandwidth = function() {
+        return bandwidth;
+      };
+
+      scale.step = function() {
+        return step;
+      };
+
+      scale.round = function(_) {
+        return arguments.length ? (round = !!_, rescale()) : round;
+      };
+
+      scale.padding = function(_) {
+        return arguments.length ? (paddingInner = Math.min(1, paddingOuter = +_), rescale()) : paddingInner;
+      };
+
+      scale.paddingInner = function(_) {
+        return arguments.length ? (paddingInner = Math.min(1, _), rescale()) : paddingInner;
+      };
+
+      scale.paddingOuter = function(_) {
+        return arguments.length ? (paddingOuter = +_, rescale()) : paddingOuter;
+      };
+
+      scale.align = function(_) {
+        return arguments.length ? (align = Math.max(0, Math.min(1, _)), rescale()) : align;
+      };
+
+      scale.copy = function() {
+        return band(domain(), [r0, r1])
+            .round(round)
+            .paddingInner(paddingInner)
+            .paddingOuter(paddingOuter)
+            .align(align);
+      };
+
+      return initRange.apply(rescale(), arguments);
+    }
+
+    function define(constructor, factory, prototype) {
+      constructor.prototype = factory.prototype = prototype;
+      prototype.constructor = constructor;
+    }
+
+    function extend(parent, definition) {
+      var prototype = Object.create(parent.prototype);
+      for (var key in definition) prototype[key] = definition[key];
+      return prototype;
+    }
+
+    function Color() {}
+
+    var darker = 0.7;
+    var brighter = 1 / darker;
+
+    var reI = "\\s*([+-]?\\d+)\\s*",
+        reN = "\\s*([+-]?(?:\\d*\\.)?\\d+(?:[eE][+-]?\\d+)?)\\s*",
+        reP = "\\s*([+-]?(?:\\d*\\.)?\\d+(?:[eE][+-]?\\d+)?)%\\s*",
+        reHex = /^#([0-9a-f]{3,8})$/,
+        reRgbInteger = new RegExp(`^rgb\\(${reI},${reI},${reI}\\)$`),
+        reRgbPercent = new RegExp(`^rgb\\(${reP},${reP},${reP}\\)$`),
+        reRgbaInteger = new RegExp(`^rgba\\(${reI},${reI},${reI},${reN}\\)$`),
+        reRgbaPercent = new RegExp(`^rgba\\(${reP},${reP},${reP},${reN}\\)$`),
+        reHslPercent = new RegExp(`^hsl\\(${reN},${reP},${reP}\\)$`),
+        reHslaPercent = new RegExp(`^hsla\\(${reN},${reP},${reP},${reN}\\)$`);
+
+    var named = {
+      aliceblue: 0xf0f8ff,
+      antiquewhite: 0xfaebd7,
+      aqua: 0x00ffff,
+      aquamarine: 0x7fffd4,
+      azure: 0xf0ffff,
+      beige: 0xf5f5dc,
+      bisque: 0xffe4c4,
+      black: 0x000000,
+      blanchedalmond: 0xffebcd,
+      blue: 0x0000ff,
+      blueviolet: 0x8a2be2,
+      brown: 0xa52a2a,
+      burlywood: 0xdeb887,
+      cadetblue: 0x5f9ea0,
+      chartreuse: 0x7fff00,
+      chocolate: 0xd2691e,
+      coral: 0xff7f50,
+      cornflowerblue: 0x6495ed,
+      cornsilk: 0xfff8dc,
+      crimson: 0xdc143c,
+      cyan: 0x00ffff,
+      darkblue: 0x00008b,
+      darkcyan: 0x008b8b,
+      darkgoldenrod: 0xb8860b,
+      darkgray: 0xa9a9a9,
+      darkgreen: 0x006400,
+      darkgrey: 0xa9a9a9,
+      darkkhaki: 0xbdb76b,
+      darkmagenta: 0x8b008b,
+      darkolivegreen: 0x556b2f,
+      darkorange: 0xff8c00,
+      darkorchid: 0x9932cc,
+      darkred: 0x8b0000,
+      darksalmon: 0xe9967a,
+      darkseagreen: 0x8fbc8f,
+      darkslateblue: 0x483d8b,
+      darkslategray: 0x2f4f4f,
+      darkslategrey: 0x2f4f4f,
+      darkturquoise: 0x00ced1,
+      darkviolet: 0x9400d3,
+      deeppink: 0xff1493,
+      deepskyblue: 0x00bfff,
+      dimgray: 0x696969,
+      dimgrey: 0x696969,
+      dodgerblue: 0x1e90ff,
+      firebrick: 0xb22222,
+      floralwhite: 0xfffaf0,
+      forestgreen: 0x228b22,
+      fuchsia: 0xff00ff,
+      gainsboro: 0xdcdcdc,
+      ghostwhite: 0xf8f8ff,
+      gold: 0xffd700,
+      goldenrod: 0xdaa520,
+      gray: 0x808080,
+      green: 0x008000,
+      greenyellow: 0xadff2f,
+      grey: 0x808080,
+      honeydew: 0xf0fff0,
+      hotpink: 0xff69b4,
+      indianred: 0xcd5c5c,
+      indigo: 0x4b0082,
+      ivory: 0xfffff0,
+      khaki: 0xf0e68c,
+      lavender: 0xe6e6fa,
+      lavenderblush: 0xfff0f5,
+      lawngreen: 0x7cfc00,
+      lemonchiffon: 0xfffacd,
+      lightblue: 0xadd8e6,
+      lightcoral: 0xf08080,
+      lightcyan: 0xe0ffff,
+      lightgoldenrodyellow: 0xfafad2,
+      lightgray: 0xd3d3d3,
+      lightgreen: 0x90ee90,
+      lightgrey: 0xd3d3d3,
+      lightpink: 0xffb6c1,
+      lightsalmon: 0xffa07a,
+      lightseagreen: 0x20b2aa,
+      lightskyblue: 0x87cefa,
+      lightslategray: 0x778899,
+      lightslategrey: 0x778899,
+      lightsteelblue: 0xb0c4de,
+      lightyellow: 0xffffe0,
+      lime: 0x00ff00,
+      limegreen: 0x32cd32,
+      linen: 0xfaf0e6,
+      magenta: 0xff00ff,
+      maroon: 0x800000,
+      mediumaquamarine: 0x66cdaa,
+      mediumblue: 0x0000cd,
+      mediumorchid: 0xba55d3,
+      mediumpurple: 0x9370db,
+      mediumseagreen: 0x3cb371,
+      mediumslateblue: 0x7b68ee,
+      mediumspringgreen: 0x00fa9a,
+      mediumturquoise: 0x48d1cc,
+      mediumvioletred: 0xc71585,
+      midnightblue: 0x191970,
+      mintcream: 0xf5fffa,
+      mistyrose: 0xffe4e1,
+      moccasin: 0xffe4b5,
+      navajowhite: 0xffdead,
+      navy: 0x000080,
+      oldlace: 0xfdf5e6,
+      olive: 0x808000,
+      olivedrab: 0x6b8e23,
+      orange: 0xffa500,
+      orangered: 0xff4500,
+      orchid: 0xda70d6,
+      palegoldenrod: 0xeee8aa,
+      palegreen: 0x98fb98,
+      paleturquoise: 0xafeeee,
+      palevioletred: 0xdb7093,
+      papayawhip: 0xffefd5,
+      peachpuff: 0xffdab9,
+      peru: 0xcd853f,
+      pink: 0xffc0cb,
+      plum: 0xdda0dd,
+      powderblue: 0xb0e0e6,
+      purple: 0x800080,
+      rebeccapurple: 0x663399,
+      red: 0xff0000,
+      rosybrown: 0xbc8f8f,
+      royalblue: 0x4169e1,
+      saddlebrown: 0x8b4513,
+      salmon: 0xfa8072,
+      sandybrown: 0xf4a460,
+      seagreen: 0x2e8b57,
+      seashell: 0xfff5ee,
+      sienna: 0xa0522d,
+      silver: 0xc0c0c0,
+      skyblue: 0x87ceeb,
+      slateblue: 0x6a5acd,
+      slategray: 0x708090,
+      slategrey: 0x708090,
+      snow: 0xfffafa,
+      springgreen: 0x00ff7f,
+      steelblue: 0x4682b4,
+      tan: 0xd2b48c,
+      teal: 0x008080,
+      thistle: 0xd8bfd8,
+      tomato: 0xff6347,
+      turquoise: 0x40e0d0,
+      violet: 0xee82ee,
+      wheat: 0xf5deb3,
+      white: 0xffffff,
+      whitesmoke: 0xf5f5f5,
+      yellow: 0xffff00,
+      yellowgreen: 0x9acd32
+    };
+
+    define(Color, color, {
+      copy(channels) {
+        return Object.assign(new this.constructor, this, channels);
+      },
+      displayable() {
+        return this.rgb().displayable();
+      },
+      hex: color_formatHex, // Deprecated! Use color.formatHex.
+      formatHex: color_formatHex,
+      formatHex8: color_formatHex8,
+      formatHsl: color_formatHsl,
+      formatRgb: color_formatRgb,
+      toString: color_formatRgb
+    });
+
+    function color_formatHex() {
+      return this.rgb().formatHex();
+    }
+
+    function color_formatHex8() {
+      return this.rgb().formatHex8();
+    }
+
+    function color_formatHsl() {
+      return hslConvert(this).formatHsl();
+    }
+
+    function color_formatRgb() {
+      return this.rgb().formatRgb();
+    }
+
+    function color(format) {
+      var m, l;
+      format = (format + "").trim().toLowerCase();
+      return (m = reHex.exec(format)) ? (l = m[1].length, m = parseInt(m[1], 16), l === 6 ? rgbn(m) // #ff0000
+          : l === 3 ? new Rgb((m >> 8 & 0xf) | (m >> 4 & 0xf0), (m >> 4 & 0xf) | (m & 0xf0), ((m & 0xf) << 4) | (m & 0xf), 1) // #f00
+          : l === 8 ? rgba(m >> 24 & 0xff, m >> 16 & 0xff, m >> 8 & 0xff, (m & 0xff) / 0xff) // #ff000000
+          : l === 4 ? rgba((m >> 12 & 0xf) | (m >> 8 & 0xf0), (m >> 8 & 0xf) | (m >> 4 & 0xf0), (m >> 4 & 0xf) | (m & 0xf0), (((m & 0xf) << 4) | (m & 0xf)) / 0xff) // #f000
+          : null) // invalid hex
+          : (m = reRgbInteger.exec(format)) ? new Rgb(m[1], m[2], m[3], 1) // rgb(255, 0, 0)
+          : (m = reRgbPercent.exec(format)) ? new Rgb(m[1] * 255 / 100, m[2] * 255 / 100, m[3] * 255 / 100, 1) // rgb(100%, 0%, 0%)
+          : (m = reRgbaInteger.exec(format)) ? rgba(m[1], m[2], m[3], m[4]) // rgba(255, 0, 0, 1)
+          : (m = reRgbaPercent.exec(format)) ? rgba(m[1] * 255 / 100, m[2] * 255 / 100, m[3] * 255 / 100, m[4]) // rgb(100%, 0%, 0%, 1)
+          : (m = reHslPercent.exec(format)) ? hsla(m[1], m[2] / 100, m[3] / 100, 1) // hsl(120, 50%, 50%)
+          : (m = reHslaPercent.exec(format)) ? hsla(m[1], m[2] / 100, m[3] / 100, m[4]) // hsla(120, 50%, 50%, 1)
+          : named.hasOwnProperty(format) ? rgbn(named[format]) // eslint-disable-line no-prototype-builtins
+          : format === "transparent" ? new Rgb(NaN, NaN, NaN, 0)
+          : null;
+    }
+
+    function rgbn(n) {
+      return new Rgb(n >> 16 & 0xff, n >> 8 & 0xff, n & 0xff, 1);
+    }
+
+    function rgba(r, g, b, a) {
+      if (a <= 0) r = g = b = NaN;
+      return new Rgb(r, g, b, a);
+    }
+
+    function rgbConvert(o) {
+      if (!(o instanceof Color)) o = color(o);
+      if (!o) return new Rgb;
+      o = o.rgb();
+      return new Rgb(o.r, o.g, o.b, o.opacity);
+    }
+
+    function rgb$1(r, g, b, opacity) {
+      return arguments.length === 1 ? rgbConvert(r) : new Rgb(r, g, b, opacity == null ? 1 : opacity);
+    }
+
+    function Rgb(r, g, b, opacity) {
+      this.r = +r;
+      this.g = +g;
+      this.b = +b;
+      this.opacity = +opacity;
+    }
+
+    define(Rgb, rgb$1, extend(Color, {
+      brighter(k) {
+        k = k == null ? brighter : Math.pow(brighter, k);
+        return new Rgb(this.r * k, this.g * k, this.b * k, this.opacity);
+      },
+      darker(k) {
+        k = k == null ? darker : Math.pow(darker, k);
+        return new Rgb(this.r * k, this.g * k, this.b * k, this.opacity);
+      },
+      rgb() {
+        return this;
+      },
+      clamp() {
+        return new Rgb(clampi(this.r), clampi(this.g), clampi(this.b), clampa(this.opacity));
+      },
+      displayable() {
+        return (-0.5 <= this.r && this.r < 255.5)
+            && (-0.5 <= this.g && this.g < 255.5)
+            && (-0.5 <= this.b && this.b < 255.5)
+            && (0 <= this.opacity && this.opacity <= 1);
+      },
+      hex: rgb_formatHex, // Deprecated! Use color.formatHex.
+      formatHex: rgb_formatHex,
+      formatHex8: rgb_formatHex8,
+      formatRgb: rgb_formatRgb,
+      toString: rgb_formatRgb
+    }));
+
+    function rgb_formatHex() {
+      return `#${hex(this.r)}${hex(this.g)}${hex(this.b)}`;
+    }
+
+    function rgb_formatHex8() {
+      return `#${hex(this.r)}${hex(this.g)}${hex(this.b)}${hex((isNaN(this.opacity) ? 1 : this.opacity) * 255)}`;
+    }
+
+    function rgb_formatRgb() {
+      const a = clampa(this.opacity);
+      return `${a === 1 ? "rgb(" : "rgba("}${clampi(this.r)}, ${clampi(this.g)}, ${clampi(this.b)}${a === 1 ? ")" : `, ${a})`}`;
+    }
+
+    function clampa(opacity) {
+      return isNaN(opacity) ? 1 : Math.max(0, Math.min(1, opacity));
+    }
+
+    function clampi(value) {
+      return Math.max(0, Math.min(255, Math.round(value) || 0));
+    }
+
+    function hex(value) {
+      value = clampi(value);
+      return (value < 16 ? "0" : "") + value.toString(16);
+    }
+
+    function hsla(h, s, l, a) {
+      if (a <= 0) h = s = l = NaN;
+      else if (l <= 0 || l >= 1) h = s = NaN;
+      else if (s <= 0) h = NaN;
+      return new Hsl(h, s, l, a);
+    }
+
+    function hslConvert(o) {
+      if (o instanceof Hsl) return new Hsl(o.h, o.s, o.l, o.opacity);
+      if (!(o instanceof Color)) o = color(o);
+      if (!o) return new Hsl;
+      if (o instanceof Hsl) return o;
+      o = o.rgb();
+      var r = o.r / 255,
+          g = o.g / 255,
+          b = o.b / 255,
+          min = Math.min(r, g, b),
+          max = Math.max(r, g, b),
+          h = NaN,
+          s = max - min,
+          l = (max + min) / 2;
+      if (s) {
+        if (r === max) h = (g - b) / s + (g < b) * 6;
+        else if (g === max) h = (b - r) / s + 2;
+        else h = (r - g) / s + 4;
+        s /= l < 0.5 ? max + min : 2 - max - min;
+        h *= 60;
+      } else {
+        s = l > 0 && l < 1 ? 0 : h;
+      }
+      return new Hsl(h, s, l, o.opacity);
+    }
+
+    function hsl(h, s, l, opacity) {
+      return arguments.length === 1 ? hslConvert(h) : new Hsl(h, s, l, opacity == null ? 1 : opacity);
+    }
+
+    function Hsl(h, s, l, opacity) {
+      this.h = +h;
+      this.s = +s;
+      this.l = +l;
+      this.opacity = +opacity;
+    }
+
+    define(Hsl, hsl, extend(Color, {
+      brighter(k) {
+        k = k == null ? brighter : Math.pow(brighter, k);
+        return new Hsl(this.h, this.s, this.l * k, this.opacity);
+      },
+      darker(k) {
+        k = k == null ? darker : Math.pow(darker, k);
+        return new Hsl(this.h, this.s, this.l * k, this.opacity);
+      },
+      rgb() {
+        var h = this.h % 360 + (this.h < 0) * 360,
+            s = isNaN(h) || isNaN(this.s) ? 0 : this.s,
+            l = this.l,
+            m2 = l + (l < 0.5 ? l : 1 - l) * s,
+            m1 = 2 * l - m2;
+        return new Rgb(
+          hsl2rgb(h >= 240 ? h - 240 : h + 120, m1, m2),
+          hsl2rgb(h, m1, m2),
+          hsl2rgb(h < 120 ? h + 240 : h - 120, m1, m2),
+          this.opacity
+        );
+      },
+      clamp() {
+        return new Hsl(clamph(this.h), clampt(this.s), clampt(this.l), clampa(this.opacity));
+      },
+      displayable() {
+        return (0 <= this.s && this.s <= 1 || isNaN(this.s))
+            && (0 <= this.l && this.l <= 1)
+            && (0 <= this.opacity && this.opacity <= 1);
+      },
+      formatHsl() {
+        const a = clampa(this.opacity);
+        return `${a === 1 ? "hsl(" : "hsla("}${clamph(this.h)}, ${clampt(this.s) * 100}%, ${clampt(this.l) * 100}%${a === 1 ? ")" : `, ${a})`}`;
+      }
+    }));
+
+    function clamph(value) {
+      value = (value || 0) % 360;
+      return value < 0 ? value + 360 : value;
+    }
+
+    function clampt(value) {
+      return Math.max(0, Math.min(1, value || 0));
+    }
+
+    /* From FvD 13.37, CSS Color Module Level 3 */
+    function hsl2rgb(h, m1, m2) {
+      return (h < 60 ? m1 + (m2 - m1) * h / 60
+          : h < 180 ? m2
+          : h < 240 ? m1 + (m2 - m1) * (240 - h) / 60
+          : m1) * 255;
+    }
+
+    var constant = x => () => x;
+
+    function linear$1(a, d) {
+      return function(t) {
+        return a + t * d;
+      };
+    }
+
+    function exponential(a, b, y) {
+      return a = Math.pow(a, y), b = Math.pow(b, y) - a, y = 1 / y, function(t) {
+        return Math.pow(a + t * b, y);
+      };
+    }
+
+    function gamma(y) {
+      return (y = +y) === 1 ? nogamma : function(a, b) {
+        return b - a ? exponential(a, b, y) : constant(isNaN(a) ? b : a);
+      };
+    }
+
+    function nogamma(a, b) {
+      var d = b - a;
+      return d ? linear$1(a, d) : constant(isNaN(a) ? b : a);
+    }
+
+    var rgb = (function rgbGamma(y) {
+      var color = gamma(y);
+
+      function rgb(start, end) {
+        var r = color((start = rgb$1(start)).r, (end = rgb$1(end)).r),
+            g = color(start.g, end.g),
+            b = color(start.b, end.b),
+            opacity = nogamma(start.opacity, end.opacity);
+        return function(t) {
+          start.r = r(t);
+          start.g = g(t);
+          start.b = b(t);
+          start.opacity = opacity(t);
+          return start + "";
+        };
+      }
+
+      rgb.gamma = rgbGamma;
+
+      return rgb;
+    })(1);
+
+    function numberArray(a, b) {
+      if (!b) b = [];
+      var n = a ? Math.min(b.length, a.length) : 0,
+          c = b.slice(),
+          i;
+      return function(t) {
+        for (i = 0; i < n; ++i) c[i] = a[i] * (1 - t) + b[i] * t;
+        return c;
+      };
+    }
+
+    function isNumberArray(x) {
+      return ArrayBuffer.isView(x) && !(x instanceof DataView);
+    }
+
+    function genericArray(a, b) {
+      var nb = b ? b.length : 0,
+          na = a ? Math.min(nb, a.length) : 0,
+          x = new Array(na),
+          c = new Array(nb),
+          i;
+
+      for (i = 0; i < na; ++i) x[i] = interpolate(a[i], b[i]);
+      for (; i < nb; ++i) c[i] = b[i];
+
+      return function(t) {
+        for (i = 0; i < na; ++i) c[i] = x[i](t);
+        return c;
+      };
+    }
+
+    function date(a, b) {
+      var d = new Date;
+      return a = +a, b = +b, function(t) {
+        return d.setTime(a * (1 - t) + b * t), d;
+      };
+    }
+
+    function interpolateNumber(a, b) {
+      return a = +a, b = +b, function(t) {
+        return a * (1 - t) + b * t;
+      };
+    }
+
+    function object(a, b) {
+      var i = {},
+          c = {},
+          k;
+
+      if (a === null || typeof a !== "object") a = {};
+      if (b === null || typeof b !== "object") b = {};
+
+      for (k in b) {
+        if (k in a) {
+          i[k] = interpolate(a[k], b[k]);
+        } else {
+          c[k] = b[k];
+        }
+      }
+
+      return function(t) {
+        for (k in i) c[k] = i[k](t);
+        return c;
+      };
+    }
+
+    var reA = /[-+]?(?:\d+\.?\d*|\.?\d+)(?:[eE][-+]?\d+)?/g,
+        reB = new RegExp(reA.source, "g");
+
+    function zero(b) {
+      return function() {
+        return b;
+      };
+    }
+
+    function one(b) {
+      return function(t) {
+        return b(t) + "";
+      };
+    }
+
+    function string(a, b) {
+      var bi = reA.lastIndex = reB.lastIndex = 0, // scan index for next number in b
+          am, // current match in a
+          bm, // current match in b
+          bs, // string preceding current number in b, if any
+          i = -1, // index in s
+          s = [], // string constants and placeholders
+          q = []; // number interpolators
+
+      // Coerce inputs to strings.
+      a = a + "", b = b + "";
+
+      // Interpolate pairs of numbers in a & b.
+      while ((am = reA.exec(a))
+          && (bm = reB.exec(b))) {
+        if ((bs = bm.index) > bi) { // a string precedes the next number in b
+          bs = b.slice(bi, bs);
+          if (s[i]) s[i] += bs; // coalesce with previous string
+          else s[++i] = bs;
+        }
+        if ((am = am[0]) === (bm = bm[0])) { // numbers in a & b match
+          if (s[i]) s[i] += bm; // coalesce with previous string
+          else s[++i] = bm;
+        } else { // interpolate non-matching numbers
+          s[++i] = null;
+          q.push({i: i, x: interpolateNumber(am, bm)});
+        }
+        bi = reB.lastIndex;
+      }
+
+      // Add remains of b.
+      if (bi < b.length) {
+        bs = b.slice(bi);
+        if (s[i]) s[i] += bs; // coalesce with previous string
+        else s[++i] = bs;
+      }
+
+      // Special optimization for only a single match.
+      // Otherwise, interpolate each of the numbers and rejoin the string.
+      return s.length < 2 ? (q[0]
+          ? one(q[0].x)
+          : zero(b))
+          : (b = q.length, function(t) {
+              for (var i = 0, o; i < b; ++i) s[(o = q[i]).i] = o.x(t);
+              return s.join("");
+            });
+    }
+
+    function interpolate(a, b) {
+      var t = typeof b, c;
+      return b == null || t === "boolean" ? constant(b)
+          : (t === "number" ? interpolateNumber
+          : t === "string" ? ((c = color(b)) ? (b = c, rgb) : string)
+          : b instanceof color ? rgb
+          : b instanceof Date ? date
+          : isNumberArray(b) ? numberArray
+          : Array.isArray(b) ? genericArray
+          : typeof b.valueOf !== "function" && typeof b.toString !== "function" || isNaN(b) ? object
+          : interpolateNumber)(a, b);
+    }
+
+    function interpolateRound(a, b) {
+      return a = +a, b = +b, function(t) {
+        return Math.round(a * (1 - t) + b * t);
+      };
+    }
+
+    function constants(x) {
+      return function() {
+        return x;
+      };
+    }
+
+    function number(x) {
+      return +x;
+    }
+
+    var unit = [0, 1];
+
+    function identity$1(x) {
+      return x;
+    }
+
+    function normalize$1(a, b) {
+      return (b -= (a = +a))
+          ? function(x) { return (x - a) / b; }
+          : constants(isNaN(b) ? NaN : 0.5);
+    }
+
+    function clamper(a, b) {
+      var t;
+      if (a > b) t = a, a = b, b = t;
+      return function(x) { return Math.max(a, Math.min(b, x)); };
+    }
+
+    // normalize(a, b)(x) takes a domain value x in [a,b] and returns the corresponding parameter t in [0,1].
+    // interpolate(a, b)(t) takes a parameter t in [0,1] and returns the corresponding range value x in [a,b].
+    function bimap(domain, range, interpolate) {
+      var d0 = domain[0], d1 = domain[1], r0 = range[0], r1 = range[1];
+      if (d1 < d0) d0 = normalize$1(d1, d0), r0 = interpolate(r1, r0);
+      else d0 = normalize$1(d0, d1), r0 = interpolate(r0, r1);
+      return function(x) { return r0(d0(x)); };
+    }
+
+    function polymap(domain, range, interpolate) {
+      var j = Math.min(domain.length, range.length) - 1,
+          d = new Array(j),
+          r = new Array(j),
+          i = -1;
+
+      // Reverse descending domains.
+      if (domain[j] < domain[0]) {
+        domain = domain.slice().reverse();
+        range = range.slice().reverse();
+      }
+
+      while (++i < j) {
+        d[i] = normalize$1(domain[i], domain[i + 1]);
+        r[i] = interpolate(range[i], range[i + 1]);
+      }
+
+      return function(x) {
+        var i = bisect(domain, x, 1, j) - 1;
+        return r[i](d[i](x));
+      };
+    }
+
+    function copy(source, target) {
+      return target
+          .domain(source.domain())
+          .range(source.range())
+          .interpolate(source.interpolate())
+          .clamp(source.clamp())
+          .unknown(source.unknown());
+    }
+
+    function transformer() {
+      var domain = unit,
+          range = unit,
+          interpolate$1 = interpolate,
+          transform,
+          untransform,
+          unknown,
+          clamp = identity$1,
+          piecewise,
+          output,
+          input;
+
+      function rescale() {
+        var n = Math.min(domain.length, range.length);
+        if (clamp !== identity$1) clamp = clamper(domain[0], domain[n - 1]);
+        piecewise = n > 2 ? polymap : bimap;
+        output = input = null;
+        return scale;
+      }
+
+      function scale(x) {
+        return x == null || isNaN(x = +x) ? unknown : (output || (output = piecewise(domain.map(transform), range, interpolate$1)))(transform(clamp(x)));
+      }
+
+      scale.invert = function(y) {
+        return clamp(untransform((input || (input = piecewise(range, domain.map(transform), interpolateNumber)))(y)));
+      };
+
+      scale.domain = function(_) {
+        return arguments.length ? (domain = Array.from(_, number), rescale()) : domain.slice();
+      };
+
+      scale.range = function(_) {
+        return arguments.length ? (range = Array.from(_), rescale()) : range.slice();
+      };
+
+      scale.rangeRound = function(_) {
+        return range = Array.from(_), interpolate$1 = interpolateRound, rescale();
+      };
+
+      scale.clamp = function(_) {
+        return arguments.length ? (clamp = _ ? true : identity$1, rescale()) : clamp !== identity$1;
+      };
+
+      scale.interpolate = function(_) {
+        return arguments.length ? (interpolate$1 = _, rescale()) : interpolate$1;
+      };
+
+      scale.unknown = function(_) {
+        return arguments.length ? (unknown = _, scale) : unknown;
+      };
+
+      return function(t, u) {
+        transform = t, untransform = u;
+        return rescale();
+      };
+    }
+
+    function continuous() {
+      return transformer()(identity$1, identity$1);
+    }
+
+    function formatDecimal(x) {
+      return Math.abs(x = Math.round(x)) >= 1e21
+          ? x.toLocaleString("en").replace(/,/g, "")
+          : x.toString(10);
+    }
+
+    // Computes the decimal coefficient and exponent of the specified number x with
+    // significant digits p, where x is positive and p is in [1, 21] or undefined.
+    // For example, formatDecimalParts(1.23) returns ["123", 0].
+    function formatDecimalParts(x, p) {
+      if ((i = (x = p ? x.toExponential(p - 1) : x.toExponential()).indexOf("e")) < 0) return null; // NaN, ±Infinity
+      var i, coefficient = x.slice(0, i);
+
+      // The string returned by toExponential either has the form \d\.\d+e[-+]\d+
+      // (e.g., 1.2e+3) or the form \de[-+]\d+ (e.g., 1e+3).
+      return [
+        coefficient.length > 1 ? coefficient[0] + coefficient.slice(2) : coefficient,
+        +x.slice(i + 1)
+      ];
+    }
+
+    function exponent(x) {
+      return x = formatDecimalParts(Math.abs(x)), x ? x[1] : NaN;
+    }
+
+    function formatGroup(grouping, thousands) {
+      return function(value, width) {
+        var i = value.length,
+            t = [],
+            j = 0,
+            g = grouping[0],
+            length = 0;
+
+        while (i > 0 && g > 0) {
+          if (length + g + 1 > width) g = Math.max(1, width - length);
+          t.push(value.substring(i -= g, i + g));
+          if ((length += g + 1) > width) break;
+          g = grouping[j = (j + 1) % grouping.length];
+        }
+
+        return t.reverse().join(thousands);
+      };
+    }
+
+    function formatNumerals(numerals) {
+      return function(value) {
+        return value.replace(/[0-9]/g, function(i) {
+          return numerals[+i];
+        });
+      };
+    }
+
+    // [[fill]align][sign][symbol][0][width][,][.precision][~][type]
+    var re = /^(?:(.)?([<>=^]))?([+\-( ])?([$#])?(0)?(\d+)?(,)?(\.\d+)?(~)?([a-z%])?$/i;
+
+    function formatSpecifier(specifier) {
+      if (!(match = re.exec(specifier))) throw new Error("invalid format: " + specifier);
+      var match;
+      return new FormatSpecifier({
+        fill: match[1],
+        align: match[2],
+        sign: match[3],
+        symbol: match[4],
+        zero: match[5],
+        width: match[6],
+        comma: match[7],
+        precision: match[8] && match[8].slice(1),
+        trim: match[9],
+        type: match[10]
+      });
+    }
+
+    formatSpecifier.prototype = FormatSpecifier.prototype; // instanceof
+
+    function FormatSpecifier(specifier) {
+      this.fill = specifier.fill === undefined ? " " : specifier.fill + "";
+      this.align = specifier.align === undefined ? ">" : specifier.align + "";
+      this.sign = specifier.sign === undefined ? "-" : specifier.sign + "";
+      this.symbol = specifier.symbol === undefined ? "" : specifier.symbol + "";
+      this.zero = !!specifier.zero;
+      this.width = specifier.width === undefined ? undefined : +specifier.width;
+      this.comma = !!specifier.comma;
+      this.precision = specifier.precision === undefined ? undefined : +specifier.precision;
+      this.trim = !!specifier.trim;
+      this.type = specifier.type === undefined ? "" : specifier.type + "";
+    }
+
+    FormatSpecifier.prototype.toString = function() {
+      return this.fill
+          + this.align
+          + this.sign
+          + this.symbol
+          + (this.zero ? "0" : "")
+          + (this.width === undefined ? "" : Math.max(1, this.width | 0))
+          + (this.comma ? "," : "")
+          + (this.precision === undefined ? "" : "." + Math.max(0, this.precision | 0))
+          + (this.trim ? "~" : "")
+          + this.type;
+    };
+
+    // Trims insignificant zeros, e.g., replaces 1.2000k with 1.2k.
+    function formatTrim(s) {
+      out: for (var n = s.length, i = 1, i0 = -1, i1; i < n; ++i) {
+        switch (s[i]) {
+          case ".": i0 = i1 = i; break;
+          case "0": if (i0 === 0) i0 = i; i1 = i; break;
+          default: if (!+s[i]) break out; if (i0 > 0) i0 = 0; break;
+        }
+      }
+      return i0 > 0 ? s.slice(0, i0) + s.slice(i1 + 1) : s;
+    }
+
+    var prefixExponent;
+
+    function formatPrefixAuto(x, p) {
+      var d = formatDecimalParts(x, p);
+      if (!d) return x + "";
+      var coefficient = d[0],
+          exponent = d[1],
+          i = exponent - (prefixExponent = Math.max(-8, Math.min(8, Math.floor(exponent / 3))) * 3) + 1,
+          n = coefficient.length;
+      return i === n ? coefficient
+          : i > n ? coefficient + new Array(i - n + 1).join("0")
+          : i > 0 ? coefficient.slice(0, i) + "." + coefficient.slice(i)
+          : "0." + new Array(1 - i).join("0") + formatDecimalParts(x, Math.max(0, p + i - 1))[0]; // less than 1y!
+    }
+
+    function formatRounded(x, p) {
+      var d = formatDecimalParts(x, p);
+      if (!d) return x + "";
+      var coefficient = d[0],
+          exponent = d[1];
+      return exponent < 0 ? "0." + new Array(-exponent).join("0") + coefficient
+          : coefficient.length > exponent + 1 ? coefficient.slice(0, exponent + 1) + "." + coefficient.slice(exponent + 1)
+          : coefficient + new Array(exponent - coefficient.length + 2).join("0");
+    }
+
+    var formatTypes = {
+      "%": (x, p) => (x * 100).toFixed(p),
+      "b": (x) => Math.round(x).toString(2),
+      "c": (x) => x + "",
+      "d": formatDecimal,
+      "e": (x, p) => x.toExponential(p),
+      "f": (x, p) => x.toFixed(p),
+      "g": (x, p) => x.toPrecision(p),
+      "o": (x) => Math.round(x).toString(8),
+      "p": (x, p) => formatRounded(x * 100, p),
+      "r": formatRounded,
+      "s": formatPrefixAuto,
+      "X": (x) => Math.round(x).toString(16).toUpperCase(),
+      "x": (x) => Math.round(x).toString(16)
+    };
+
+    function identity(x) {
+      return x;
+    }
+
+    var map = Array.prototype.map,
+        prefixes = ["y","z","a","f","p","n","µ","m","","k","M","G","T","P","E","Z","Y"];
+
+    function formatLocale(locale) {
+      var group = locale.grouping === undefined || locale.thousands === undefined ? identity : formatGroup(map.call(locale.grouping, Number), locale.thousands + ""),
+          currencyPrefix = locale.currency === undefined ? "" : locale.currency[0] + "",
+          currencySuffix = locale.currency === undefined ? "" : locale.currency[1] + "",
+          decimal = locale.decimal === undefined ? "." : locale.decimal + "",
+          numerals = locale.numerals === undefined ? identity : formatNumerals(map.call(locale.numerals, String)),
+          percent = locale.percent === undefined ? "%" : locale.percent + "",
+          minus = locale.minus === undefined ? "−" : locale.minus + "",
+          nan = locale.nan === undefined ? "NaN" : locale.nan + "";
+
+      function newFormat(specifier) {
+        specifier = formatSpecifier(specifier);
+
+        var fill = specifier.fill,
+            align = specifier.align,
+            sign = specifier.sign,
+            symbol = specifier.symbol,
+            zero = specifier.zero,
+            width = specifier.width,
+            comma = specifier.comma,
+            precision = specifier.precision,
+            trim = specifier.trim,
+            type = specifier.type;
+
+        // The "n" type is an alias for ",g".
+        if (type === "n") comma = true, type = "g";
+
+        // The "" type, and any invalid type, is an alias for ".12~g".
+        else if (!formatTypes[type]) precision === undefined && (precision = 12), trim = true, type = "g";
+
+        // If zero fill is specified, padding goes after sign and before digits.
+        if (zero || (fill === "0" && align === "=")) zero = true, fill = "0", align = "=";
+
+        // Compute the prefix and suffix.
+        // For SI-prefix, the suffix is lazily computed.
+        var prefix = symbol === "$" ? currencyPrefix : symbol === "#" && /[boxX]/.test(type) ? "0" + type.toLowerCase() : "",
+            suffix = symbol === "$" ? currencySuffix : /[%p]/.test(type) ? percent : "";
+
+        // What format function should we use?
+        // Is this an integer type?
+        // Can this type generate exponential notation?
+        var formatType = formatTypes[type],
+            maybeSuffix = /[defgprs%]/.test(type);
+
+        // Set the default precision if not specified,
+        // or clamp the specified precision to the supported range.
+        // For significant precision, it must be in [1, 21].
+        // For fixed precision, it must be in [0, 20].
+        precision = precision === undefined ? 6
+            : /[gprs]/.test(type) ? Math.max(1, Math.min(21, precision))
+            : Math.max(0, Math.min(20, precision));
+
+        function format(value) {
+          var valuePrefix = prefix,
+              valueSuffix = suffix,
+              i, n, c;
+
+          if (type === "c") {
+            valueSuffix = formatType(value) + valueSuffix;
+            value = "";
+          } else {
+            value = +value;
+
+            // Determine the sign. -0 is not less than 0, but 1 / -0 is!
+            var valueNegative = value < 0 || 1 / value < 0;
+
+            // Perform the initial formatting.
+            value = isNaN(value) ? nan : formatType(Math.abs(value), precision);
+
+            // Trim insignificant zeros.
+            if (trim) value = formatTrim(value);
+
+            // If a negative value rounds to zero after formatting, and no explicit positive sign is requested, hide the sign.
+            if (valueNegative && +value === 0 && sign !== "+") valueNegative = false;
+
+            // Compute the prefix and suffix.
+            valuePrefix = (valueNegative ? (sign === "(" ? sign : minus) : sign === "-" || sign === "(" ? "" : sign) + valuePrefix;
+            valueSuffix = (type === "s" ? prefixes[8 + prefixExponent / 3] : "") + valueSuffix + (valueNegative && sign === "(" ? ")" : "");
+
+            // Break the formatted value into the integer “value” part that can be
+            // grouped, and fractional or exponential “suffix” part that is not.
+            if (maybeSuffix) {
+              i = -1, n = value.length;
+              while (++i < n) {
+                if (c = value.charCodeAt(i), 48 > c || c > 57) {
+                  valueSuffix = (c === 46 ? decimal + value.slice(i + 1) : value.slice(i)) + valueSuffix;
+                  value = value.slice(0, i);
+                  break;
+                }
+              }
+            }
+          }
+
+          // If the fill character is not "0", grouping is applied before padding.
+          if (comma && !zero) value = group(value, Infinity);
+
+          // Compute the padding.
+          var length = valuePrefix.length + value.length + valueSuffix.length,
+              padding = length < width ? new Array(width - length + 1).join(fill) : "";
+
+          // If the fill character is "0", grouping is applied after padding.
+          if (comma && zero) value = group(padding + value, padding.length ? width - valueSuffix.length : Infinity), padding = "";
+
+          // Reconstruct the final output based on the desired alignment.
+          switch (align) {
+            case "<": value = valuePrefix + value + valueSuffix + padding; break;
+            case "=": value = valuePrefix + padding + value + valueSuffix; break;
+            case "^": value = padding.slice(0, length = padding.length >> 1) + valuePrefix + value + valueSuffix + padding.slice(length); break;
+            default: value = padding + valuePrefix + value + valueSuffix; break;
+          }
+
+          return numerals(value);
+        }
+
+        format.toString = function() {
+          return specifier + "";
+        };
+
+        return format;
+      }
+
+      function formatPrefix(specifier, value) {
+        var f = newFormat((specifier = formatSpecifier(specifier), specifier.type = "f", specifier)),
+            e = Math.max(-8, Math.min(8, Math.floor(exponent(value) / 3))) * 3,
+            k = Math.pow(10, -e),
+            prefix = prefixes[8 + e / 3];
+        return function(value) {
+          return f(k * value) + prefix;
+        };
+      }
+
+      return {
+        format: newFormat,
+        formatPrefix: formatPrefix
+      };
+    }
+
+    var locale;
+    var format;
+    var formatPrefix;
+
+    defaultLocale({
+      thousands: ",",
+      grouping: [3],
+      currency: ["$", ""]
+    });
+
+    function defaultLocale(definition) {
+      locale = formatLocale(definition);
+      format = locale.format;
+      formatPrefix = locale.formatPrefix;
+      return locale;
+    }
+
+    function precisionFixed(step) {
+      return Math.max(0, -exponent(Math.abs(step)));
+    }
+
+    function precisionPrefix(step, value) {
+      return Math.max(0, Math.max(-8, Math.min(8, Math.floor(exponent(value) / 3))) * 3 - exponent(Math.abs(step)));
+    }
+
+    function precisionRound(step, max) {
+      step = Math.abs(step), max = Math.abs(max) - step;
+      return Math.max(0, exponent(max) - exponent(step)) + 1;
+    }
+
+    function tickFormat(start, stop, count, specifier) {
+      var step = tickStep(start, stop, count),
+          precision;
+      specifier = formatSpecifier(specifier == null ? ",f" : specifier);
+      switch (specifier.type) {
+        case "s": {
+          var value = Math.max(Math.abs(start), Math.abs(stop));
+          if (specifier.precision == null && !isNaN(precision = precisionPrefix(step, value))) specifier.precision = precision;
+          return formatPrefix(specifier, value);
+        }
+        case "":
+        case "e":
+        case "g":
+        case "p":
+        case "r": {
+          if (specifier.precision == null && !isNaN(precision = precisionRound(step, Math.max(Math.abs(start), Math.abs(stop))))) specifier.precision = precision - (specifier.type === "e");
+          break;
+        }
+        case "f":
+        case "%": {
+          if (specifier.precision == null && !isNaN(precision = precisionFixed(step))) specifier.precision = precision - (specifier.type === "%") * 2;
+          break;
+        }
+      }
+      return format(specifier);
+    }
+
+    function linearish(scale) {
+      var domain = scale.domain;
+
+      scale.ticks = function(count) {
+        var d = domain();
+        return ticks(d[0], d[d.length - 1], count == null ? 10 : count);
+      };
+
+      scale.tickFormat = function(count, specifier) {
+        var d = domain();
+        return tickFormat(d[0], d[d.length - 1], count == null ? 10 : count, specifier);
+      };
+
+      scale.nice = function(count) {
+        if (count == null) count = 10;
+
+        var d = domain();
+        var i0 = 0;
+        var i1 = d.length - 1;
+        var start = d[i0];
+        var stop = d[i1];
+        var prestep;
+        var step;
+        var maxIter = 10;
+
+        if (stop < start) {
+          step = start, start = stop, stop = step;
+          step = i0, i0 = i1, i1 = step;
+        }
+        
+        while (maxIter-- > 0) {
+          step = tickIncrement(start, stop, count);
+          if (step === prestep) {
+            d[i0] = start;
+            d[i1] = stop;
+            return domain(d);
+          } else if (step > 0) {
+            start = Math.floor(start / step) * step;
+            stop = Math.ceil(stop / step) * step;
+          } else if (step < 0) {
+            start = Math.ceil(start * step) / step;
+            stop = Math.floor(stop * step) / step;
+          } else {
+            break;
+          }
+          prestep = step;
+        }
+
+        return scale;
+      };
+
+      return scale;
+    }
+
+    function linear() {
+      var scale = continuous();
+
+      scale.copy = function() {
+        return copy(scale, linear());
+      };
+
+      initRange.apply(scale, arguments);
+
+      return linearish(scale);
+    }
+
+    /**
+     * Computations calculates and stores different measures which are used in the Wafermap
+     */
+    class Computations {
+        constructor(dies, axisLocation, canvasDimensions) {
+            this.baseMargin = {
+                top: 20,
+                right: 20,
+                bottom: 20,
+                left: 20
+            };
+            this.dieSizeFactor = 1.5;
+            this.defaultAlign = 0.5;
+            this.margin = this.baseMargin;
+            const gridMapDimensions = this.calculateMapDimensions(dies);
+            this.containerDimensions = this.calculateContainerDimensions(canvasDimensions, this.margin);
+            this.horizontalScale = this.createHorizontalScale(axisLocation, gridMapDimensions, this.containerDimensions.width);
+            this.dieDimensions = {
+                width: this.calculateGridWidth(gridMapDimensions.cols, this.containerDimensions.width),
+                height: 0
+            };
+            this.radius = this.containerDimensions.width / 2
+                + this.dieDimensions.width * this.dieSizeFactor;
+            if (this.radius > canvasDimensions.width / 2) {
+                this.margin = this.calculateMarginWithAddition(this.radius - canvasDimensions.width / 2);
+                this.containerDimensions = this.calculateContainerDimensions(canvasDimensions, this.margin);
+                this.horizontalScale = this.createHorizontalScale(axisLocation, gridMapDimensions, this.containerDimensions.width);
+                this.dieDimensions = {
+                    width: this.calculateGridWidth(gridMapDimensions.cols, this.containerDimensions.width),
+                    height: 0
+                };
+                this.radius = this.containerDimensions.width / 2
+                    + this.dieDimensions.width * this.dieSizeFactor;
+            }
+            this.verticalScale = this.createVerticalScale(axisLocation, gridMapDimensions, this.containerDimensions.height);
+            this.dieDimensions = {
+                width: this.dieDimensions.width,
+                height: this.calculateGridHeight(gridMapDimensions.rows, this.containerDimensions.height)
+            };
+        }
+        calculateMapDimensions(dies) {
+            if (dies.length === 0 || dies[0] === undefined)
+                return { origin: { x: 0, y: 0 }, rows: 0, cols: 0 };
+            const minPoint = { x: dies[0].x, y: dies[0].y };
+            const maxPoint = { x: dies[0].x, y: dies[0].y };
+            for (const die of dies) {
+                if (die.x < minPoint.x)
+                    minPoint.x = die.x;
+                if (die.y < minPoint.y)
+                    minPoint.y = die.y;
+                if (die.x > maxPoint.x)
+                    maxPoint.x = die.x;
+                if (die.y > maxPoint.y)
+                    maxPoint.y = die.y;
+            }
+            return {
+                origin: minPoint,
+                rows: maxPoint.y - minPoint.y + 1,
+                cols: maxPoint.x - minPoint.x + 1
+            };
+        }
+        calculateContainerDimensions(canvasDimensions, margin) {
+            return {
+                width: canvasDimensions.width - margin.left - margin.right,
+                height: canvasDimensions.height - margin.top - margin.bottom
+            };
+        }
+        createHorizontalScale(axisLocation, grid, containerWidth) {
+            if (axisLocation === WaferMapQuadrant.bottomLeft
+                || axisLocation === WaferMapQuadrant.topLeft) {
+                return linear()
+                    .domain([grid.origin.x, grid.origin.x + grid.cols])
+                    .range([0, containerWidth]);
+            }
+            return linear()
+                .domain([grid.origin.x - 1, grid.origin.x + grid.cols - 1])
+                .range([containerWidth, 0]);
+        }
+        createVerticalScale(axisLocation, grid, containerHeight) {
+            if (axisLocation === WaferMapQuadrant.bottomLeft
+                || axisLocation === WaferMapQuadrant.bottomRight) {
+                return linear()
+                    .domain([grid.origin.y - 1, grid.origin.y + grid.rows - 1])
+                    .range([containerHeight, 0]);
+            }
+            return linear()
+                .domain([grid.origin.y, grid.origin.y + grid.rows])
+                .range([0, containerHeight]);
+        }
+        calculateGridWidth(cols, containerWidth) {
+            return band()
+                .align(this.defaultAlign)
+                .padding(0)
+                .domain(this.horizontalScale.ticks(cols))
+                .range([0, containerWidth])
+                .bandwidth();
+        }
+        calculateGridHeight(rows, containerHeight) {
+            return band()
+                .align(this.defaultAlign)
+                .padding(0)
+                .domain(this.verticalScale.ticks(rows))
+                .range([0, containerHeight])
+                .bandwidth();
+        }
+        calculateMarginWithAddition(baseAddition = 0) {
+            return {
+                top: this.baseMargin.top + baseAddition,
+                right: this.baseMargin.right + baseAddition,
+                bottom: this.baseMargin.bottom + baseAddition,
+                left: this.baseMargin.top + baseAddition
+            };
+        }
+    }
+
+    /**
+     * Ensures that an input number does not exceed a max value and is not less than a min value.
+     * @param i - the number to clamp
+     * @param min - the maximum (inclusive) value
+     * @param max - the minimum (inclusive) value
+     * @public
+     */
+    function clamp(i, min, max) {
+        if (isNaN(i) || i <= min) {
+            return min;
+        }
+        else if (i >= max) {
+            return max;
+        }
+        return i;
+    }
+    /**
+     * Scales an input to a number between 0 and 1
+     * @param i - a number between min and max
+     * @param min - the max value
+     * @param max - the min value
+     * @public
+     */
+    function normalize(i, min, max) {
+        if (isNaN(i) || i <= min) {
+            return 0.0;
+        }
+        else if (i >= max) {
+            return 1.0;
+        }
+        return i / (max - min);
+    }
+    /**
+     * Scales a number between 0 and 1
+     * @param i - the number to denormalize
+     * @param min - the min value
+     * @param max - the max value
+     * @public
+     */
+    function denormalize(i, min, max) {
+        if (isNaN(i)) {
+            return min;
+        }
+        return min + i * (max - min);
+    }
+    /**
+     * Converts a number between 0 and 255 to a hex string.
+     * @param i - the number to convert to a hex string
+     * @public
+     */
+    function getHexStringForByte(i) {
+        const s = Math.round(clamp(i, 0.0, 255.0)).toString(16);
+        if (s.length === 1) {
+            return "0" + s;
+        }
+        return s;
+    }
+    /**
+     *
+     * Will return infinity if i*10^(precision) overflows number
+     * note that floating point rounding rules come into play here
+     * so values that end up rounding on a .5 round to the nearest
+     * even not always up so 2.5 rounds to 2
+     * @param i - the number to round
+     * @param precision - the precision to round to
+     *
+     * @public
+     */
+    function roundToPrecisionSmall(i, precision) {
+        const factor = Math.pow(10, precision);
+        return Math.round(i * factor) / factor;
+    }
+
+    /**
+     * A RGBA color with 64 bit channels.
+     *
+     * @example
+     * ```ts
+     * new ColorRGBA64(1, 0, 0, 1) // red
+     * ```
+     * @public
+     */
+    class ColorRGBA64 {
+        /**
+         *
+         * @param red - the red value
+         * @param green - the green value
+         * @param blue - the blue value
+         * @param alpha - the alpha value
+         */
+        constructor(red, green, blue, alpha) {
+            this.r = red;
+            this.g = green;
+            this.b = blue;
+            this.a = typeof alpha === "number" && !isNaN(alpha) ? alpha : 1;
+        }
+        /**
+         * Construct a {@link ColorRGBA64} from a {@link ColorRGBA64Config}
+         * @param data - the config object
+         */
+        static fromObject(data) {
+            return data && !isNaN(data.r) && !isNaN(data.g) && !isNaN(data.b)
+                ? new ColorRGBA64(data.r, data.g, data.b, data.a)
+                : null;
+        }
+        /**
+         * Determines if one color is equal to another.
+         * @param rhs - the color to compare
+         */
+        equalValue(rhs) {
+            return (this.r === rhs.r && this.g === rhs.g && this.b === rhs.b && this.a === rhs.a);
+        }
+        /**
+         * Returns the color formatted as a string; #RRGGBB
+         */
+        toStringHexRGB() {
+            return "#" + [this.r, this.g, this.b].map(this.formatHexValue).join("");
+        }
+        /**
+         * Returns the color formatted as a string; #RRGGBBAA
+         */
+        toStringHexRGBA() {
+            return this.toStringHexRGB() + this.formatHexValue(this.a);
+        }
+        /**
+         * Returns the color formatted as a string; #AARRGGBB
+         */
+        toStringHexARGB() {
+            return "#" + [this.a, this.r, this.g, this.b].map(this.formatHexValue).join("");
+        }
+        /**
+         * Returns the color formatted as a string; "rgb(0xRR, 0xGG, 0xBB)"
+         */
+        toStringWebRGB() {
+            return `rgb(${Math.round(denormalize(this.r, 0.0, 255.0))},${Math.round(denormalize(this.g, 0.0, 255.0))},${Math.round(denormalize(this.b, 0.0, 255.0))})`;
+        }
+        /**
+         * Returns the color formatted as a string; "rgba(0xRR, 0xGG, 0xBB, a)"
+         * @remarks
+         * Note that this follows the convention of putting alpha in the range [0.0,1.0] while the other three channels are [0,255]
+         */
+        toStringWebRGBA() {
+            return `rgba(${Math.round(denormalize(this.r, 0.0, 255.0))},${Math.round(denormalize(this.g, 0.0, 255.0))},${Math.round(denormalize(this.b, 0.0, 255.0))},${clamp(this.a, 0, 1)})`;
+        }
+        /**
+         * Returns a new {@link ColorRGBA64} rounded to the provided precision
+         * @param precision - the precision to round to
+         */
+        roundToPrecision(precision) {
+            return new ColorRGBA64(roundToPrecisionSmall(this.r, precision), roundToPrecisionSmall(this.g, precision), roundToPrecisionSmall(this.b, precision), roundToPrecisionSmall(this.a, precision));
+        }
+        /**
+         * Returns a new {@link ColorRGBA64} with channel values clamped between 0 and 1.
+         */
+        clamp() {
+            return new ColorRGBA64(clamp(this.r, 0, 1), clamp(this.g, 0, 1), clamp(this.b, 0, 1), clamp(this.a, 0, 1));
+        }
+        /**
+         * Converts the {@link ColorRGBA64} to a {@link ColorRGBA64Config}.
+         */
+        toObject() {
+            return { r: this.r, g: this.g, b: this.b, a: this.a };
+        }
+        formatHexValue(value) {
+            return getHexStringForByte(denormalize(value, 0.0, 255.0));
+        }
+    }
+
+    const namedColorsConfigs = {
+        aliceblue: {
+            r: 0.941176,
+            g: 0.972549,
+            b: 1,
+        },
+        antiquewhite: {
+            r: 0.980392,
+            g: 0.921569,
+            b: 0.843137,
+        },
+        aqua: {
+            r: 0,
+            g: 1,
+            b: 1,
+        },
+        aquamarine: {
+            r: 0.498039,
+            g: 1,
+            b: 0.831373,
+        },
+        azure: {
+            r: 0.941176,
+            g: 1,
+            b: 1,
+        },
+        beige: {
+            r: 0.960784,
+            g: 0.960784,
+            b: 0.862745,
+        },
+        bisque: {
+            r: 1,
+            g: 0.894118,
+            b: 0.768627,
+        },
+        black: {
+            r: 0,
+            g: 0,
+            b: 0,
+        },
+        blanchedalmond: {
+            r: 1,
+            g: 0.921569,
+            b: 0.803922,
+        },
+        blue: {
+            r: 0,
+            g: 0,
+            b: 1,
+        },
+        blueviolet: {
+            r: 0.541176,
+            g: 0.168627,
+            b: 0.886275,
+        },
+        brown: {
+            r: 0.647059,
+            g: 0.164706,
+            b: 0.164706,
+        },
+        burlywood: {
+            r: 0.870588,
+            g: 0.721569,
+            b: 0.529412,
+        },
+        cadetblue: {
+            r: 0.372549,
+            g: 0.619608,
+            b: 0.627451,
+        },
+        chartreuse: {
+            r: 0.498039,
+            g: 1,
+            b: 0,
+        },
+        chocolate: {
+            r: 0.823529,
+            g: 0.411765,
+            b: 0.117647,
+        },
+        coral: {
+            r: 1,
+            g: 0.498039,
+            b: 0.313725,
+        },
+        cornflowerblue: {
+            r: 0.392157,
+            g: 0.584314,
+            b: 0.929412,
+        },
+        cornsilk: {
+            r: 1,
+            g: 0.972549,
+            b: 0.862745,
+        },
+        crimson: {
+            r: 0.862745,
+            g: 0.078431,
+            b: 0.235294,
+        },
+        cyan: {
+            r: 0,
+            g: 1,
+            b: 1,
+        },
+        darkblue: {
+            r: 0,
+            g: 0,
+            b: 0.545098,
+        },
+        darkcyan: {
+            r: 0,
+            g: 0.545098,
+            b: 0.545098,
+        },
+        darkgoldenrod: {
+            r: 0.721569,
+            g: 0.52549,
+            b: 0.043137,
+        },
+        darkgray: {
+            r: 0.662745,
+            g: 0.662745,
+            b: 0.662745,
+        },
+        darkgreen: {
+            r: 0,
+            g: 0.392157,
+            b: 0,
+        },
+        darkgrey: {
+            r: 0.662745,
+            g: 0.662745,
+            b: 0.662745,
+        },
+        darkkhaki: {
+            r: 0.741176,
+            g: 0.717647,
+            b: 0.419608,
+        },
+        darkmagenta: {
+            r: 0.545098,
+            g: 0,
+            b: 0.545098,
+        },
+        darkolivegreen: {
+            r: 0.333333,
+            g: 0.419608,
+            b: 0.184314,
+        },
+        darkorange: {
+            r: 1,
+            g: 0.54902,
+            b: 0,
+        },
+        darkorchid: {
+            r: 0.6,
+            g: 0.196078,
+            b: 0.8,
+        },
+        darkred: {
+            r: 0.545098,
+            g: 0,
+            b: 0,
+        },
+        darksalmon: {
+            r: 0.913725,
+            g: 0.588235,
+            b: 0.478431,
+        },
+        darkseagreen: {
+            r: 0.560784,
+            g: 0.737255,
+            b: 0.560784,
+        },
+        darkslateblue: {
+            r: 0.282353,
+            g: 0.239216,
+            b: 0.545098,
+        },
+        darkslategray: {
+            r: 0.184314,
+            g: 0.309804,
+            b: 0.309804,
+        },
+        darkslategrey: {
+            r: 0.184314,
+            g: 0.309804,
+            b: 0.309804,
+        },
+        darkturquoise: {
+            r: 0,
+            g: 0.807843,
+            b: 0.819608,
+        },
+        darkviolet: {
+            r: 0.580392,
+            g: 0,
+            b: 0.827451,
+        },
+        deeppink: {
+            r: 1,
+            g: 0.078431,
+            b: 0.576471,
+        },
+        deepskyblue: {
+            r: 0,
+            g: 0.74902,
+            b: 1,
+        },
+        dimgray: {
+            r: 0.411765,
+            g: 0.411765,
+            b: 0.411765,
+        },
+        dimgrey: {
+            r: 0.411765,
+            g: 0.411765,
+            b: 0.411765,
+        },
+        dodgerblue: {
+            r: 0.117647,
+            g: 0.564706,
+            b: 1,
+        },
+        firebrick: {
+            r: 0.698039,
+            g: 0.133333,
+            b: 0.133333,
+        },
+        floralwhite: {
+            r: 1,
+            g: 0.980392,
+            b: 0.941176,
+        },
+        forestgreen: {
+            r: 0.133333,
+            g: 0.545098,
+            b: 0.133333,
+        },
+        fuchsia: {
+            r: 1,
+            g: 0,
+            b: 1,
+        },
+        gainsboro: {
+            r: 0.862745,
+            g: 0.862745,
+            b: 0.862745,
+        },
+        ghostwhite: {
+            r: 0.972549,
+            g: 0.972549,
+            b: 1,
+        },
+        gold: {
+            r: 1,
+            g: 0.843137,
+            b: 0,
+        },
+        goldenrod: {
+            r: 0.854902,
+            g: 0.647059,
+            b: 0.12549,
+        },
+        gray: {
+            r: 0.501961,
+            g: 0.501961,
+            b: 0.501961,
+        },
+        green: {
+            r: 0,
+            g: 0.501961,
+            b: 0,
+        },
+        greenyellow: {
+            r: 0.678431,
+            g: 1,
+            b: 0.184314,
+        },
+        grey: {
+            r: 0.501961,
+            g: 0.501961,
+            b: 0.501961,
+        },
+        honeydew: {
+            r: 0.941176,
+            g: 1,
+            b: 0.941176,
+        },
+        hotpink: {
+            r: 1,
+            g: 0.411765,
+            b: 0.705882,
+        },
+        indianred: {
+            r: 0.803922,
+            g: 0.360784,
+            b: 0.360784,
+        },
+        indigo: {
+            r: 0.294118,
+            g: 0,
+            b: 0.509804,
+        },
+        ivory: {
+            r: 1,
+            g: 1,
+            b: 0.941176,
+        },
+        khaki: {
+            r: 0.941176,
+            g: 0.901961,
+            b: 0.54902,
+        },
+        lavender: {
+            r: 0.901961,
+            g: 0.901961,
+            b: 0.980392,
+        },
+        lavenderblush: {
+            r: 1,
+            g: 0.941176,
+            b: 0.960784,
+        },
+        lawngreen: {
+            r: 0.486275,
+            g: 0.988235,
+            b: 0,
+        },
+        lemonchiffon: {
+            r: 1,
+            g: 0.980392,
+            b: 0.803922,
+        },
+        lightblue: {
+            r: 0.678431,
+            g: 0.847059,
+            b: 0.901961,
+        },
+        lightcoral: {
+            r: 0.941176,
+            g: 0.501961,
+            b: 0.501961,
+        },
+        lightcyan: {
+            r: 0.878431,
+            g: 1,
+            b: 1,
+        },
+        lightgoldenrodyellow: {
+            r: 0.980392,
+            g: 0.980392,
+            b: 0.823529,
+        },
+        lightgray: {
+            r: 0.827451,
+            g: 0.827451,
+            b: 0.827451,
+        },
+        lightgreen: {
+            r: 0.564706,
+            g: 0.933333,
+            b: 0.564706,
+        },
+        lightgrey: {
+            r: 0.827451,
+            g: 0.827451,
+            b: 0.827451,
+        },
+        lightpink: {
+            r: 1,
+            g: 0.713725,
+            b: 0.756863,
+        },
+        lightsalmon: {
+            r: 1,
+            g: 0.627451,
+            b: 0.478431,
+        },
+        lightseagreen: {
+            r: 0.12549,
+            g: 0.698039,
+            b: 0.666667,
+        },
+        lightskyblue: {
+            r: 0.529412,
+            g: 0.807843,
+            b: 0.980392,
+        },
+        lightslategray: {
+            r: 0.466667,
+            g: 0.533333,
+            b: 0.6,
+        },
+        lightslategrey: {
+            r: 0.466667,
+            g: 0.533333,
+            b: 0.6,
+        },
+        lightsteelblue: {
+            r: 0.690196,
+            g: 0.768627,
+            b: 0.870588,
+        },
+        lightyellow: {
+            r: 1,
+            g: 1,
+            b: 0.878431,
+        },
+        lime: {
+            r: 0,
+            g: 1,
+            b: 0,
+        },
+        limegreen: {
+            r: 0.196078,
+            g: 0.803922,
+            b: 0.196078,
+        },
+        linen: {
+            r: 0.980392,
+            g: 0.941176,
+            b: 0.901961,
+        },
+        magenta: {
+            r: 1,
+            g: 0,
+            b: 1,
+        },
+        maroon: {
+            r: 0.501961,
+            g: 0,
+            b: 0,
+        },
+        mediumaquamarine: {
+            r: 0.4,
+            g: 0.803922,
+            b: 0.666667,
+        },
+        mediumblue: {
+            r: 0,
+            g: 0,
+            b: 0.803922,
+        },
+        mediumorchid: {
+            r: 0.729412,
+            g: 0.333333,
+            b: 0.827451,
+        },
+        mediumpurple: {
+            r: 0.576471,
+            g: 0.439216,
+            b: 0.858824,
+        },
+        mediumseagreen: {
+            r: 0.235294,
+            g: 0.701961,
+            b: 0.443137,
+        },
+        mediumslateblue: {
+            r: 0.482353,
+            g: 0.407843,
+            b: 0.933333,
+        },
+        mediumspringgreen: {
+            r: 0,
+            g: 0.980392,
+            b: 0.603922,
+        },
+        mediumturquoise: {
+            r: 0.282353,
+            g: 0.819608,
+            b: 0.8,
+        },
+        mediumvioletred: {
+            r: 0.780392,
+            g: 0.082353,
+            b: 0.521569,
+        },
+        midnightblue: {
+            r: 0.098039,
+            g: 0.098039,
+            b: 0.439216,
+        },
+        mintcream: {
+            r: 0.960784,
+            g: 1,
+            b: 0.980392,
+        },
+        mistyrose: {
+            r: 1,
+            g: 0.894118,
+            b: 0.882353,
+        },
+        moccasin: {
+            r: 1,
+            g: 0.894118,
+            b: 0.709804,
+        },
+        navajowhite: {
+            r: 1,
+            g: 0.870588,
+            b: 0.678431,
+        },
+        navy: {
+            r: 0,
+            g: 0,
+            b: 0.501961,
+        },
+        oldlace: {
+            r: 0.992157,
+            g: 0.960784,
+            b: 0.901961,
+        },
+        olive: {
+            r: 0.501961,
+            g: 0.501961,
+            b: 0,
+        },
+        olivedrab: {
+            r: 0.419608,
+            g: 0.556863,
+            b: 0.137255,
+        },
+        orange: {
+            r: 1,
+            g: 0.647059,
+            b: 0,
+        },
+        orangered: {
+            r: 1,
+            g: 0.270588,
+            b: 0,
+        },
+        orchid: {
+            r: 0.854902,
+            g: 0.439216,
+            b: 0.839216,
+        },
+        palegoldenrod: {
+            r: 0.933333,
+            g: 0.909804,
+            b: 0.666667,
+        },
+        palegreen: {
+            r: 0.596078,
+            g: 0.984314,
+            b: 0.596078,
+        },
+        paleturquoise: {
+            r: 0.686275,
+            g: 0.933333,
+            b: 0.933333,
+        },
+        palevioletred: {
+            r: 0.858824,
+            g: 0.439216,
+            b: 0.576471,
+        },
+        papayawhip: {
+            r: 1,
+            g: 0.937255,
+            b: 0.835294,
+        },
+        peachpuff: {
+            r: 1,
+            g: 0.854902,
+            b: 0.72549,
+        },
+        peru: {
+            r: 0.803922,
+            g: 0.521569,
+            b: 0.247059,
+        },
+        pink: {
+            r: 1,
+            g: 0.752941,
+            b: 0.796078,
+        },
+        plum: {
+            r: 0.866667,
+            g: 0.627451,
+            b: 0.866667,
+        },
+        powderblue: {
+            r: 0.690196,
+            g: 0.878431,
+            b: 0.901961,
+        },
+        purple: {
+            r: 0.501961,
+            g: 0,
+            b: 0.501961,
+        },
+        red: {
+            r: 1,
+            g: 0,
+            b: 0,
+        },
+        rosybrown: {
+            r: 0.737255,
+            g: 0.560784,
+            b: 0.560784,
+        },
+        royalblue: {
+            r: 0.254902,
+            g: 0.411765,
+            b: 0.882353,
+        },
+        saddlebrown: {
+            r: 0.545098,
+            g: 0.270588,
+            b: 0.07451,
+        },
+        salmon: {
+            r: 0.980392,
+            g: 0.501961,
+            b: 0.447059,
+        },
+        sandybrown: {
+            r: 0.956863,
+            g: 0.643137,
+            b: 0.376471,
+        },
+        seagreen: {
+            r: 0.180392,
+            g: 0.545098,
+            b: 0.341176,
+        },
+        seashell: {
+            r: 1,
+            g: 0.960784,
+            b: 0.933333,
+        },
+        sienna: {
+            r: 0.627451,
+            g: 0.321569,
+            b: 0.176471,
+        },
+        silver: {
+            r: 0.752941,
+            g: 0.752941,
+            b: 0.752941,
+        },
+        skyblue: {
+            r: 0.529412,
+            g: 0.807843,
+            b: 0.921569,
+        },
+        slateblue: {
+            r: 0.415686,
+            g: 0.352941,
+            b: 0.803922,
+        },
+        slategray: {
+            r: 0.439216,
+            g: 0.501961,
+            b: 0.564706,
+        },
+        slategrey: {
+            r: 0.439216,
+            g: 0.501961,
+            b: 0.564706,
+        },
+        snow: {
+            r: 1,
+            g: 0.980392,
+            b: 0.980392,
+        },
+        springgreen: {
+            r: 0,
+            g: 1,
+            b: 0.498039,
+        },
+        steelblue: {
+            r: 0.27451,
+            g: 0.509804,
+            b: 0.705882,
+        },
+        tan: {
+            r: 0.823529,
+            g: 0.705882,
+            b: 0.54902,
+        },
+        teal: {
+            r: 0,
+            g: 0.501961,
+            b: 0.501961,
+        },
+        thistle: {
+            r: 0.847059,
+            g: 0.74902,
+            b: 0.847059,
+        },
+        tomato: {
+            r: 1,
+            g: 0.388235,
+            b: 0.278431,
+        },
+        transparent: {
+            r: 0,
+            g: 0,
+            b: 0,
+            a: 0,
+        },
+        turquoise: {
+            r: 0.25098,
+            g: 0.878431,
+            b: 0.815686,
+        },
+        violet: {
+            r: 0.933333,
+            g: 0.509804,
+            b: 0.933333,
+        },
+        wheat: {
+            r: 0.960784,
+            g: 0.870588,
+            b: 0.701961,
+        },
+        white: {
+            r: 1,
+            g: 1,
+            b: 1,
+        },
+        whitesmoke: {
+            r: 0.960784,
+            g: 0.960784,
+            b: 0.960784,
+        },
+        yellow: {
+            r: 1,
+            g: 1,
+            b: 0,
+        },
+        yellowgreen: {
+            r: 0.603922,
+            g: 0.803922,
+            b: 0.196078,
+        },
+    };
+
+    // Matches rgb(R, G, B) where R, G, and B are integers [0 - 255]
+    const webRGBRegex = /^rgb\(\s*((?:(?:25[0-5]|2[0-4]\d|1\d\d|\d{1,2})\s*,\s*){2}(?:25[0-5]|2[0-4]\d|1\d\d|\d{1,2})\s*)\)$/i;
+    // Matches rgb(R, G, B, A) where R, G, and B are integers [0 - 255] and A is [0-1] floating
+    const webRGBARegex = /^rgba\(\s*((?:(?:25[0-5]|2[0-4]\d|1\d\d|\d{1,2})\s*,\s*){3}(?:0|1|0?\.\d*)\s*)\)$/i;
+    // Matches #RGB and #RRGGBB, where R, G, and B are [0-9] or [A-F]
+    const hexRGBRegex = /^#((?:[0-9a-f]{6}|[0-9a-f]{3}))$/i;
+    // Matches #RGB and #RRGGBBAA, where R, G, B, and A are [0-9] or [A-F]
+    const hexRGBARegex = /^#((?:[0-9a-f]{8}|[0-9a-f]{4}))$/i;
+    /**
+     * Test if a color matches #RRGGBB or #RGB
+     * @public
+     */
+    function isColorStringHexRGB(raw) {
+        return hexRGBRegex.test(raw);
+    }
+    /**
+     * Test if a color matches #AARRGGBB or #ARGB
+     * @public
+     */
+    function isColorStringHexARGB(raw) {
+        return hexRGBARegex.test(raw);
+    }
+    /**
+     * Test if a color matches #RRGGBBAA or #RGBA
+     * @public
+     */
+    function isColorStringHexRGBA(raw) {
+        return isColorStringHexARGB(raw); // No way to differentiate these two formats, so just use the same test
+    }
+    /**
+     * Test if a color matches rgb(rr, gg, bb)
+     * @public
+     */
+    function isColorStringWebRGB(raw) {
+        return webRGBRegex.test(raw);
+    }
+    /**
+     * Test if a color matches rgba(rr, gg, bb, aa)
+     *
+     * @public
+     */
+    function isColorStringWebRGBA(raw) {
+        return webRGBARegex.test(raw);
+    }
+    /**
+     * Tests whether a color is in {@link @microsoft/fast-colors#NamedColors}.
+     * @param raw - the color name to test
+     * @public
+     */
+    function isColorNamed(raw) {
+        return namedColorsConfigs.hasOwnProperty(raw);
+    }
+    /**
+     * Converts a hexadecimal color string to a {@link @microsoft/fast-colors#ColorRGBA64}.
+     * @param raw - a color string in the form of "#RRGGBB" or "#RGB"
+     * @example
+     * ```ts
+     * parseColorHexRGBA("#FF0000");
+     * parseColorHexRGBA("#F00");
+     * ```
+     * @public
+     */
+    function parseColorHexRGB(raw) {
+        const result = hexRGBRegex.exec(raw);
+        if (result === null) {
+            return null;
+        }
+        let digits = result[1];
+        if (digits.length === 3) {
+            const r = digits.charAt(0);
+            const g = digits.charAt(1);
+            const b = digits.charAt(2);
+            digits = r.concat(r, g, g, b, b);
+        }
+        const rawInt = parseInt(digits, 16);
+        if (isNaN(rawInt)) {
+            return null;
+        }
+        // Note the use of >>> rather than >> as we want JS to manipulate these as unsigned numbers
+        return new ColorRGBA64(normalize((rawInt & 0xff0000) >>> 16, 0, 255), normalize((rawInt & 0x00ff00) >>> 8, 0, 255), normalize(rawInt & 0x0000ff, 0, 255), 1);
+    }
+    /**
+     * Converts a hexadecimal color string to a {@link @microsoft/fast-colors#ColorRGBA64}.
+     * @param raw - a color string in the form of "#AARRGGBB" or "#ARGB"
+     * @example
+     * ```ts
+     * parseColorHexRGBA("#AAFF0000");
+     * parseColorHexRGBA("#AF00");
+     * ```
+     * @public
+     */
+    function parseColorHexARGB(raw) {
+        const result = hexRGBARegex.exec(raw);
+        if (result === null) {
+            return null;
+        }
+        let digits = result[1];
+        if (digits.length === 4) {
+            const a = digits.charAt(0);
+            const r = digits.charAt(1);
+            const g = digits.charAt(2);
+            const b = digits.charAt(3);
+            digits = a.concat(a, r, r, g, g, b, b);
+        }
+        const rawInt = parseInt(digits, 16);
+        if (isNaN(rawInt)) {
+            return null;
+        }
+        // Note the use of >>> rather than >> as we want JS to manipulate these as unsigned numbers
+        return new ColorRGBA64(normalize((rawInt & 0x00ff0000) >>> 16, 0, 255), normalize((rawInt & 0x0000ff00) >>> 8, 0, 255), normalize(rawInt & 0x000000ff, 0, 255), normalize((rawInt & 0xff000000) >>> 24, 0, 255));
+    }
+    /**
+     * Converts a rgb color string to a {@link @microsoft/fast-colors#ColorRGBA64}.
+     * @param raw - a color string format "rgba(RR,GG,BB)" where RR,GG,BB are [0,255]
+     * @example
+     * ```ts
+     * parseColorWebRGB("rgba(255, 0, 0");
+     * ```
+     * @public
+     */
+    function parseColorWebRGB(raw) {
+        const result = webRGBRegex.exec(raw);
+        if (result === null) {
+            return null;
+        }
+        const split = result[1].split(",");
+        return new ColorRGBA64(normalize(Number(split[0]), 0, 255), normalize(Number(split[1]), 0, 255), normalize(Number(split[2]), 0, 255), 1);
+    }
+    /**
+     * Converts a rgba color string to a {@link @microsoft/fast-colors#ColorRGBA64}.
+     * @param raw - a color string format "rgba(RR,GG,BB,a)" where RR,GG,BB are [0,255] and a is [0,1]
+     * @example
+     * ```ts
+     * parseColorWebRGBA("rgba(255, 0, 0, 1");
+     * ```
+     * @public
+     */
+    function parseColorWebRGBA(raw) {
+        const result = webRGBARegex.exec(raw);
+        if (result === null) {
+            return null;
+        }
+        const split = result[1].split(",");
+        if (split.length === 4) {
+            return new ColorRGBA64(normalize(Number(split[0]), 0, 255), normalize(Number(split[1]), 0, 255), normalize(Number(split[2]), 0, 255), Number(split[3]));
+        }
+        return null;
+    }
+    /**
+     * Converts a named color to a {@link @microsoft/fast-colors#ColorRGBA64}.
+     * @param raw - a {@link https://www.w3schools.com/colors/colors_names.asp | CSS color name}.
+     * @example
+     * ```ts
+     * parseColorNamed("red");
+     * ```
+     * @public
+     */
+    function parseColorNamed(raw) {
+        // const rawLower: typeof raw =  raw.toLowerCase() : raw.toString();
+        const config = namedColorsConfigs[raw.toLowerCase()];
+        return config
+            ? new ColorRGBA64(config.r, config.g, config.b, config.hasOwnProperty("a") ? config.a : void 0)
+            : null;
+    }
+    /**
+     *
+      Expects any of the following and attempts to determine which is being used
+     * #RRGGBB, #AARRGGBB, rgb(RR,GG,BB) rgba(RR,GG,BB,a),
+     * or any of the {@link https://www.w3schools.com/colors/colors_names.asp | CSS color names}.
+     * @param raw - the color string to parse
+     * @public
+     */
+    function parseColor(raw) {
+        const rawLower = raw.toLowerCase();
+        return isColorStringHexRGB(rawLower)
+            ? parseColorHexRGB(rawLower)
+            : isColorStringHexRGBA(rawLower)
+                ? parseColorHexARGB(rawLower)
+                : isColorStringWebRGB(rawLower)
+                    ? parseColorWebRGB(rawLower)
+                    : isColorStringWebRGBA(rawLower)
+                        ? parseColorWebRGBA(rawLower)
+                        : isColorNamed(rawLower)
+                            ? parseColorNamed(rawLower)
+                            : null;
+    }
+
+    /**
+     * Prerendering prepares render-ready dies data to be used by the rendering module
+     */
+    class Prerendering {
+        constructor(dies, colorScale, highlightedValues, horizontalScale, verticalScale, colorScaleMode, dieLabelsHidden, dieLabelsSuffix, maxCharacters, dieDimensions, margin) {
+            this.fontSizeFactor = 0.8;
+            this.nonHighlightedOpacity = 0.3;
+            this.emptyDieColor = 'rgba(218,223,236,1)';
+            this.nanDieColor = 'rgba(122,122,122,1)';
+            this.d3ColorScale = this.createD3ColorScale(colorScale, colorScaleMode);
+            this.labelsFontSize = this.calculateLabelsFontSize(dieDimensions, maxCharacters);
+            this.diesRenderInfo = [];
+            for (const die of dies) {
+                this.diesRenderInfo.push({
+                    x: horizontalScale(die.x) + margin.right,
+                    y: verticalScale(die.y) + margin.top,
+                    fillStyle: this.calculateFillStyle(die.value, colorScaleMode, highlightedValues),
+                    text: this.buildLabel(die.value, maxCharacters, dieLabelsHidden, dieLabelsSuffix)
+                });
+            }
+        }
+        calculateLabelsFontSize(dieDimensions, maxCharacters) {
+            return Math.min(dieDimensions.height, (dieDimensions.width / (Math.max(2, maxCharacters) * 0.5))
+                * this.fontSizeFactor);
+        }
+        createD3ColorScale(colorScale, colorScaleMode) {
+            if (this.isColorScaleLinear(colorScaleMode)) {
+                return linear()
+                    .domain(colorScale.values.map(item => +item))
+                    .range(colorScale.colors);
+            }
+            return ordinal()
+                .domain(colorScale.values)
+                .range(colorScale.colors);
+        }
+        dieHasData(dieData) {
+            return dieData !== null && dieData !== undefined && dieData !== '';
+        }
+        buildLabel(value, maxCharacters, dieLabelsHidden, dieLabelsSuffix) {
+            if (dieLabelsHidden || !this.dieHasData(value)) {
+                return '';
+            }
+            const label = `${value}${dieLabelsSuffix}`;
+            if (label.length > maxCharacters) {
+                return `${label.substring(0, maxCharacters)}…`;
+            }
+            return label;
+        }
+        calculateOpacity(selectedValue, highlightedValues) {
+            return highlightedValues.length > 0
+                && !highlightedValues.some(dieValue => dieValue === selectedValue)
+                ? this.nonHighlightedOpacity
+                : 1;
+        }
+        isColorScaleLinear(colorScaleMode) {
+            return colorScaleMode === WaferMapColorScaleMode.linear;
+        }
+        isColorScaleOrdinal(colorScaleMode) {
+            return colorScaleMode === WaferMapColorScaleMode.ordinal;
+        }
+        calculateFillStyle(value, colorScaleMode, highlightedValues) {
+            let colorValue = this.emptyDieColor;
+            if (this.dieHasData(value)) {
+                if (isNaN(+value)) {
+                    colorValue = this.nanDieColor;
+                }
+                else if (this.isColorScaleLinear(colorScaleMode)) {
+                    colorValue = this.d3ColorScale(+value);
+                }
+                else if (this.isColorScaleOrdinal(colorScaleMode)) {
+                    colorValue = this.d3ColorScale(value);
+                }
+            }
+            if (colorValue === undefined) {
+                return this.emptyDieColor;
+            }
+            let rgbColor = parseColor(colorValue);
+            if (rgbColor === null) {
+                return this.emptyDieColor;
+            }
+            rgbColor = new ColorRGBA64(rgbColor.r, rgbColor.g, rgbColor.b, this.calculateOpacity(value, highlightedValues));
+            return rgbColor.toStringWebRGBA();
+        }
+    }
+
+    /**
+     * Data Manager uses Computations and Prerendering modules in order and exposes the results
+     */
+    class DataManager {
+        constructor(dies, axisLocation, canvasDimensions, colorScale, highlightedValues, colorScaleMode, dieLabelsHidden, dieLabelsSuffix, maxCharacters) {
+            this.computations = new Computations(dies, axisLocation, canvasDimensions);
+            this.prerendering = new Prerendering(dies, colorScale, highlightedValues, this.computations.horizontalScale, this.computations.verticalScale, colorScaleMode, dieLabelsHidden, dieLabelsSuffix, maxCharacters, this.computations.dieDimensions, this.computations.margin);
+        }
+        get containerDimensions() {
+            return this.computations.containerDimensions;
+        }
+        get dieDimensions() {
+            return this.computations.dieDimensions;
+        }
+        get radius() {
+            return this.computations.radius;
+        }
+        get margin() {
+            return this.computations.margin;
+        }
+        get horizontalScale() {
+            return this.computations.horizontalScale;
+        }
+        get verticalScale() {
+            return this.computations.verticalScale;
+        }
+        get labelsFontSize() {
+            return this.prerendering.labelsFontSize;
+        }
+        get diesRenderInfo() {
+            return this.prerendering.diesRenderInfo;
+        }
+        get mainCircleLocation() {
+            return {
+                x: this.computations.containerDimensions.width / 2,
+                y: this.computations.containerDimensions.height / 2
+            };
+        }
+    }
+
     /**
      * A nimble-styled WaferMap
      */
@@ -25948,13 +28761,54 @@ Instead styling against the role which is more general and likely a better appro
             this.maxCharacters = 4;
             this.dieLabelsHidden = false;
             this.dieLabelsSuffix = '';
-            this.colorsScaleMode = WaferMapColorsScaleMode.linear;
+            this.colorScaleMode = WaferMapColorScaleMode.linear;
             this.highlightedValues = [];
             this.dies = [];
             this.colorScale = {
                 colors: [],
                 values: []
             };
+            this.renderQueued = false;
+        }
+        /**
+         * @internal
+         */
+        render() {
+            this.renderQueued = false;
+            this.dataManager = new DataManager(this.dies, this.quadrant, { width: this.offsetWidth, height: this.offsetHeight }, this.colorScale, this.highlightedValues, this.colorScaleMode, this.dieLabelsHidden, this.dieLabelsSuffix, this.maxCharacters);
+        }
+        quadrantChanged() {
+            this.queueRender();
+        }
+        orientationChanged() {
+            this.queueRender();
+        }
+        maxCharactersChanged() {
+            this.queueRender();
+        }
+        dieLabelsHiddenChanged() {
+            this.queueRender();
+        }
+        dieLabelsSuffixChanged() {
+            this.queueRender();
+        }
+        colorScaleModeChanged() {
+            this.queueRender();
+        }
+        highlightedValuesChanged() {
+            this.queueRender();
+        }
+        diesChanged() {
+            this.queueRender();
+        }
+        colorScaleChanged() {
+            this.queueRender();
+        }
+        queueRender() {
+            if (!this.renderQueued) {
+                this.renderQueued = true;
+                DOM.queueUpdate(() => this.render());
+            }
         }
     }
     __decorate([
@@ -25982,9 +28836,9 @@ Instead styling against the role which is more general and likely a better appro
     ], WaferMap.prototype, "dieLabelsSuffix", void 0);
     __decorate([
         attr({
-            attribute: 'colors-scale-mode'
+            attribute: 'color-scale-mode'
         })
-    ], WaferMap.prototype, "colorsScaleMode", void 0);
+    ], WaferMap.prototype, "colorScaleMode", void 0);
     __decorate([
         observable
     ], WaferMap.prototype, "highlightedValues", void 0);