@heartlandone/vega-sandbox-pr-1455-5d901ea65a41ca8ccd43122b659d2e6ff5209a3a 2.26.0

package/dist/esm/legend-input-processor-abb0b4f4.js

@@ -0,0 +1,4739 @@
+import { g as getLongestTextLengthFromArray } from './array-506b88b9.js';
+import { a as Typography } from './typography-a8fc4764.js';
+import { a as parseNumberToPixelString, b as parsePixelStringToNumber } from './pixel-f32c07ce.js';
+
+/** The GraphContextFactory class provides a method to create and return either a HTMLCanvasElement or SVGElement based on the specified mode and container element. */
+class GraphContextFactory {
+  /**
+   * This function returns either a HTMLCanvasElement or an SVGElement based on the specified mode and container.
+   *
+   * @param {ChartGraphMode} mode - A string that specifies the mode of the chart graph. It can be either 'canvas' or 'svg'.
+   * @param {HTMLElement} container - HTMLElement - the HTML element that will contain the chart/graph.
+   * @returns {SVGElement | HTMLCanvasElement} either a HTMLCanvasElement or an SVGElement depending on the value of the `mode` parameter.
+   */
+  static get(mode, container) {
+    if (mode === 'canvas') {
+      const canvas = container.querySelector('canvas');
+      let context;
+      if (canvas) {
+        context = canvas;
+      }
+      else {
+        context = document.createElement('canvas');
+        context = container.appendChild(context);
+      }
+      return context;
+    }
+    else {
+      const svg = container.querySelector('svg');
+      let context;
+      if (svg) {
+        context = svg;
+      }
+      else {
+        context = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        context = container.appendChild(context);
+      }
+      return context;
+    }
+  }
+}
+
+/**
+ * defining an abstract class called `BaseRenderer` that takes a generic type `T` which
+ * can be either an `SVGElement` or a `HTMLCanvasElement`
+ */
+class BaseRenderer {
+  /**
+   * This is a constructor function that takes a parameter of type T and sets it as a protected property called "context".
+   *
+   * @param {unknown} context - The "context" parameter is a protected property of a class constructor that is
+   * of type "T". It is used to store a reference to an object or data that is required by the class
+   * methods to perform their tasks
+   */
+  constructor(context) {
+    this.context = context;
+  }
+}
+
+function identity$1(x) {
+  return x;
+}
+
+var top = 1,
+    right = 2,
+    bottom = 3,
+    left = 4,
+    epsilon$2 = 1e-6;
+
+function translateX(x) {
+  return "translate(" + x + ",0)";
+}
+
+function translateY(y) {
+  return "translate(0," + y + ")";
+}
+
+function number(scale) {
+  return d => +scale(d);
+}
+
+function center(scale, offset) {
+  offset = Math.max(0, scale.bandwidth() - offset * 2) / 2;
+  if (scale.round()) offset = Math.round(offset);
+  return d => +scale(d) + offset;
+}
+
+function entering() {
+  return !this.__axis;
+}
+
+function axis(orient, scale) {
+  var tickArguments = [],
+      tickValues = null,
+      tickFormat = null,
+      tickSizeInner = 6,
+      tickSizeOuter = 6,
+      tickPadding = 3,
+      offset = typeof window !== "undefined" && window.devicePixelRatio > 1 ? 0 : 0.5,
+      k = orient === top || orient === left ? -1 : 1,
+      x = orient === left || orient === right ? "x" : "y",
+      transform = orient === top || orient === bottom ? translateX : translateY;
+
+  function axis(context) {
+    var values = tickValues == null ? (scale.ticks ? scale.ticks.apply(scale, tickArguments) : scale.domain()) : tickValues,
+        format = tickFormat == null ? (scale.tickFormat ? scale.tickFormat.apply(scale, tickArguments) : identity$1) : tickFormat,
+        spacing = Math.max(tickSizeInner, 0) + tickPadding,
+        range = scale.range(),
+        range0 = +range[0] + offset,
+        range1 = +range[range.length - 1] + offset,
+        position = (scale.bandwidth ? center : number)(scale.copy(), offset),
+        selection = context.selection ? context.selection() : context,
+        path = selection.selectAll(".domain").data([null]),
+        tick = selection.selectAll(".tick").data(values, scale).order(),
+        tickExit = tick.exit(),
+        tickEnter = tick.enter().append("g").attr("class", "tick"),
+        line = tick.select("line"),
+        text = tick.select("text");
+
+    path = path.merge(path.enter().insert("path", ".tick")
+        .attr("class", "domain")
+        .attr("stroke", "currentColor"));
+
+    tick = tick.merge(tickEnter);
+
+    line = line.merge(tickEnter.append("line")
+        .attr("stroke", "currentColor")
+        .attr(x + "2", k * tickSizeInner));
+
+    text = text.merge(tickEnter.append("text")
+        .attr("fill", "currentColor")
+        .attr(x, k * spacing)
+        .attr("dy", orient === top ? "0em" : orient === bottom ? "0.71em" : "0.32em"));
+
+    if (context !== selection) {
+      path = path.transition(context);
+      tick = tick.transition(context);
+      line = line.transition(context);
+      text = text.transition(context);
+
+      tickExit = tickExit.transition(context)
+          .attr("opacity", epsilon$2)
+          .attr("transform", function(d) { return isFinite(d = position(d)) ? transform(d + offset) : this.getAttribute("transform"); });
+
+      tickEnter
+          .attr("opacity", epsilon$2)
+          .attr("transform", function(d) { var p = this.parentNode.__axis; return transform((p && isFinite(p = p(d)) ? p : position(d)) + offset); });
+    }
+
+    tickExit.remove();
+
+    path
+        .attr("d", orient === left || orient === right
+            ? (tickSizeOuter ? "M" + k * tickSizeOuter + "," + range0 + "H" + offset + "V" + range1 + "H" + k * tickSizeOuter : "M" + offset + "," + range0 + "V" + range1)
+            : (tickSizeOuter ? "M" + range0 + "," + k * tickSizeOuter + "V" + offset + "H" + range1 + "V" + k * tickSizeOuter : "M" + range0 + "," + offset + "H" + range1));
+
+    tick
+        .attr("opacity", 1)
+        .attr("transform", function(d) { return transform(position(d) + offset); });
+
+    line
+        .attr(x + "2", k * tickSizeInner);
+
+    text
+        .attr(x, k * spacing)
+        .text(format);
+
+    selection.filter(entering)
+        .attr("fill", "none")
+        .attr("font-size", 10)
+        .attr("font-family", "sans-serif")
+        .attr("text-anchor", orient === right ? "start" : orient === left ? "end" : "middle");
+
+    selection
+        .each(function() { this.__axis = position; });
+  }
+
+  axis.scale = function(_) {
+    return arguments.length ? (scale = _, axis) : scale;
+  };
+
+  axis.ticks = function() {
+    return tickArguments = Array.from(arguments), axis;
+  };
+
+  axis.tickArguments = function(_) {
+    return arguments.length ? (tickArguments = _ == null ? [] : Array.from(_), axis) : tickArguments.slice();
+  };
+
+  axis.tickValues = function(_) {
+    return arguments.length ? (tickValues = _ == null ? null : Array.from(_), axis) : tickValues && tickValues.slice();
+  };
+
+  axis.tickFormat = function(_) {
+    return arguments.length ? (tickFormat = _, axis) : tickFormat;
+  };
+
+  axis.tickSize = function(_) {
+    return arguments.length ? (tickSizeInner = tickSizeOuter = +_, axis) : tickSizeInner;
+  };
+
+  axis.tickSizeInner = function(_) {
+    return arguments.length ? (tickSizeInner = +_, axis) : tickSizeInner;
+  };
+
+  axis.tickSizeOuter = function(_) {
+    return arguments.length ? (tickSizeOuter = +_, axis) : tickSizeOuter;
+  };
+
+  axis.tickPadding = function(_) {
+    return arguments.length ? (tickPadding = +_, axis) : tickPadding;
+  };
+
+  axis.offset = function(_) {
+    return arguments.length ? (offset = +_, axis) : offset;
+  };
+
+  return axis;
+}
+
+function axisBottom(scale) {
+  return axis(bottom, scale);
+}
+
+function axisLeft(scale) {
+  return axis(left, scale);
+}
+
+var noop = {value: () => {}};
+
+function dispatch() {
+  for (var i = 0, n = arguments.length, _ = {}, t; i < n; ++i) {
+    if (!(t = arguments[i] + "") || (t in _) || /[\s.]/.test(t)) throw new Error("illegal type: " + t);
+    _[t] = [];
+  }
+  return new Dispatch(_);
+}
+
+function Dispatch(_) {
+  this._ = _;
+}
+
+function parseTypenames$1(typenames, types) {
+  return typenames.trim().split(/^|\s+/).map(function(t) {
+    var name = "", i = t.indexOf(".");
+    if (i >= 0) name = t.slice(i + 1), t = t.slice(0, i);
+    if (t && !types.hasOwnProperty(t)) throw new Error("unknown type: " + t);
+    return {type: t, name: name};
+  });
+}
+
+Dispatch.prototype = dispatch.prototype = {
+  constructor: Dispatch,
+  on: function(typename, callback) {
+    var _ = this._,
+        T = parseTypenames$1(typename + "", _),
+        t,
+        i = -1,
+        n = T.length;
+
+    // If no callback was specified, return the callback of the given type and name.
+    if (arguments.length < 2) {
+      while (++i < n) if ((t = (typename = T[i]).type) && (t = get$1(_[t], typename.name))) return t;
+      return;
+    }
+
+    // If a type was specified, set the callback for the given type and name.
+    // Otherwise, if a null callback was specified, remove callbacks of the given name.
+    if (callback != null && typeof callback !== "function") throw new Error("invalid callback: " + callback);
+    while (++i < n) {
+      if (t = (typename = T[i]).type) _[t] = set$1(_[t], typename.name, callback);
+      else if (callback == null) for (t in _) _[t] = set$1(_[t], typename.name, null);
+    }
+
+    return this;
+  },
+  copy: function() {
+    var copy = {}, _ = this._;
+    for (var t in _) copy[t] = _[t].slice();
+    return new Dispatch(copy);
+  },
+  call: function(type, that) {
+    if ((n = arguments.length - 2) > 0) for (var args = new Array(n), i = 0, n, t; i < n; ++i) args[i] = arguments[i + 2];
+    if (!this._.hasOwnProperty(type)) throw new Error("unknown type: " + type);
+    for (t = this._[type], i = 0, n = t.length; i < n; ++i) t[i].value.apply(that, args);
+  },
+  apply: function(type, that, args) {
+    if (!this._.hasOwnProperty(type)) throw new Error("unknown type: " + type);
+    for (var t = this._[type], i = 0, n = t.length; i < n; ++i) t[i].value.apply(that, args);
+  }
+};
+
+function get$1(type, name) {
+  for (var i = 0, n = type.length, c; i < n; ++i) {
+    if ((c = type[i]).name === name) {
+      return c.value;
+    }
+  }
+}
+
+function set$1(type, name, callback) {
+  for (var i = 0, n = type.length; i < n; ++i) {
+    if (type[i].name === name) {
+      type[i] = noop, type = type.slice(0, i).concat(type.slice(i + 1));
+      break;
+    }
+  }
+  if (callback != null) type.push({name: name, value: callback});
+  return type;
+}
+
+var xhtml = "http://www.w3.org/1999/xhtml";
+
+const namespaces = {
+  svg: "http://www.w3.org/2000/svg",
+  xhtml: xhtml,
+  xlink: "http://www.w3.org/1999/xlink",
+  xml: "http://www.w3.org/XML/1998/namespace",
+  xmlns: "http://www.w3.org/2000/xmlns/"
+};
+
+function namespace(name) {
+  var prefix = name += "", i = prefix.indexOf(":");
+  if (i >= 0 && (prefix = name.slice(0, i)) !== "xmlns") name = name.slice(i + 1);
+  return namespaces.hasOwnProperty(prefix) ? {space: namespaces[prefix], local: name} : name; // eslint-disable-line no-prototype-builtins
+}
+
+function creatorInherit(name) {
+  return function() {
+    var document = this.ownerDocument,
+        uri = this.namespaceURI;
+    return uri === xhtml && document.documentElement.namespaceURI === xhtml
+        ? document.createElement(name)
+        : document.createElementNS(uri, name);
+  };
+}
+
+function creatorFixed(fullname) {
+  return function() {
+    return this.ownerDocument.createElementNS(fullname.space, fullname.local);
+  };
+}
+
+function creator(name) {
+  var fullname = namespace(name);
+  return (fullname.local
+      ? creatorFixed
+      : creatorInherit)(fullname);
+}
+
+function none() {}
+
+function selector(selector) {
+  return selector == null ? none : function() {
+    return this.querySelector(selector);
+  };
+}
+
+function selection_select(select) {
+  if (typeof select !== "function") select = selector(select);
+
+  for (var groups = this._groups, m = groups.length, subgroups = new Array(m), j = 0; j < m; ++j) {
+    for (var group = groups[j], n = group.length, subgroup = subgroups[j] = new Array(n), node, subnode, i = 0; i < n; ++i) {
+      if ((node = group[i]) && (subnode = select.call(node, node.__data__, i, group))) {
+        if ("__data__" in node) subnode.__data__ = node.__data__;
+        subgroup[i] = subnode;
+      }
+    }
+  }
+
+  return new Selection$1(subgroups, this._parents);
+}
+
+// Given something array like (or null), returns something that is strictly an
+// array. This is used to ensure that array-like objects passed to d3.selectAll
+// or selection.selectAll are converted into proper arrays when creating a
+// selection; we don’t ever want to create a selection backed by a live
+// HTMLCollection or NodeList. However, note that selection.selectAll will use a
+// static NodeList as a group, since it safely derived from querySelectorAll.
+function array$1(x) {
+  return x == null ? [] : Array.isArray(x) ? x : Array.from(x);
+}
+
+function empty() {
+  return [];
+}
+
+function selectorAll(selector) {
+  return selector == null ? empty : function() {
+    return this.querySelectorAll(selector);
+  };
+}
+
+function arrayAll(select) {
+  return function() {
+    return array$1(select.apply(this, arguments));
+  };
+}
+
+function selection_selectAll(select) {
+  if (typeof select === "function") select = arrayAll(select);
+  else select = selectorAll(select);
+
+  for (var groups = this._groups, m = groups.length, subgroups = [], parents = [], j = 0; j < m; ++j) {
+    for (var group = groups[j], n = group.length, node, i = 0; i < n; ++i) {
+      if (node = group[i]) {
+        subgroups.push(select.call(node, node.__data__, i, group));
+        parents.push(node);
+      }
+    }
+  }
+
+  return new Selection$1(subgroups, parents);
+}
+
+function matcher(selector) {
+  return function() {
+    return this.matches(selector);
+  };
+}
+
+function childMatcher(selector) {
+  return function(node) {
+    return node.matches(selector);
+  };
+}
+
+var find = Array.prototype.find;
+
+function childFind(match) {
+  return function() {
+    return find.call(this.children, match);
+  };
+}
+
+function childFirst() {
+  return this.firstElementChild;
+}
+
+function selection_selectChild(match) {
+  return this.select(match == null ? childFirst
+      : childFind(typeof match === "function" ? match : childMatcher(match)));
+}
+
+var filter = Array.prototype.filter;
+
+function children() {
+  return Array.from(this.children);
+}
+
+function childrenFilter(match) {
+  return function() {
+    return filter.call(this.children, match);
+  };
+}
+
+function selection_selectChildren(match) {
+  return this.selectAll(match == null ? children
+      : childrenFilter(typeof match === "function" ? match : childMatcher(match)));
+}
+
+function selection_filter(match) {
+  if (typeof match !== "function") match = matcher(match);
+
+  for (var groups = this._groups, m = groups.length, subgroups = new Array(m), j = 0; j < m; ++j) {
+    for (var group = groups[j], n = group.length, subgroup = subgroups[j] = [], node, i = 0; i < n; ++i) {
+      if ((node = group[i]) && match.call(node, node.__data__, i, group)) {
+        subgroup.push(node);
+      }
+    }
+  }
+
+  return new Selection$1(subgroups, this._parents);
+}
+
+function sparse(update) {
+  return new Array(update.length);
+}
+
+function selection_enter() {
+  return new Selection$1(this._enter || this._groups.map(sparse), this._parents);
+}
+
+function EnterNode(parent, datum) {
+  this.ownerDocument = parent.ownerDocument;
+  this.namespaceURI = parent.namespaceURI;
+  this._next = null;
+  this._parent = parent;
+  this.__data__ = datum;
+}
+
+EnterNode.prototype = {
+  constructor: EnterNode,
+  appendChild: function(child) { return this._parent.insertBefore(child, this._next); },
+  insertBefore: function(child, next) { return this._parent.insertBefore(child, next); },
+  querySelector: function(selector) { return this._parent.querySelector(selector); },
+  querySelectorAll: function(selector) { return this._parent.querySelectorAll(selector); }
+};
+
+function constant$2(x) {
+  return function() {
+    return x;
+  };
+}
+
+function bindIndex(parent, group, enter, update, exit, data) {
+  var i = 0,
+      node,
+      groupLength = group.length,
+      dataLength = data.length;
+
+  // Put any non-null nodes that fit into update.
+  // Put any null nodes into enter.
+  // Put any remaining data into enter.
+  for (; i < dataLength; ++i) {
+    if (node = group[i]) {
+      node.__data__ = data[i];
+      update[i] = node;
+    } else {
+      enter[i] = new EnterNode(parent, data[i]);
+    }
+  }
+
+  // Put any non-null nodes that don’t fit into exit.
+  for (; i < groupLength; ++i) {
+    if (node = group[i]) {
+      exit[i] = node;
+    }
+  }
+}
+
+function bindKey(parent, group, enter, update, exit, data, key) {
+  var i,
+      node,
+      nodeByKeyValue = new Map,
+      groupLength = group.length,
+      dataLength = data.length,
+      keyValues = new Array(groupLength),
+      keyValue;
+
+  // Compute the key for each node.
+  // If multiple nodes have the same key, the duplicates are added to exit.
+  for (i = 0; i < groupLength; ++i) {
+    if (node = group[i]) {
+      keyValues[i] = keyValue = key.call(node, node.__data__, i, group) + "";
+      if (nodeByKeyValue.has(keyValue)) {
+        exit[i] = node;
+      } else {
+        nodeByKeyValue.set(keyValue, node);
+      }
+    }
+  }
+
+  // Compute the key for each datum.
+  // If there a node associated with this key, join and add it to update.
+  // If there is not (or the key is a duplicate), add it to enter.
+  for (i = 0; i < dataLength; ++i) {
+    keyValue = key.call(parent, data[i], i, data) + "";
+    if (node = nodeByKeyValue.get(keyValue)) {
+      update[i] = node;
+      node.__data__ = data[i];
+      nodeByKeyValue.delete(keyValue);
+    } else {
+      enter[i] = new EnterNode(parent, data[i]);
+    }
+  }
+
+  // Add any remaining nodes that were not bound to data to exit.
+  for (i = 0; i < groupLength; ++i) {
+    if ((node = group[i]) && (nodeByKeyValue.get(keyValues[i]) === node)) {
+      exit[i] = node;
+    }
+  }
+}
+
+function datum(node) {
+  return node.__data__;
+}
+
+function selection_data(value, key) {
+  if (!arguments.length) return Array.from(this, datum);
+
+  var bind = key ? bindKey : bindIndex,
+      parents = this._parents,
+      groups = this._groups;
+
+  if (typeof value !== "function") value = constant$2(value);
+
+  for (var m = groups.length, update = new Array(m), enter = new Array(m), exit = new Array(m), j = 0; j < m; ++j) {
+    var parent = parents[j],
+        group = groups[j],
+        groupLength = group.length,
+        data = arraylike(value.call(parent, parent && parent.__data__, j, parents)),
+        dataLength = data.length,
+        enterGroup = enter[j] = new Array(dataLength),
+        updateGroup = update[j] = new Array(dataLength),
+        exitGroup = exit[j] = new Array(groupLength);
+
+    bind(parent, group, enterGroup, updateGroup, exitGroup, data, key);
+
+    // Now connect the enter nodes to their following update node, such that
+    // appendChild can insert the materialized enter node before this node,
+    // rather than at the end of the parent node.
+    for (var i0 = 0, i1 = 0, previous, next; i0 < dataLength; ++i0) {
+      if (previous = enterGroup[i0]) {
+        if (i0 >= i1) i1 = i0 + 1;
+        while (!(next = updateGroup[i1]) && ++i1 < dataLength);
+        previous._next = next || null;
+      }
+    }
+  }
+
+  update = new Selection$1(update, parents);
+  update._enter = enter;
+  update._exit = exit;
+  return update;
+}
+
+// Given some data, this returns an array-like view of it: an object that
+// exposes a length property and allows numeric indexing. Note that unlike
+// selectAll, this isn’t worried about “live” collections because the resulting
+// array will only be used briefly while data is being bound. (It is possible to
+// cause the data to change while iterating by using a key function, but please
+// don’t; we’d rather avoid a gratuitous copy.)
+function arraylike(data) {
+  return typeof data === "object" && "length" in data
+    ? data // Array, TypedArray, NodeList, array-like
+    : Array.from(data); // Map, Set, iterable, string, or anything else
+}
+
+function selection_exit() {
+  return new Selection$1(this._exit || this._groups.map(sparse), this._parents);
+}
+
+function selection_join(onenter, onupdate, onexit) {
+  var enter = this.enter(), update = this, exit = this.exit();
+  if (typeof onenter === "function") {
+    enter = onenter(enter);
+    if (enter) enter = enter.selection();
+  } else {
+    enter = enter.append(onenter + "");
+  }
+  if (onupdate != null) {
+    update = onupdate(update);
+    if (update) update = update.selection();
+  }
+  if (onexit == null) exit.remove(); else onexit(exit);
+  return enter && update ? enter.merge(update).order() : update;
+}
+
+function selection_merge(context) {
+  var selection = context.selection ? context.selection() : context;
+
+  for (var groups0 = this._groups, groups1 = selection._groups, m0 = groups0.length, m1 = groups1.length, m = Math.min(m0, m1), merges = new Array(m0), j = 0; j < m; ++j) {
+    for (var group0 = groups0[j], group1 = groups1[j], n = group0.length, merge = merges[j] = new Array(n), node, i = 0; i < n; ++i) {
+      if (node = group0[i] || group1[i]) {
+        merge[i] = node;
+      }
+    }
+  }
+
+  for (; j < m0; ++j) {
+    merges[j] = groups0[j];
+  }
+
+  return new Selection$1(merges, this._parents);
+}
+
+function selection_order() {
+
+  for (var groups = this._groups, j = -1, m = groups.length; ++j < m;) {
+    for (var group = groups[j], i = group.length - 1, next = group[i], node; --i >= 0;) {
+      if (node = group[i]) {
+        if (next && node.compareDocumentPosition(next) ^ 4) next.parentNode.insertBefore(node, next);
+        next = node;
+      }
+    }
+  }
+
+  return this;
+}
+
+function selection_sort(compare) {
+  if (!compare) compare = ascending;
+
+  function compareNode(a, b) {
+    return a && b ? compare(a.__data__, b.__data__) : !a - !b;
+  }
+
+  for (var groups = this._groups, m = groups.length, sortgroups = new Array(m), j = 0; j < m; ++j) {
+    for (var group = groups[j], n = group.length, sortgroup = sortgroups[j] = new Array(n), node, i = 0; i < n; ++i) {
+      if (node = group[i]) {
+        sortgroup[i] = node;
+      }
+    }
+    sortgroup.sort(compareNode);
+  }
+
+  return new Selection$1(sortgroups, this._parents).order();
+}
+
+function ascending(a, b) {
+  return a < b ? -1 : a > b ? 1 : a >= b ? 0 : NaN;
+}
+
+function selection_call() {
+  var callback = arguments[0];
+  arguments[0] = this;
+  callback.apply(null, arguments);
+  return this;
+}
+
+function selection_nodes() {
+  return Array.from(this);
+}
+
+function selection_node() {
+
+  for (var groups = this._groups, j = 0, m = groups.length; j < m; ++j) {
+    for (var group = groups[j], i = 0, n = group.length; i < n; ++i) {
+      var node = group[i];
+      if (node) return node;
+    }
+  }
+
+  return null;
+}
+
+function selection_size() {
+  let size = 0;
+  for (const node of this) ++size; // eslint-disable-line no-unused-vars
+  return size;
+}
+
+function selection_empty() {
+  return !this.node();
+}
+
+function selection_each(callback) {
+
+  for (var groups = this._groups, j = 0, m = groups.length; j < m; ++j) {
+    for (var group = groups[j], i = 0, n = group.length, node; i < n; ++i) {
+      if (node = group[i]) callback.call(node, node.__data__, i, group);
+    }
+  }
+
+  return this;
+}
+
+function attrRemove$1(name) {
+  return function() {
+    this.removeAttribute(name);
+  };
+}
+
+function attrRemoveNS$1(fullname) {
+  return function() {
+    this.removeAttributeNS(fullname.space, fullname.local);
+  };
+}
+
+function attrConstant$1(name, value) {
+  return function() {
+    this.setAttribute(name, value);
+  };
+}
+
+function attrConstantNS$1(fullname, value) {
+  return function() {
+    this.setAttributeNS(fullname.space, fullname.local, value);
+  };
+}
+
+function attrFunction$1(name, value) {
+  return function() {
+    var v = value.apply(this, arguments);
+    if (v == null) this.removeAttribute(name);
+    else this.setAttribute(name, v);
+  };
+}
+
+function attrFunctionNS$1(fullname, value) {
+  return function() {
+    var v = value.apply(this, arguments);
+    if (v == null) this.removeAttributeNS(fullname.space, fullname.local);
+    else this.setAttributeNS(fullname.space, fullname.local, v);
+  };
+}
+
+function selection_attr(name, value) {
+  var fullname = namespace(name);
+
+  if (arguments.length < 2) {
+    var node = this.node();
+    return fullname.local
+        ? node.getAttributeNS(fullname.space, fullname.local)
+        : node.getAttribute(fullname);
+  }
+
+  return this.each((value == null
+      ? (fullname.local ? attrRemoveNS$1 : attrRemove$1) : (typeof value === "function"
+      ? (fullname.local ? attrFunctionNS$1 : attrFunction$1)
+      : (fullname.local ? attrConstantNS$1 : attrConstant$1)))(fullname, value));
+}
+
+function defaultView(node) {
+  return (node.ownerDocument && node.ownerDocument.defaultView) // node is a Node
+      || (node.document && node) // node is a Window
+      || node.defaultView; // node is a Document
+}
+
+function styleRemove$1(name) {
+  return function() {
+    this.style.removeProperty(name);
+  };
+}
+
+function styleConstant$1(name, value, priority) {
+  return function() {
+    this.style.setProperty(name, value, priority);
+  };
+}
+
+function styleFunction$1(name, value, priority) {
+  return function() {
+    var v = value.apply(this, arguments);
+    if (v == null) this.style.removeProperty(name);
+    else this.style.setProperty(name, v, priority);
+  };
+}
+
+function selection_style(name, value, priority) {
+  return arguments.length > 1
+      ? this.each((value == null
+            ? styleRemove$1 : typeof value === "function"
+            ? styleFunction$1
+            : styleConstant$1)(name, value, priority == null ? "" : priority))
+      : styleValue(this.node(), name);
+}
+
+function styleValue(node, name) {
+  return node.style.getPropertyValue(name)
+      || defaultView(node).getComputedStyle(node, null).getPropertyValue(name);
+}
+
+function propertyRemove(name) {
+  return function() {
+    delete this[name];
+  };
+}
+
+function propertyConstant(name, value) {
+  return function() {
+    this[name] = value;
+  };
+}
+
+function propertyFunction(name, value) {
+  return function() {
+    var v = value.apply(this, arguments);
+    if (v == null) delete this[name];
+    else this[name] = v;
+  };
+}
+
+function selection_property(name, value) {
+  return arguments.length > 1
+      ? this.each((value == null
+          ? propertyRemove : typeof value === "function"
+          ? propertyFunction
+          : propertyConstant)(name, value))
+      : this.node()[name];
+}
+
+function classArray(string) {
+  return string.trim().split(/^|\s+/);
+}
+
+function classList(node) {
+  return node.classList || new ClassList(node);
+}
+
+function ClassList(node) {
+  this._node = node;
+  this._names = classArray(node.getAttribute("class") || "");
+}
+
+ClassList.prototype = {
+  add: function(name) {
+    var i = this._names.indexOf(name);
+    if (i < 0) {
+      this._names.push(name);
+      this._node.setAttribute("class", this._names.join(" "));
+    }
+  },
+  remove: function(name) {
+    var i = this._names.indexOf(name);
+    if (i >= 0) {
+      this._names.splice(i, 1);
+      this._node.setAttribute("class", this._names.join(" "));
+    }
+  },
+  contains: function(name) {
+    return this._names.indexOf(name) >= 0;
+  }
+};
+
+function classedAdd(node, names) {
+  var list = classList(node), i = -1, n = names.length;
+  while (++i < n) list.add(names[i]);
+}
+
+function classedRemove(node, names) {
+  var list = classList(node), i = -1, n = names.length;
+  while (++i < n) list.remove(names[i]);
+}
+
+function classedTrue(names) {
+  return function() {
+    classedAdd(this, names);
+  };
+}
+
+function classedFalse(names) {
+  return function() {
+    classedRemove(this, names);
+  };
+}
+
+function classedFunction(names, value) {
+  return function() {
+    (value.apply(this, arguments) ? classedAdd : classedRemove)(this, names);
+  };
+}
+
+function selection_classed(name, value) {
+  var names = classArray(name + "");
+
+  if (arguments.length < 2) {
+    var list = classList(this.node()), i = -1, n = names.length;
+    while (++i < n) if (!list.contains(names[i])) return false;
+    return true;
+  }
+
+  return this.each((typeof value === "function"
+      ? classedFunction : value
+      ? classedTrue
+      : classedFalse)(names, value));
+}
+
+function textRemove() {
+  this.textContent = "";
+}
+
+function textConstant$1(value) {
+  return function() {
+    this.textContent = value;
+  };
+}
+
+function textFunction$1(value) {
+  return function() {
+    var v = value.apply(this, arguments);
+    this.textContent = v == null ? "" : v;
+  };
+}
+
+function selection_text(value) {
+  return arguments.length
+      ? this.each(value == null
+          ? textRemove : (typeof value === "function"
+          ? textFunction$1
+          : textConstant$1)(value))
+      : this.node().textContent;
+}
+
+function htmlRemove() {
+  this.innerHTML = "";
+}
+
+function htmlConstant(value) {
+  return function() {
+    this.innerHTML = value;
+  };
+}
+
+function htmlFunction(value) {
+  return function() {
+    var v = value.apply(this, arguments);
+    this.innerHTML = v == null ? "" : v;
+  };
+}
+
+function selection_html(value) {
+  return arguments.length
+      ? this.each(value == null
+          ? htmlRemove : (typeof value === "function"
+          ? htmlFunction
+          : htmlConstant)(value))
+      : this.node().innerHTML;
+}
+
+function raise() {
+  if (this.nextSibling) this.parentNode.appendChild(this);
+}
+
+function selection_raise() {
+  return this.each(raise);
+}
+
+function lower() {
+  if (this.previousSibling) this.parentNode.insertBefore(this, this.parentNode.firstChild);
+}
+
+function selection_lower() {
+  return this.each(lower);
+}
+
+function selection_append(name) {
+  var create = typeof name === "function" ? name : creator(name);
+  return this.select(function() {
+    return this.appendChild(create.apply(this, arguments));
+  });
+}
+
+function constantNull() {
+  return null;
+}
+
+function selection_insert(name, before) {
+  var create = typeof name === "function" ? name : creator(name),
+      select = before == null ? constantNull : typeof before === "function" ? before : selector(before);
+  return this.select(function() {
+    return this.insertBefore(create.apply(this, arguments), select.apply(this, arguments) || null);
+  });
+}
+
+function remove() {
+  var parent = this.parentNode;
+  if (parent) parent.removeChild(this);
+}
+
+function selection_remove() {
+  return this.each(remove);
+}
+
+function selection_cloneShallow() {
+  var clone = this.cloneNode(false), parent = this.parentNode;
+  return parent ? parent.insertBefore(clone, this.nextSibling) : clone;
+}
+
+function selection_cloneDeep() {
+  var clone = this.cloneNode(true), parent = this.parentNode;
+  return parent ? parent.insertBefore(clone, this.nextSibling) : clone;
+}
+
+function selection_clone(deep) {
+  return this.select(deep ? selection_cloneDeep : selection_cloneShallow);
+}
+
+function selection_datum(value) {
+  return arguments.length
+      ? this.property("__data__", value)
+      : this.node().__data__;
+}
+
+function contextListener(listener) {
+  return function(event) {
+    listener.call(this, event, this.__data__);
+  };
+}
+
+function parseTypenames(typenames) {
+  return typenames.trim().split(/^|\s+/).map(function(t) {
+    var name = "", i = t.indexOf(".");
+    if (i >= 0) name = t.slice(i + 1), t = t.slice(0, i);
+    return {type: t, name: name};
+  });
+}
+
+function onRemove(typename) {
+  return function() {
+    var on = this.__on;
+    if (!on) return;
+    for (var j = 0, i = -1, m = on.length, o; j < m; ++j) {
+      if (o = on[j], (!typename.type || o.type === typename.type) && o.name === typename.name) {
+        this.removeEventListener(o.type, o.listener, o.options);
+      } else {
+        on[++i] = o;
+      }
+    }
+    if (++i) on.length = i;
+    else delete this.__on;
+  };
+}
+
+function onAdd(typename, value, options) {
+  return function() {
+    var on = this.__on, o, listener = contextListener(value);
+    if (on) for (var j = 0, m = on.length; j < m; ++j) {
+      if ((o = on[j]).type === typename.type && o.name === typename.name) {
+        this.removeEventListener(o.type, o.listener, o.options);
+        this.addEventListener(o.type, o.listener = listener, o.options = options);
+        o.value = value;
+        return;
+      }
+    }
+    this.addEventListener(typename.type, listener, options);
+    o = {type: typename.type, name: typename.name, value: value, listener: listener, options: options};
+    if (!on) this.__on = [o];
+    else on.push(o);
+  };
+}
+
+function selection_on(typename, value, options) {
+  var typenames = parseTypenames(typename + ""), i, n = typenames.length, t;
+
+  if (arguments.length < 2) {
+    var on = this.node().__on;
+    if (on) for (var j = 0, m = on.length, o; j < m; ++j) {
+      for (i = 0, o = on[j]; i < n; ++i) {
+        if ((t = typenames[i]).type === o.type && t.name === o.name) {
+          return o.value;
+        }
+      }
+    }
+    return;
+  }
+
+  on = value ? onAdd : onRemove;
+  for (i = 0; i < n; ++i) this.each(on(typenames[i], value, options));
+  return this;
+}
+
+function dispatchEvent(node, type, params) {
+  var window = defaultView(node),
+      event = window.CustomEvent;
+
+  if (typeof event === "function") {
+    event = new event(type, params);
+  } else {
+    event = window.document.createEvent("Event");
+    if (params) event.initEvent(type, params.bubbles, params.cancelable), event.detail = params.detail;
+    else event.initEvent(type, false, false);
+  }
+
+  node.dispatchEvent(event);
+}
+
+function dispatchConstant(type, params) {
+  return function() {
+    return dispatchEvent(this, type, params);
+  };
+}
+
+function dispatchFunction(type, params) {
+  return function() {
+    return dispatchEvent(this, type, params.apply(this, arguments));
+  };
+}
+
+function selection_dispatch(type, params) {
+  return this.each((typeof params === "function"
+      ? dispatchFunction
+      : dispatchConstant)(type, params));
+}
+
+function* selection_iterator() {
+  for (var groups = this._groups, j = 0, m = groups.length; j < m; ++j) {
+    for (var group = groups[j], i = 0, n = group.length, node; i < n; ++i) {
+      if (node = group[i]) yield node;
+    }
+  }
+}
+
+var root = [null];
+
+function Selection$1(groups, parents) {
+  this._groups = groups;
+  this._parents = parents;
+}
+
+function selection() {
+  return new Selection$1([[document.documentElement]], root);
+}
+
+function selection_selection() {
+  return this;
+}
+
+Selection$1.prototype = selection.prototype = {
+  constructor: Selection$1,
+  select: selection_select,
+  selectAll: selection_selectAll,
+  selectChild: selection_selectChild,
+  selectChildren: selection_selectChildren,
+  filter: selection_filter,
+  data: selection_data,
+  enter: selection_enter,
+  exit: selection_exit,
+  join: selection_join,
+  merge: selection_merge,
+  selection: selection_selection,
+  order: selection_order,
+  sort: selection_sort,
+  call: selection_call,
+  nodes: selection_nodes,
+  node: selection_node,
+  size: selection_size,
+  empty: selection_empty,
+  each: selection_each,
+  attr: selection_attr,
+  style: selection_style,
+  property: selection_property,
+  classed: selection_classed,
+  text: selection_text,
+  html: selection_html,
+  raise: selection_raise,
+  lower: selection_lower,
+  append: selection_append,
+  insert: selection_insert,
+  remove: selection_remove,
+  clone: selection_clone,
+  datum: selection_datum,
+  on: selection_on,
+  dispatch: selection_dispatch,
+  [Symbol.iterator]: selection_iterator
+};
+
+function d3Select(selector) {
+  return typeof selector === "string"
+      ? new Selection$1([[document.querySelector(selector)]], [document.documentElement])
+      : new Selection$1([[selector]], root);
+}
+
+function d3Create(name) {
+  return d3Select(creator(name).call(document.documentElement));
+}
+
+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(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, 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;
+}
+
+const constant$1 = x => () => x;
+
+function linear(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$1(isNaN(a) ? b : a);
+  };
+}
+
+function nogamma(a, b) {
+  var d = b - a;
+  return d ? linear(a, d) : constant$1(isNaN(a) ? b : a);
+}
+
+const interpolateRgb = (function rgbGamma(y) {
+  var color = gamma(y);
+
+  function rgb$1(start, end) {
+    var r = color((start = rgb(start)).r, (end = rgb(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$1.gamma = rgbGamma;
+
+  return rgb$1;
+})(1);
+
+function interpolateNumber(a, b) {
+  return a = +a, b = +b, function(t) {
+    return a * (1 - t) + b * t;
+  };
+}
+
+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 interpolateString(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("");
+        });
+}
+
+var degrees = 180 / Math.PI;
+
+var identity = {
+  translateX: 0,
+  translateY: 0,
+  rotate: 0,
+  skewX: 0,
+  scaleX: 1,
+  scaleY: 1
+};
+
+function decompose(a, b, c, d, e, f) {
+  var scaleX, scaleY, skewX;
+  if (scaleX = Math.sqrt(a * a + b * b)) a /= scaleX, b /= scaleX;
+  if (skewX = a * c + b * d) c -= a * skewX, d -= b * skewX;
+  if (scaleY = Math.sqrt(c * c + d * d)) c /= scaleY, d /= scaleY, skewX /= scaleY;
+  if (a * d < b * c) a = -a, b = -b, skewX = -skewX, scaleX = -scaleX;
+  return {
+    translateX: e,
+    translateY: f,
+    rotate: Math.atan2(b, a) * degrees,
+    skewX: Math.atan(skewX) * degrees,
+    scaleX: scaleX,
+    scaleY: scaleY
+  };
+}
+
+var svgNode;
+
+/* eslint-disable no-undef */
+function parseCss(value) {
+  const m = new (typeof DOMMatrix === "function" ? DOMMatrix : WebKitCSSMatrix)(value + "");
+  return m.isIdentity ? identity : decompose(m.a, m.b, m.c, m.d, m.e, m.f);
+}
+
+function parseSvg(value) {
+  if (value == null) return identity;
+  if (!svgNode) svgNode = document.createElementNS("http://www.w3.org/2000/svg", "g");
+  svgNode.setAttribute("transform", value);
+  if (!(value = svgNode.transform.baseVal.consolidate())) return identity;
+  value = value.matrix;
+  return decompose(value.a, value.b, value.c, value.d, value.e, value.f);
+}
+
+function interpolateTransform(parse, pxComma, pxParen, degParen) {
+
+  function pop(s) {
+    return s.length ? s.pop() + " " : "";
+  }
+
+  function translate(xa, ya, xb, yb, s, q) {
+    if (xa !== xb || ya !== yb) {
+      var i = s.push("translate(", null, pxComma, null, pxParen);
+      q.push({i: i - 4, x: interpolateNumber(xa, xb)}, {i: i - 2, x: interpolateNumber(ya, yb)});
+    } else if (xb || yb) {
+      s.push("translate(" + xb + pxComma + yb + pxParen);
+    }
+  }
+
+  function rotate(a, b, s, q) {
+    if (a !== b) {
+      if (a - b > 180) b += 360; else if (b - a > 180) a += 360; // shortest path
+      q.push({i: s.push(pop(s) + "rotate(", null, degParen) - 2, x: interpolateNumber(a, b)});
+    } else if (b) {
+      s.push(pop(s) + "rotate(" + b + degParen);
+    }
+  }
+
+  function skewX(a, b, s, q) {
+    if (a !== b) {
+      q.push({i: s.push(pop(s) + "skewX(", null, degParen) - 2, x: interpolateNumber(a, b)});
+    } else if (b) {
+      s.push(pop(s) + "skewX(" + b + degParen);
+    }
+  }
+
+  function scale(xa, ya, xb, yb, s, q) {
+    if (xa !== xb || ya !== yb) {
+      var i = s.push(pop(s) + "scale(", null, ",", null, ")");
+      q.push({i: i - 4, x: interpolateNumber(xa, xb)}, {i: i - 2, x: interpolateNumber(ya, yb)});
+    } else if (xb !== 1 || yb !== 1) {
+      s.push(pop(s) + "scale(" + xb + "," + yb + ")");
+    }
+  }
+
+  return function(a, b) {
+    var s = [], // string constants and placeholders
+        q = []; // number interpolators
+    a = parse(a), b = parse(b);
+    translate(a.translateX, a.translateY, b.translateX, b.translateY, s, q);
+    rotate(a.rotate, b.rotate, s, q);
+    skewX(a.skewX, b.skewX, s, q);
+    scale(a.scaleX, a.scaleY, b.scaleX, b.scaleY, s, q);
+    a = b = null; // gc
+    return function(t) {
+      var i = -1, n = q.length, o;
+      while (++i < n) s[(o = q[i]).i] = o.x(t);
+      return s.join("");
+    };
+  };
+}
+
+var interpolateTransformCss = interpolateTransform(parseCss, "px, ", "px)", "deg)");
+var interpolateTransformSvg = interpolateTransform(parseSvg, ", ", ")", ")");
+
+var frame = 0, // is an animation frame pending?
+    timeout$1 = 0, // is a timeout pending?
+    interval = 0, // are any timers active?
+    pokeDelay = 1000, // how frequently we check for clock skew
+    taskHead,
+    taskTail,
+    clockLast = 0,
+    clockNow = 0,
+    clockSkew = 0,
+    clock = typeof performance === "object" && performance.now ? performance : Date,
+    setFrame = typeof window === "object" && window.requestAnimationFrame ? window.requestAnimationFrame.bind(window) : function(f) { setTimeout(f, 17); };
+
+function now() {
+  return clockNow || (setFrame(clearNow), clockNow = clock.now() + clockSkew);
+}
+
+function clearNow() {
+  clockNow = 0;
+}
+
+function Timer() {
+  this._call =
+  this._time =
+  this._next = null;
+}
+
+Timer.prototype = timer.prototype = {
+  constructor: Timer,
+  restart: function(callback, delay, time) {
+    if (typeof callback !== "function") throw new TypeError("callback is not a function");
+    time = (time == null ? now() : +time) + (delay == null ? 0 : +delay);
+    if (!this._next && taskTail !== this) {
+      if (taskTail) taskTail._next = this;
+      else taskHead = this;
+      taskTail = this;
+    }
+    this._call = callback;
+    this._time = time;
+    sleep();
+  },
+  stop: function() {
+    if (this._call) {
+      this._call = null;
+      this._time = Infinity;
+      sleep();
+    }
+  }
+};
+
+function timer(callback, delay, time) {
+  var t = new Timer;
+  t.restart(callback, delay, time);
+  return t;
+}
+
+function timerFlush() {
+  now(); // Get the current time, if not already set.
+  ++frame; // Pretend we’ve set an alarm, if we haven’t already.
+  var t = taskHead, e;
+  while (t) {
+    if ((e = clockNow - t._time) >= 0) t._call.call(undefined, e);
+    t = t._next;
+  }
+  --frame;
+}
+
+function wake() {
+  clockNow = (clockLast = clock.now()) + clockSkew;
+  frame = timeout$1 = 0;
+  try {
+    timerFlush();
+  } finally {
+    frame = 0;
+    nap();
+    clockNow = 0;
+  }
+}
+
+function poke() {
+  var now = clock.now(), delay = now - clockLast;
+  if (delay > pokeDelay) clockSkew -= delay, clockLast = now;
+}
+
+function nap() {
+  var t0, t1 = taskHead, t2, time = Infinity;
+  while (t1) {
+    if (t1._call) {
+      if (time > t1._time) time = t1._time;
+      t0 = t1, t1 = t1._next;
+    } else {
+      t2 = t1._next, t1._next = null;
+      t1 = t0 ? t0._next = t2 : taskHead = t2;
+    }
+  }
+  taskTail = t0;
+  sleep(time);
+}
+
+function sleep(time) {
+  if (frame) return; // Soonest alarm already set, or will be.
+  if (timeout$1) timeout$1 = clearTimeout(timeout$1);
+  var delay = time - clockNow; // Strictly less than if we recomputed clockNow.
+  if (delay > 24) {
+    if (time < Infinity) timeout$1 = setTimeout(wake, time - clock.now() - clockSkew);
+    if (interval) interval = clearInterval(interval);
+  } else {
+    if (!interval) clockLast = clock.now(), interval = setInterval(poke, pokeDelay);
+    frame = 1, setFrame(wake);
+  }
+}
+
+function timeout(callback, delay, time) {
+  var t = new Timer;
+  delay = delay == null ? 0 : +delay;
+  t.restart(elapsed => {
+    t.stop();
+    callback(elapsed + delay);
+  }, delay, time);
+  return t;
+}
+
+var emptyOn = dispatch("start", "end", "cancel", "interrupt");
+var emptyTween = [];
+
+var CREATED = 0;
+var SCHEDULED = 1;
+var STARTING = 2;
+var STARTED = 3;
+var RUNNING = 4;
+var ENDING = 5;
+var ENDED = 6;
+
+function schedule(node, name, id, index, group, timing) {
+  var schedules = node.__transition;
+  if (!schedules) node.__transition = {};
+  else if (id in schedules) return;
+  create(node, id, {
+    name: name,
+    index: index, // For context during callback.
+    group: group, // For context during callback.
+    on: emptyOn,
+    tween: emptyTween,
+    time: timing.time,
+    delay: timing.delay,
+    duration: timing.duration,
+    ease: timing.ease,
+    timer: null,
+    state: CREATED
+  });
+}
+
+function init(node, id) {
+  var schedule = get(node, id);
+  if (schedule.state > CREATED) throw new Error("too late; already scheduled");
+  return schedule;
+}
+
+function set(node, id) {
+  var schedule = get(node, id);
+  if (schedule.state > STARTED) throw new Error("too late; already running");
+  return schedule;
+}
+
+function get(node, id) {
+  var schedule = node.__transition;
+  if (!schedule || !(schedule = schedule[id])) throw new Error("transition not found");
+  return schedule;
+}
+
+function create(node, id, self) {
+  var schedules = node.__transition,
+      tween;
+
+  // Initialize the self timer when the transition is created.
+  // Note the actual delay is not known until the first callback!
+  schedules[id] = self;
+  self.timer = timer(schedule, 0, self.time);
+
+  function schedule(elapsed) {
+    self.state = SCHEDULED;
+    self.timer.restart(start, self.delay, self.time);
+
+    // If the elapsed delay is less than our first sleep, start immediately.
+    if (self.delay <= elapsed) start(elapsed - self.delay);
+  }
+
+  function start(elapsed) {
+    var i, j, n, o;
+
+    // If the state is not SCHEDULED, then we previously errored on start.
+    if (self.state !== SCHEDULED) return stop();
+
+    for (i in schedules) {
+      o = schedules[i];
+      if (o.name !== self.name) continue;
+
+      // While this element already has a starting transition during this frame,
+      // defer starting an interrupting transition until that transition has a
+      // chance to tick (and possibly end); see d3/d3-transition#54!
+      if (o.state === STARTED) return timeout(start);
+
+      // Interrupt the active transition, if any.
+      if (o.state === RUNNING) {
+        o.state = ENDED;
+        o.timer.stop();
+        o.on.call("interrupt", node, node.__data__, o.index, o.group);
+        delete schedules[i];
+      }
+
+      // Cancel any pre-empted transitions.
+      else if (+i < id) {
+        o.state = ENDED;
+        o.timer.stop();
+        o.on.call("cancel", node, node.__data__, o.index, o.group);
+        delete schedules[i];
+      }
+    }
+
+    // Defer the first tick to end of the current frame; see d3/d3#1576.
+    // Note the transition may be canceled after start and before the first tick!
+    // Note this must be scheduled before the start event; see d3/d3-transition#16!
+    // Assuming this is successful, subsequent callbacks go straight to tick.
+    timeout(function() {
+      if (self.state === STARTED) {
+        self.state = RUNNING;
+        self.timer.restart(tick, self.delay, self.time);
+        tick(elapsed);
+      }
+    });
+
+    // Dispatch the start event.
+    // Note this must be done before the tween are initialized.
+    self.state = STARTING;
+    self.on.call("start", node, node.__data__, self.index, self.group);
+    if (self.state !== STARTING) return; // interrupted
+    self.state = STARTED;
+
+    // Initialize the tween, deleting null tween.
+    tween = new Array(n = self.tween.length);
+    for (i = 0, j = -1; i < n; ++i) {
+      if (o = self.tween[i].value.call(node, node.__data__, self.index, self.group)) {
+        tween[++j] = o;
+      }
+    }
+    tween.length = j + 1;
+  }
+
+  function tick(elapsed) {
+    var t = elapsed < self.duration ? self.ease.call(null, elapsed / self.duration) : (self.timer.restart(stop), self.state = ENDING, 1),
+        i = -1,
+        n = tween.length;
+
+    while (++i < n) {
+      tween[i].call(node, t);
+    }
+
+    // Dispatch the end event.
+    if (self.state === ENDING) {
+      self.on.call("end", node, node.__data__, self.index, self.group);
+      stop();
+    }
+  }
+
+  function stop() {
+    self.state = ENDED;
+    self.timer.stop();
+    delete schedules[id];
+    for (var i in schedules) return; // eslint-disable-line no-unused-vars
+    delete node.__transition;
+  }
+}
+
+function interrupt(node, name) {
+  var schedules = node.__transition,
+      schedule,
+      active,
+      empty = true,
+      i;
+
+  if (!schedules) return;
+
+  name = name == null ? null : name + "";
+
+  for (i in schedules) {
+    if ((schedule = schedules[i]).name !== name) { empty = false; continue; }
+    active = schedule.state > STARTING && schedule.state < ENDING;
+    schedule.state = ENDED;
+    schedule.timer.stop();
+    schedule.on.call(active ? "interrupt" : "cancel", node, node.__data__, schedule.index, schedule.group);
+    delete schedules[i];
+  }
+
+  if (empty) delete node.__transition;
+}
+
+function selection_interrupt(name) {
+  return this.each(function() {
+    interrupt(this, name);
+  });
+}
+
+function tweenRemove(id, name) {
+  var tween0, tween1;
+  return function() {
+    var schedule = set(this, id),
+        tween = schedule.tween;
+
+    // If this node shared tween with the previous node,
+    // just assign the updated shared tween and we’re done!
+    // Otherwise, copy-on-write.
+    if (tween !== tween0) {
+      tween1 = tween0 = tween;
+      for (var i = 0, n = tween1.length; i < n; ++i) {
+        if (tween1[i].name === name) {
+          tween1 = tween1.slice();
+          tween1.splice(i, 1);
+          break;
+        }
+      }
+    }
+
+    schedule.tween = tween1;
+  };
+}
+
+function tweenFunction(id, name, value) {
+  var tween0, tween1;
+  if (typeof value !== "function") throw new Error;
+  return function() {
+    var schedule = set(this, id),
+        tween = schedule.tween;
+
+    // If this node shared tween with the previous node,
+    // just assign the updated shared tween and we’re done!
+    // Otherwise, copy-on-write.
+    if (tween !== tween0) {
+      tween1 = (tween0 = tween).slice();
+      for (var t = {name: name, value: value}, i = 0, n = tween1.length; i < n; ++i) {
+        if (tween1[i].name === name) {
+          tween1[i] = t;
+          break;
+        }
+      }
+      if (i === n) tween1.push(t);
+    }
+
+    schedule.tween = tween1;
+  };
+}
+
+function transition_tween(name, value) {
+  var id = this._id;
+
+  name += "";
+
+  if (arguments.length < 2) {
+    var tween = get(this.node(), id).tween;
+    for (var i = 0, n = tween.length, t; i < n; ++i) {
+      if ((t = tween[i]).name === name) {
+        return t.value;
+      }
+    }
+    return null;
+  }
+
+  return this.each((value == null ? tweenRemove : tweenFunction)(id, name, value));
+}
+
+function tweenValue(transition, name, value) {
+  var id = transition._id;
+
+  transition.each(function() {
+    var schedule = set(this, id);
+    (schedule.value || (schedule.value = {}))[name] = value.apply(this, arguments);
+  });
+
+  return function(node) {
+    return get(node, id).value[name];
+  };
+}
+
+function interpolate(a, b) {
+  var c;
+  return (typeof b === "number" ? interpolateNumber
+      : b instanceof color ? interpolateRgb
+      : (c = color(b)) ? (b = c, interpolateRgb)
+      : interpolateString)(a, b);
+}
+
+function attrRemove(name) {
+  return function() {
+    this.removeAttribute(name);
+  };
+}
+
+function attrRemoveNS(fullname) {
+  return function() {
+    this.removeAttributeNS(fullname.space, fullname.local);
+  };
+}
+
+function attrConstant(name, interpolate, value1) {
+  var string00,
+      string1 = value1 + "",
+      interpolate0;
+  return function() {
+    var string0 = this.getAttribute(name);
+    return string0 === string1 ? null
+        : string0 === string00 ? interpolate0
+        : interpolate0 = interpolate(string00 = string0, value1);
+  };
+}
+
+function attrConstantNS(fullname, interpolate, value1) {
+  var string00,
+      string1 = value1 + "",
+      interpolate0;
+  return function() {
+    var string0 = this.getAttributeNS(fullname.space, fullname.local);
+    return string0 === string1 ? null
+        : string0 === string00 ? interpolate0
+        : interpolate0 = interpolate(string00 = string0, value1);
+  };
+}
+
+function attrFunction(name, interpolate, value) {
+  var string00,
+      string10,
+      interpolate0;
+  return function() {
+    var string0, value1 = value(this), string1;
+    if (value1 == null) return void this.removeAttribute(name);
+    string0 = this.getAttribute(name);
+    string1 = value1 + "";
+    return string0 === string1 ? null
+        : string0 === string00 && string1 === string10 ? interpolate0
+        : (string10 = string1, interpolate0 = interpolate(string00 = string0, value1));
+  };
+}
+
+function attrFunctionNS(fullname, interpolate, value) {
+  var string00,
+      string10,
+      interpolate0;
+  return function() {
+    var string0, value1 = value(this), string1;
+    if (value1 == null) return void this.removeAttributeNS(fullname.space, fullname.local);
+    string0 = this.getAttributeNS(fullname.space, fullname.local);
+    string1 = value1 + "";
+    return string0 === string1 ? null
+        : string0 === string00 && string1 === string10 ? interpolate0
+        : (string10 = string1, interpolate0 = interpolate(string00 = string0, value1));
+  };
+}
+
+function transition_attr(name, value) {
+  var fullname = namespace(name), i = fullname === "transform" ? interpolateTransformSvg : interpolate;
+  return this.attrTween(name, typeof value === "function"
+      ? (fullname.local ? attrFunctionNS : attrFunction)(fullname, i, tweenValue(this, "attr." + name, value))
+      : value == null ? (fullname.local ? attrRemoveNS : attrRemove)(fullname)
+      : (fullname.local ? attrConstantNS : attrConstant)(fullname, i, value));
+}
+
+function attrInterpolate(name, i) {
+  return function(t) {
+    this.setAttribute(name, i.call(this, t));
+  };
+}
+
+function attrInterpolateNS(fullname, i) {
+  return function(t) {
+    this.setAttributeNS(fullname.space, fullname.local, i.call(this, t));
+  };
+}
+
+function attrTweenNS(fullname, value) {
+  var t0, i0;
+  function tween() {
+    var i = value.apply(this, arguments);
+    if (i !== i0) t0 = (i0 = i) && attrInterpolateNS(fullname, i);
+    return t0;
+  }
+  tween._value = value;
+  return tween;
+}
+
+function attrTween(name, value) {
+  var t0, i0;
+  function tween() {
+    var i = value.apply(this, arguments);
+    if (i !== i0) t0 = (i0 = i) && attrInterpolate(name, i);
+    return t0;
+  }
+  tween._value = value;
+  return tween;
+}
+
+function transition_attrTween(name, value) {
+  var key = "attr." + name;
+  if (arguments.length < 2) return (key = this.tween(key)) && key._value;
+  if (value == null) return this.tween(key, null);
+  if (typeof value !== "function") throw new Error;
+  var fullname = namespace(name);
+  return this.tween(key, (fullname.local ? attrTweenNS : attrTween)(fullname, value));
+}
+
+function delayFunction(id, value) {
+  return function() {
+    init(this, id).delay = +value.apply(this, arguments);
+  };
+}
+
+function delayConstant(id, value) {
+  return value = +value, function() {
+    init(this, id).delay = value;
+  };
+}
+
+function transition_delay(value) {
+  var id = this._id;
+
+  return arguments.length
+      ? this.each((typeof value === "function"
+          ? delayFunction
+          : delayConstant)(id, value))
+      : get(this.node(), id).delay;
+}
+
+function durationFunction(id, value) {
+  return function() {
+    set(this, id).duration = +value.apply(this, arguments);
+  };
+}
+
+function durationConstant(id, value) {
+  return value = +value, function() {
+    set(this, id).duration = value;
+  };
+}
+
+function transition_duration(value) {
+  var id = this._id;
+
+  return arguments.length
+      ? this.each((typeof value === "function"
+          ? durationFunction
+          : durationConstant)(id, value))
+      : get(this.node(), id).duration;
+}
+
+function easeConstant(id, value) {
+  if (typeof value !== "function") throw new Error;
+  return function() {
+    set(this, id).ease = value;
+  };
+}
+
+function transition_ease(value) {
+  var id = this._id;
+
+  return arguments.length
+      ? this.each(easeConstant(id, value))
+      : get(this.node(), id).ease;
+}
+
+function easeVarying(id, value) {
+  return function() {
+    var v = value.apply(this, arguments);
+    if (typeof v !== "function") throw new Error;
+    set(this, id).ease = v;
+  };
+}
+
+function transition_easeVarying(value) {
+  if (typeof value !== "function") throw new Error;
+  return this.each(easeVarying(this._id, value));
+}
+
+function transition_filter(match) {
+  if (typeof match !== "function") match = matcher(match);
+
+  for (var groups = this._groups, m = groups.length, subgroups = new Array(m), j = 0; j < m; ++j) {
+    for (var group = groups[j], n = group.length, subgroup = subgroups[j] = [], node, i = 0; i < n; ++i) {
+      if ((node = group[i]) && match.call(node, node.__data__, i, group)) {
+        subgroup.push(node);
+      }
+    }
+  }
+
+  return new Transition(subgroups, this._parents, this._name, this._id);
+}
+
+function transition_merge(transition) {
+  if (transition._id !== this._id) throw new Error;
+
+  for (var groups0 = this._groups, groups1 = transition._groups, m0 = groups0.length, m1 = groups1.length, m = Math.min(m0, m1), merges = new Array(m0), j = 0; j < m; ++j) {
+    for (var group0 = groups0[j], group1 = groups1[j], n = group0.length, merge = merges[j] = new Array(n), node, i = 0; i < n; ++i) {
+      if (node = group0[i] || group1[i]) {
+        merge[i] = node;
+      }
+    }
+  }
+
+  for (; j < m0; ++j) {
+    merges[j] = groups0[j];
+  }
+
+  return new Transition(merges, this._parents, this._name, this._id);
+}
+
+function start(name) {
+  return (name + "").trim().split(/^|\s+/).every(function(t) {
+    var i = t.indexOf(".");
+    if (i >= 0) t = t.slice(0, i);
+    return !t || t === "start";
+  });
+}
+
+function onFunction(id, name, listener) {
+  var on0, on1, sit = start(name) ? init : set;
+  return function() {
+    var schedule = sit(this, id),
+        on = schedule.on;
+
+    // If this node shared a dispatch with the previous node,
+    // just assign the updated shared dispatch and we’re done!
+    // Otherwise, copy-on-write.
+    if (on !== on0) (on1 = (on0 = on).copy()).on(name, listener);
+
+    schedule.on = on1;
+  };
+}
+
+function transition_on(name, listener) {
+  var id = this._id;
+
+  return arguments.length < 2
+      ? get(this.node(), id).on.on(name)
+      : this.each(onFunction(id, name, listener));
+}
+
+function removeFunction(id) {
+  return function() {
+    var parent = this.parentNode;
+    for (var i in this.__transition) if (+i !== id) return;
+    if (parent) parent.removeChild(this);
+  };
+}
+
+function transition_remove() {
+  return this.on("end.remove", removeFunction(this._id));
+}
+
+function transition_select(select) {
+  var name = this._name,
+      id = this._id;
+
+  if (typeof select !== "function") select = selector(select);
+
+  for (var groups = this._groups, m = groups.length, subgroups = new Array(m), j = 0; j < m; ++j) {
+    for (var group = groups[j], n = group.length, subgroup = subgroups[j] = new Array(n), node, subnode, i = 0; i < n; ++i) {
+      if ((node = group[i]) && (subnode = select.call(node, node.__data__, i, group))) {
+        if ("__data__" in node) subnode.__data__ = node.__data__;
+        subgroup[i] = subnode;
+        schedule(subgroup[i], name, id, i, subgroup, get(node, id));
+      }
+    }
+  }
+
+  return new Transition(subgroups, this._parents, name, id);
+}
+
+function transition_selectAll(select) {
+  var name = this._name,
+      id = this._id;
+
+  if (typeof select !== "function") select = selectorAll(select);
+
+  for (var groups = this._groups, m = groups.length, subgroups = [], parents = [], j = 0; j < m; ++j) {
+    for (var group = groups[j], n = group.length, node, i = 0; i < n; ++i) {
+      if (node = group[i]) {
+        for (var children = select.call(node, node.__data__, i, group), child, inherit = get(node, id), k = 0, l = children.length; k < l; ++k) {
+          if (child = children[k]) {
+            schedule(child, name, id, k, children, inherit);
+          }
+        }
+        subgroups.push(children);
+        parents.push(node);
+      }
+    }
+  }
+
+  return new Transition(subgroups, parents, name, id);
+}
+
+var Selection = selection.prototype.constructor;
+
+function transition_selection() {
+  return new Selection(this._groups, this._parents);
+}
+
+function styleNull(name, interpolate) {
+  var string00,
+      string10,
+      interpolate0;
+  return function() {
+    var string0 = styleValue(this, name),
+        string1 = (this.style.removeProperty(name), styleValue(this, name));
+    return string0 === string1 ? null
+        : string0 === string00 && string1 === string10 ? interpolate0
+        : interpolate0 = interpolate(string00 = string0, string10 = string1);
+  };
+}
+
+function styleRemove(name) {
+  return function() {
+    this.style.removeProperty(name);
+  };
+}
+
+function styleConstant(name, interpolate, value1) {
+  var string00,
+      string1 = value1 + "",
+      interpolate0;
+  return function() {
+    var string0 = styleValue(this, name);
+    return string0 === string1 ? null
+        : string0 === string00 ? interpolate0
+        : interpolate0 = interpolate(string00 = string0, value1);
+  };
+}
+
+function styleFunction(name, interpolate, value) {
+  var string00,
+      string10,
+      interpolate0;
+  return function() {
+    var string0 = styleValue(this, name),
+        value1 = value(this),
+        string1 = value1 + "";
+    if (value1 == null) string1 = value1 = (this.style.removeProperty(name), styleValue(this, name));
+    return string0 === string1 ? null
+        : string0 === string00 && string1 === string10 ? interpolate0
+        : (string10 = string1, interpolate0 = interpolate(string00 = string0, value1));
+  };
+}
+
+function styleMaybeRemove(id, name) {
+  var on0, on1, listener0, key = "style." + name, event = "end." + key, remove;
+  return function() {
+    var schedule = set(this, id),
+        on = schedule.on,
+        listener = schedule.value[key] == null ? remove || (remove = styleRemove(name)) : undefined;
+
+    // If this node shared a dispatch with the previous node,
+    // just assign the updated shared dispatch and we’re done!
+    // Otherwise, copy-on-write.
+    if (on !== on0 || listener0 !== listener) (on1 = (on0 = on).copy()).on(event, listener0 = listener);
+
+    schedule.on = on1;
+  };
+}
+
+function transition_style(name, value, priority) {
+  var i = (name += "") === "transform" ? interpolateTransformCss : interpolate;
+  return value == null ? this
+      .styleTween(name, styleNull(name, i))
+      .on("end.style." + name, styleRemove(name))
+    : typeof value === "function" ? this
+      .styleTween(name, styleFunction(name, i, tweenValue(this, "style." + name, value)))
+      .each(styleMaybeRemove(this._id, name))
+    : this
+      .styleTween(name, styleConstant(name, i, value), priority)
+      .on("end.style." + name, null);
+}
+
+function styleInterpolate(name, i, priority) {
+  return function(t) {
+    this.style.setProperty(name, i.call(this, t), priority);
+  };
+}
+
+function styleTween(name, value, priority) {
+  var t, i0;
+  function tween() {
+    var i = value.apply(this, arguments);
+    if (i !== i0) t = (i0 = i) && styleInterpolate(name, i, priority);
+    return t;
+  }
+  tween._value = value;
+  return tween;
+}
+
+function transition_styleTween(name, value, priority) {
+  var key = "style." + (name += "");
+  if (arguments.length < 2) return (key = this.tween(key)) && key._value;
+  if (value == null) return this.tween(key, null);
+  if (typeof value !== "function") throw new Error;
+  return this.tween(key, styleTween(name, value, priority == null ? "" : priority));
+}
+
+function textConstant(value) {
+  return function() {
+    this.textContent = value;
+  };
+}
+
+function textFunction(value) {
+  return function() {
+    var value1 = value(this);
+    this.textContent = value1 == null ? "" : value1;
+  };
+}
+
+function transition_text(value) {
+  return this.tween("text", typeof value === "function"
+      ? textFunction(tweenValue(this, "text", value))
+      : textConstant(value == null ? "" : value + ""));
+}
+
+function textInterpolate(i) {
+  return function(t) {
+    this.textContent = i.call(this, t);
+  };
+}
+
+function textTween(value) {
+  var t0, i0;
+  function tween() {
+    var i = value.apply(this, arguments);
+    if (i !== i0) t0 = (i0 = i) && textInterpolate(i);
+    return t0;
+  }
+  tween._value = value;
+  return tween;
+}
+
+function transition_textTween(value) {
+  var key = "text";
+  if (arguments.length < 1) return (key = this.tween(key)) && key._value;
+  if (value == null) return this.tween(key, null);
+  if (typeof value !== "function") throw new Error;
+  return this.tween(key, textTween(value));
+}
+
+function transition_transition() {
+  var name = this._name,
+      id0 = this._id,
+      id1 = newId();
+
+  for (var groups = this._groups, m = groups.length, j = 0; j < m; ++j) {
+    for (var group = groups[j], n = group.length, node, i = 0; i < n; ++i) {
+      if (node = group[i]) {
+        var inherit = get(node, id0);
+        schedule(node, name, id1, i, group, {
+          time: inherit.time + inherit.delay + inherit.duration,
+          delay: 0,
+          duration: inherit.duration,
+          ease: inherit.ease
+        });
+      }
+    }
+  }
+
+  return new Transition(groups, this._parents, name, id1);
+}
+
+function transition_end() {
+  var on0, on1, that = this, id = that._id, size = that.size();
+  return new Promise(function(resolve, reject) {
+    var cancel = {value: reject},
+        end = {value: function() { if (--size === 0) resolve(); }};
+
+    that.each(function() {
+      var schedule = set(this, id),
+          on = schedule.on;
+
+      // If this node shared a dispatch with the previous node,
+      // just assign the updated shared dispatch and we’re done!
+      // Otherwise, copy-on-write.
+      if (on !== on0) {
+        on1 = (on0 = on).copy();
+        on1._.cancel.push(cancel);
+        on1._.interrupt.push(cancel);
+        on1._.end.push(end);
+      }
+
+      schedule.on = on1;
+    });
+
+    // The selection was empty, resolve end immediately
+    if (size === 0) resolve();
+  });
+}
+
+var id = 0;
+
+function Transition(groups, parents, name, id) {
+  this._groups = groups;
+  this._parents = parents;
+  this._name = name;
+  this._id = id;
+}
+
+function newId() {
+  return ++id;
+}
+
+var selection_prototype = selection.prototype;
+
+Transition.prototype = {
+  constructor: Transition,
+  select: transition_select,
+  selectAll: transition_selectAll,
+  selectChild: selection_prototype.selectChild,
+  selectChildren: selection_prototype.selectChildren,
+  filter: transition_filter,
+  merge: transition_merge,
+  selection: transition_selection,
+  transition: transition_transition,
+  call: selection_prototype.call,
+  nodes: selection_prototype.nodes,
+  node: selection_prototype.node,
+  size: selection_prototype.size,
+  empty: selection_prototype.empty,
+  each: selection_prototype.each,
+  on: transition_on,
+  attr: transition_attr,
+  attrTween: transition_attrTween,
+  style: transition_style,
+  styleTween: transition_styleTween,
+  text: transition_text,
+  textTween: transition_textTween,
+  remove: transition_remove,
+  tween: transition_tween,
+  delay: transition_delay,
+  duration: transition_duration,
+  ease: transition_ease,
+  easeVarying: transition_easeVarying,
+  end: transition_end,
+  [Symbol.iterator]: selection_prototype[Symbol.iterator]
+};
+
+function cubicInOut(t) {
+  return ((t *= 2) <= 1 ? t * t * t : (t -= 2) * t * t + 2) / 2;
+}
+
+var defaultTiming = {
+  time: null, // Set on use.
+  delay: 0,
+  duration: 250,
+  ease: cubicInOut
+};
+
+function inherit(node, id) {
+  var timing;
+  while (!(timing = node.__transition) || !(timing = timing[id])) {
+    if (!(node = node.parentNode)) {
+      throw new Error(`transition ${id} not found`);
+    }
+  }
+  return timing;
+}
+
+function selection_transition(name) {
+  var id,
+      timing;
+
+  if (name instanceof Transition) {
+    id = name._id, name = name._name;
+  } else {
+    id = newId(), (timing = defaultTiming).time = now(), name = name == null ? null : name + "";
+  }
+
+  for (var groups = this._groups, m = groups.length, j = 0; j < m; ++j) {
+    for (var group = groups[j], n = group.length, node, i = 0; i < n; ++i) {
+      if (node = group[i]) {
+        schedule(node, name, id, i, group, timing || inherit(node, id));
+      }
+    }
+  }
+
+  return new Transition(groups, this._parents, name, id);
+}
+
+selection.prototype.interrupt = selection_interrupt;
+selection.prototype.transition = selection_transition;
+
+const pi$1 = Math.PI,
+    tau$1 = 2 * pi$1,
+    epsilon$1 = 1e-6,
+    tauEpsilon = tau$1 - epsilon$1;
+
+function append(strings) {
+  this._ += strings[0];
+  for (let i = 1, n = strings.length; i < n; ++i) {
+    this._ += arguments[i] + strings[i];
+  }
+}
+
+function appendRound(digits) {
+  let d = Math.floor(digits);
+  if (!(d >= 0)) throw new Error(`invalid digits: ${digits}`);
+  if (d > 15) return append;
+  const k = 10 ** d;
+  return function(strings) {
+    this._ += strings[0];
+    for (let i = 1, n = strings.length; i < n; ++i) {
+      this._ += Math.round(arguments[i] * k) / k + strings[i];
+    }
+  };
+}
+
+class Path {
+  constructor(digits) {
+    this._x0 = this._y0 = // start of current subpath
+    this._x1 = this._y1 = null; // end of current subpath
+    this._ = "";
+    this._append = digits == null ? append : appendRound(digits);
+  }
+  moveTo(x, y) {
+    this._append`M${this._x0 = this._x1 = +x},${this._y0 = this._y1 = +y}`;
+  }
+  closePath() {
+    if (this._x1 !== null) {
+      this._x1 = this._x0, this._y1 = this._y0;
+      this._append`Z`;
+    }
+  }
+  lineTo(x, y) {
+    this._append`L${this._x1 = +x},${this._y1 = +y}`;
+  }
+  quadraticCurveTo(x1, y1, x, y) {
+    this._append`Q${+x1},${+y1},${this._x1 = +x},${this._y1 = +y}`;
+  }
+  bezierCurveTo(x1, y1, x2, y2, x, y) {
+    this._append`C${+x1},${+y1},${+x2},${+y2},${this._x1 = +x},${this._y1 = +y}`;
+  }
+  arcTo(x1, y1, x2, y2, r) {
+    x1 = +x1, y1 = +y1, x2 = +x2, y2 = +y2, r = +r;
+
+    // Is the radius negative? Error.
+    if (r < 0) throw new Error(`negative radius: ${r}`);
+
+    let x0 = this._x1,
+        y0 = this._y1,
+        x21 = x2 - x1,
+        y21 = y2 - y1,
+        x01 = x0 - x1,
+        y01 = y0 - y1,
+        l01_2 = x01 * x01 + y01 * y01;
+
+    // Is this path empty? Move to (x1,y1).
+    if (this._x1 === null) {
+      this._append`M${this._x1 = x1},${this._y1 = y1}`;
+    }
+
+    // Or, is (x1,y1) coincident with (x0,y0)? Do nothing.
+    else if (!(l01_2 > epsilon$1));
+
+    // Or, are (x0,y0), (x1,y1) and (x2,y2) collinear?
+    // Equivalently, is (x1,y1) coincident with (x2,y2)?
+    // Or, is the radius zero? Line to (x1,y1).
+    else if (!(Math.abs(y01 * x21 - y21 * x01) > epsilon$1) || !r) {
+      this._append`L${this._x1 = x1},${this._y1 = y1}`;
+    }
+
+    // Otherwise, draw an arc!
+    else {
+      let x20 = x2 - x0,
+          y20 = y2 - y0,
+          l21_2 = x21 * x21 + y21 * y21,
+          l20_2 = x20 * x20 + y20 * y20,
+          l21 = Math.sqrt(l21_2),
+          l01 = Math.sqrt(l01_2),
+          l = r * Math.tan((pi$1 - Math.acos((l21_2 + l01_2 - l20_2) / (2 * l21 * l01))) / 2),
+          t01 = l / l01,
+          t21 = l / l21;
+
+      // If the start tangent is not coincident with (x0,y0), line to.
+      if (Math.abs(t01 - 1) > epsilon$1) {
+        this._append`L${x1 + t01 * x01},${y1 + t01 * y01}`;
+      }
+
+      this._append`A${r},${r},0,0,${+(y01 * x20 > x01 * y20)},${this._x1 = x1 + t21 * x21},${this._y1 = y1 + t21 * y21}`;
+    }
+  }
+  arc(x, y, r, a0, a1, ccw) {
+    x = +x, y = +y, r = +r, ccw = !!ccw;
+
+    // Is the radius negative? Error.
+    if (r < 0) throw new Error(`negative radius: ${r}`);
+
+    let dx = r * Math.cos(a0),
+        dy = r * Math.sin(a0),
+        x0 = x + dx,
+        y0 = y + dy,
+        cw = 1 ^ ccw,
+        da = ccw ? a0 - a1 : a1 - a0;
+
+    // Is this path empty? Move to (x0,y0).
+    if (this._x1 === null) {
+      this._append`M${x0},${y0}`;
+    }
+
+    // Or, is (x0,y0) not coincident with the previous point? Line to (x0,y0).
+    else if (Math.abs(this._x1 - x0) > epsilon$1 || Math.abs(this._y1 - y0) > epsilon$1) {
+      this._append`L${x0},${y0}`;
+    }
+
+    // Is this arc empty? We’re done.
+    if (!r) return;
+
+    // Does the angle go the wrong way? Flip the direction.
+    if (da < 0) da = da % tau$1 + tau$1;
+
+    // Is this a complete circle? Draw two arcs to complete the circle.
+    if (da > tauEpsilon) {
+      this._append`A${r},${r},0,1,${cw},${x - dx},${y - dy}A${r},${r},0,1,${cw},${this._x1 = x0},${this._y1 = y0}`;
+    }
+
+    // Is this arc non-empty? Draw an arc!
+    else if (da > epsilon$1) {
+      this._append`A${r},${r},0,${+(da >= pi$1)},${cw},${this._x1 = x + r * Math.cos(a1)},${this._y1 = y + r * Math.sin(a1)}`;
+    }
+  }
+  rect(x, y, w, h) {
+    this._append`M${this._x0 = this._x1 = +x},${this._y0 = this._y1 = +y}h${w = +w}v${+h}h${-w}Z`;
+  }
+  toString() {
+    return this._;
+  }
+}
+
+function constant(x) {
+  return function constant() {
+    return x;
+  };
+}
+
+const abs = Math.abs;
+const atan2 = Math.atan2;
+const cos = Math.cos;
+const max = Math.max;
+const min = Math.min;
+const sin = Math.sin;
+const sqrt = Math.sqrt;
+
+const epsilon = 1e-12;
+const pi = Math.PI;
+const halfPi = pi / 2;
+const tau = 2 * pi;
+
+function acos(x) {
+  return x > 1 ? 0 : x < -1 ? pi : Math.acos(x);
+}
+
+function asin(x) {
+  return x >= 1 ? halfPi : x <= -1 ? -halfPi : Math.asin(x);
+}
+
+function withPath(shape) {
+  let digits = 3;
+
+  shape.digits = function(_) {
+    if (!arguments.length) return digits;
+    if (_ == null) {
+      digits = null;
+    } else {
+      const d = Math.floor(_);
+      if (!(d >= 0)) throw new RangeError(`invalid digits: ${_}`);
+      digits = d;
+    }
+    return shape;
+  };
+
+  return () => new Path(digits);
+}
+
+function arcInnerRadius(d) {
+  return d.innerRadius;
+}
+
+function arcOuterRadius(d) {
+  return d.outerRadius;
+}
+
+function arcStartAngle(d) {
+  return d.startAngle;
+}
+
+function arcEndAngle(d) {
+  return d.endAngle;
+}
+
+function arcPadAngle(d) {
+  return d && d.padAngle; // Note: optional!
+}
+
+function intersect(x0, y0, x1, y1, x2, y2, x3, y3) {
+  var x10 = x1 - x0, y10 = y1 - y0,
+      x32 = x3 - x2, y32 = y3 - y2,
+      t = y32 * x10 - x32 * y10;
+  if (t * t < epsilon) return;
+  t = (x32 * (y0 - y2) - y32 * (x0 - x2)) / t;
+  return [x0 + t * x10, y0 + t * y10];
+}
+
+// Compute perpendicular offset line of length rc.
+// http://mathworld.wolfram.com/Circle-LineIntersection.html
+function cornerTangents(x0, y0, x1, y1, r1, rc, cw) {
+  var x01 = x0 - x1,
+      y01 = y0 - y1,
+      lo = (cw ? rc : -rc) / sqrt(x01 * x01 + y01 * y01),
+      ox = lo * y01,
+      oy = -lo * x01,
+      x11 = x0 + ox,
+      y11 = y0 + oy,
+      x10 = x1 + ox,
+      y10 = y1 + oy,
+      x00 = (x11 + x10) / 2,
+      y00 = (y11 + y10) / 2,
+      dx = x10 - x11,
+      dy = y10 - y11,
+      d2 = dx * dx + dy * dy,
+      r = r1 - rc,
+      D = x11 * y10 - x10 * y11,
+      d = (dy < 0 ? -1 : 1) * sqrt(max(0, r * r * d2 - D * D)),
+      cx0 = (D * dy - dx * d) / d2,
+      cy0 = (-D * dx - dy * d) / d2,
+      cx1 = (D * dy + dx * d) / d2,
+      cy1 = (-D * dx + dy * d) / d2,
+      dx0 = cx0 - x00,
+      dy0 = cy0 - y00,
+      dx1 = cx1 - x00,
+      dy1 = cy1 - y00;
+
+  // Pick the closer of the two intersection points.
+  // TODO Is there a faster way to determine which intersection to use?
+  if (dx0 * dx0 + dy0 * dy0 > dx1 * dx1 + dy1 * dy1) cx0 = cx1, cy0 = cy1;
+
+  return {
+    cx: cx0,
+    cy: cy0,
+    x01: -ox,
+    y01: -oy,
+    x11: cx0 * (r1 / r - 1),
+    y11: cy0 * (r1 / r - 1)
+  };
+}
+
+function d3Arc() {
+  var innerRadius = arcInnerRadius,
+      outerRadius = arcOuterRadius,
+      cornerRadius = constant(0),
+      padRadius = null,
+      startAngle = arcStartAngle,
+      endAngle = arcEndAngle,
+      padAngle = arcPadAngle,
+      context = null,
+      path = withPath(arc);
+
+  function arc() {
+    var buffer,
+        r,
+        r0 = +innerRadius.apply(this, arguments),
+        r1 = +outerRadius.apply(this, arguments),
+        a0 = startAngle.apply(this, arguments) - halfPi,
+        a1 = endAngle.apply(this, arguments) - halfPi,
+        da = abs(a1 - a0),
+        cw = a1 > a0;
+
+    if (!context) context = buffer = path();
+
+    // Ensure that the outer radius is always larger than the inner radius.
+    if (r1 < r0) r = r1, r1 = r0, r0 = r;
+
+    // Is it a point?
+    if (!(r1 > epsilon)) context.moveTo(0, 0);
+
+    // Or is it a circle or annulus?
+    else if (da > tau - epsilon) {
+      context.moveTo(r1 * cos(a0), r1 * sin(a0));
+      context.arc(0, 0, r1, a0, a1, !cw);
+      if (r0 > epsilon) {
+        context.moveTo(r0 * cos(a1), r0 * sin(a1));
+        context.arc(0, 0, r0, a1, a0, cw);
+      }
+    }
+
+    // Or is it a circular or annular sector?
+    else {
+      var a01 = a0,
+          a11 = a1,
+          a00 = a0,
+          a10 = a1,
+          da0 = da,
+          da1 = da,
+          ap = padAngle.apply(this, arguments) / 2,
+          rp = (ap > epsilon) && (padRadius ? +padRadius.apply(this, arguments) : sqrt(r0 * r0 + r1 * r1)),
+          rc = min(abs(r1 - r0) / 2, +cornerRadius.apply(this, arguments)),
+          rc0 = rc,
+          rc1 = rc,
+          t0,
+          t1;
+
+      // Apply padding? Note that since r1 ≥ r0, da1 ≥ da0.
+      if (rp > epsilon) {
+        var p0 = asin(rp / r0 * sin(ap)),
+            p1 = asin(rp / r1 * sin(ap));
+        if ((da0 -= p0 * 2) > epsilon) p0 *= (cw ? 1 : -1), a00 += p0, a10 -= p0;
+        else da0 = 0, a00 = a10 = (a0 + a1) / 2;
+        if ((da1 -= p1 * 2) > epsilon) p1 *= (cw ? 1 : -1), a01 += p1, a11 -= p1;
+        else da1 = 0, a01 = a11 = (a0 + a1) / 2;
+      }
+
+      var x01 = r1 * cos(a01),
+          y01 = r1 * sin(a01),
+          x10 = r0 * cos(a10),
+          y10 = r0 * sin(a10);
+
+      // Apply rounded corners?
+      if (rc > epsilon) {
+        var x11 = r1 * cos(a11),
+            y11 = r1 * sin(a11),
+            x00 = r0 * cos(a00),
+            y00 = r0 * sin(a00),
+            oc;
+
+        // Restrict the corner radius according to the sector angle. If this
+        // intersection fails, it’s probably because the arc is too small, so
+        // disable the corner radius entirely.
+        if (da < pi) {
+          if (oc = intersect(x01, y01, x00, y00, x11, y11, x10, y10)) {
+            var ax = x01 - oc[0],
+                ay = y01 - oc[1],
+                bx = x11 - oc[0],
+                by = y11 - oc[1],
+                kc = 1 / sin(acos((ax * bx + ay * by) / (sqrt(ax * ax + ay * ay) * sqrt(bx * bx + by * by))) / 2),
+                lc = sqrt(oc[0] * oc[0] + oc[1] * oc[1]);
+            rc0 = min(rc, (r0 - lc) / (kc - 1));
+            rc1 = min(rc, (r1 - lc) / (kc + 1));
+          } else {
+            rc0 = rc1 = 0;
+          }
+        }
+      }
+
+      // Is the sector collapsed to a line?
+      if (!(da1 > epsilon)) context.moveTo(x01, y01);
+
+      // Does the sector’s outer ring have rounded corners?
+      else if (rc1 > epsilon) {
+        t0 = cornerTangents(x00, y00, x01, y01, r1, rc1, cw);
+        t1 = cornerTangents(x11, y11, x10, y10, r1, rc1, cw);
+
+        context.moveTo(t0.cx + t0.x01, t0.cy + t0.y01);
+
+        // Have the corners merged?
+        if (rc1 < rc) context.arc(t0.cx, t0.cy, rc1, atan2(t0.y01, t0.x01), atan2(t1.y01, t1.x01), !cw);
+
+        // Otherwise, draw the two corners and the ring.
+        else {
+          context.arc(t0.cx, t0.cy, rc1, atan2(t0.y01, t0.x01), atan2(t0.y11, t0.x11), !cw);
+          context.arc(0, 0, r1, atan2(t0.cy + t0.y11, t0.cx + t0.x11), atan2(t1.cy + t1.y11, t1.cx + t1.x11), !cw);
+          context.arc(t1.cx, t1.cy, rc1, atan2(t1.y11, t1.x11), atan2(t1.y01, t1.x01), !cw);
+        }
+      }
+
+      // Or is the outer ring just a circular arc?
+      else context.moveTo(x01, y01), context.arc(0, 0, r1, a01, a11, !cw);
+
+      // Is there no inner ring, and it’s a circular sector?
+      // Or perhaps it’s an annular sector collapsed due to padding?
+      if (!(r0 > epsilon) || !(da0 > epsilon)) context.lineTo(x10, y10);
+
+      // Does the sector’s inner ring (or point) have rounded corners?
+      else if (rc0 > epsilon) {
+        t0 = cornerTangents(x10, y10, x11, y11, r0, -rc0, cw);
+        t1 = cornerTangents(x01, y01, x00, y00, r0, -rc0, cw);
+
+        context.lineTo(t0.cx + t0.x01, t0.cy + t0.y01);
+
+        // Have the corners merged?
+        if (rc0 < rc) context.arc(t0.cx, t0.cy, rc0, atan2(t0.y01, t0.x01), atan2(t1.y01, t1.x01), !cw);
+
+        // Otherwise, draw the two corners and the ring.
+        else {
+          context.arc(t0.cx, t0.cy, rc0, atan2(t0.y01, t0.x01), atan2(t0.y11, t0.x11), !cw);
+          context.arc(0, 0, r0, atan2(t0.cy + t0.y11, t0.cx + t0.x11), atan2(t1.cy + t1.y11, t1.cx + t1.x11), cw);
+          context.arc(t1.cx, t1.cy, rc0, atan2(t1.y11, t1.x11), atan2(t1.y01, t1.x01), !cw);
+        }
+      }
+
+      // Or is the inner ring just a circular arc?
+      else context.arc(0, 0, r0, a10, a00, cw);
+    }
+
+    context.closePath();
+
+    if (buffer) return context = null, buffer + "" || null;
+  }
+
+  arc.centroid = function() {
+    var r = (+innerRadius.apply(this, arguments) + +outerRadius.apply(this, arguments)) / 2,
+        a = (+startAngle.apply(this, arguments) + +endAngle.apply(this, arguments)) / 2 - pi / 2;
+    return [cos(a) * r, sin(a) * r];
+  };
+
+  arc.innerRadius = function(_) {
+    return arguments.length ? (innerRadius = typeof _ === "function" ? _ : constant(+_), arc) : innerRadius;
+  };
+
+  arc.outerRadius = function(_) {
+    return arguments.length ? (outerRadius = typeof _ === "function" ? _ : constant(+_), arc) : outerRadius;
+  };
+
+  arc.cornerRadius = function(_) {
+    return arguments.length ? (cornerRadius = typeof _ === "function" ? _ : constant(+_), arc) : cornerRadius;
+  };
+
+  arc.padRadius = function(_) {
+    return arguments.length ? (padRadius = _ == null ? null : typeof _ === "function" ? _ : constant(+_), arc) : padRadius;
+  };
+
+  arc.startAngle = function(_) {
+    return arguments.length ? (startAngle = typeof _ === "function" ? _ : constant(+_), arc) : startAngle;
+  };
+
+  arc.endAngle = function(_) {
+    return arguments.length ? (endAngle = typeof _ === "function" ? _ : constant(+_), arc) : endAngle;
+  };
+
+  arc.padAngle = function(_) {
+    return arguments.length ? (padAngle = typeof _ === "function" ? _ : constant(+_), arc) : padAngle;
+  };
+
+  arc.context = function(_) {
+    return arguments.length ? ((context = _ == null ? null : _), arc) : context;
+  };
+
+  return arc;
+}
+
+function array(x) {
+  return typeof x === "object" && "length" in x
+    ? x // Array, TypedArray, NodeList, array-like
+    : Array.from(x); // Map, Set, iterable, string, or anything else
+}
+
+function Linear(context) {
+  this._context = context;
+}
+
+Linear.prototype = {
+  areaStart: function() {
+    this._line = 0;
+  },
+  areaEnd: function() {
+    this._line = NaN;
+  },
+  lineStart: function() {
+    this._point = 0;
+  },
+  lineEnd: function() {
+    if (this._line || (this._line !== 0 && this._point === 1)) this._context.closePath();
+    this._line = 1 - this._line;
+  },
+  point: function(x, y) {
+    x = +x, y = +y;
+    switch (this._point) {
+      case 0: this._point = 1; this._line ? this._context.lineTo(x, y) : this._context.moveTo(x, y); break;
+      case 1: this._point = 2; // falls through
+      default: this._context.lineTo(x, y); break;
+    }
+  }
+};
+
+function curveLinear(context) {
+  return new Linear(context);
+}
+
+function x(p) {
+  return p[0];
+}
+
+function y(p) {
+  return p[1];
+}
+
+function d3Line(x$1, y$1) {
+  var defined = constant(true),
+      context = null,
+      curve = curveLinear,
+      output = null,
+      path = withPath(line);
+
+  x$1 = typeof x$1 === "function" ? x$1 : (x$1 === undefined) ? x : constant(x$1);
+  y$1 = typeof y$1 === "function" ? y$1 : (y$1 === undefined) ? y : constant(y$1);
+
+  function line(data) {
+    var i,
+        n = (data = array(data)).length,
+        d,
+        defined0 = false,
+        buffer;
+
+    if (context == null) output = curve(buffer = path());
+
+    for (i = 0; i <= n; ++i) {
+      if (!(i < n && defined(d = data[i], i, data)) === defined0) {
+        if (defined0 = !defined0) output.lineStart();
+        else output.lineEnd();
+      }
+      if (defined0) output.point(+x$1(d, i, data), +y$1(d, i, data));
+    }
+
+    if (buffer) return output = null, buffer + "" || null;
+  }
+
+  line.x = function(_) {
+    return arguments.length ? (x$1 = typeof _ === "function" ? _ : constant(+_), line) : x$1;
+  };
+
+  line.y = function(_) {
+    return arguments.length ? (y$1 = typeof _ === "function" ? _ : constant(+_), line) : y$1;
+  };
+
+  line.defined = function(_) {
+    return arguments.length ? (defined = typeof _ === "function" ? _ : constant(!!_), line) : defined;
+  };
+
+  line.curve = function(_) {
+    return arguments.length ? (curve = _, context != null && (output = curve(context)), line) : curve;
+  };
+
+  line.context = function(_) {
+    return arguments.length ? (_ == null ? context = output = null : output = curve(context = _), line) : context;
+  };
+
+  return line;
+}
+
+/**  This class is used to render charts using SVG elements. */
+class SVGRenderer extends BaseRenderer {
+  /**
+   * The function sets the layout of a chart using D3 and SVG.
+   *
+   * @param {number} width - chart width
+   * @param {number} height - chart height
+   * @param {number} top - chart margin top
+   * @param {number} left - chart margin left
+   */
+  setLayout(width, height, top, left) {
+    d3Select(this.context)
+      .attr('width', width)
+      .attr('height', height)
+      .attr('viewBox', [0, 0, width, height])
+      .attr('style', 'display:block;max-width:100%;height:auto;')
+      .call((g) => {
+      g.append('g')
+        .attr('class', 'vega-chart-draw-g')
+        .attr('transform', `translate(${left},${top})`);
+    })
+      .call((g) => {
+      g.append('g')
+        .attr('class', 'vega-chart-legend-g')
+        .attr('transform', `translate(${left / 3},${top / 4})`);
+    });
+  }
+  /**
+   * This function draws a line on a chart using D3.js library.
+   *
+   * @param {ChartPosition} from - The starting position of the line to be drawn on the chart. It is an
+   * object with two properties: x and y, representing the x and y coordinates of the starting point respectively.
+   * @param {ChartPosition} to - The "to" parameter is a ChartPosition object that represents the ending
+   * point of the line to be drawn. It contains the x and y coordinates of the point on the chart where the line should end.
+   * @param {string} color - The color of the line
+   */
+  drawLine(from, to, color) {
+    d3Select(this.context)
+      .select('.vega-chart-draw-g')
+      .append('line')
+      .attr('x1', from.x)
+      .attr('y1', from.y)
+      .attr('x2', to.x)
+      .attr('y2', to.y)
+      .attr('stroke', color);
+  }
+  /**
+   * This function draws an x-axis on a chart using D3 and a given scale and end point.
+   *
+   * @param {ChartExtend<unknown>} extend - which is an object that contains information about the chart's scale and end position on the y-axis. The `scale` property
+   * is a D3 scale object that maps data values to pixel positions on the x-axis
+   * @param {string} color - The stroke color of axis
+   * @param {string} textStyle - The text style of the axis
+   */
+  drawXAxis(extend, color, textStyle) {
+    const { scale, end, labelFormatter, direction, height } = extend;
+    let axis = axisBottom(scale);
+    if (labelFormatter) {
+      axis = axis.tickFormat(labelFormatter);
+    }
+    d3Select(this.context)
+      .select('.vega-chart-draw-g')
+      .append('g')
+      .attr('class', 'vega-chart-x-axis')
+      .attr('transform', `translate(0, ${end.y})`)
+      .call(axis)
+      .call((g) => {
+      g.select('.domain').attr('stroke-width', 2).attr('stroke', color);
+    })
+      .call((g) => {
+      g.selectAll('line').attr('stroke', color);
+      g.selectAll('text').attr('style', textStyle);
+    })
+      .call((g) => {
+      if (direction === 'horizontal') {
+        g.selectAll('line').clone().attr('y2', `${-height}`);
+        g.select('.domain').attr('stroke-width', 0);
+      }
+    });
+  }
+  /**
+   * This function draws the Y-axis of a chart using D3 and a given scale.
+   *
+   * @param {ChartExtend<unknown>} extend -  It likely contains additional information or settings related to the chart being drawn, but without more context it's
+   * difficult to say exactly what it contains.
+   * @param {string} color - The stroke color of the axis
+   * @param {string} textStyle - The text style of the axis
+   */
+  drawYAxis(extend, color, textStyle) {
+    const { scale, labelFormatter, width, tickSize, direction } = extend;
+    let axis = axisLeft(scale).ticks(tickSize);
+    if (labelFormatter) {
+      axis = axis.tickFormat(labelFormatter);
+    }
+    d3Select(this.context)
+      .select('.vega-chart-draw-g')
+      .append('g')
+      .attr('class', 'vega-chart-y-axis')
+      .call(axis)
+      .call((g) => {
+      g.select('.domain').attr('stroke-width', 0).attr('stroke', color);
+    })
+      .call((g) => {
+      g.selectAll('line').attr('stroke-width', 2).attr('stroke', color);
+      g.selectAll('text').attr('style', textStyle);
+    })
+      .call((g) => {
+      if (direction !== 'horizontal') {
+        g.selectAll('line').clone().attr('x2', `${width}`);
+      }
+      else {
+        g.select('.domain').attr('stroke-width', 2).attr('stroke', color);
+      }
+    });
+  }
+  /**
+   * This function draws a circle with a given center, radius, and color using D3.js.
+   *
+   * @param {ChartPosition} center - ChartPosition, which is an object containing the x and y coordinates of the center of the circle.
+   * @param {number} radius - The radius parameter is a number that specifies the radius of the circle to be drawn.
+   * @param {string} fillColor - The color parameter is a string that represents the color of the circle to be drawn
+   * @param {number} strokeWidth - the border width
+   * @param {string} strokeColor - the border color
+   */
+  drawCircle(center, radius, fillColor, strokeWidth, strokeColor) {
+    d3Select(this.context)
+      .select('.vega-chart-draw-g')
+      .append(() => this.getCircleNode(center, radius, fillColor, strokeWidth, strokeColor));
+  }
+  /**
+   * This function draws text on a chart at a specified position using D3.js.
+   *
+   * @param {ChartPosition} position - ChartPosition is an object that contains the x and y coordinates where the text will be positioned on the chart.
+   * @param {string} text - The text parameter is a string that represents the text that will be
+   * displayed on the chart. It is the content that will be added to the text element created by this function.
+   * @param {string} textStyle - The text style of the axis
+   * @param {TextAnchorType} textAnchor - text anchor
+   * @param {number} rotate - rotate of the text
+   */
+  drawText(position, text, textStyle, textAnchor, rotate) {
+    d3Select(this.context)
+      .select('.vega-chart-draw-g')
+      .append(() => this.getTextNode(position, text, textStyle, textAnchor, rotate));
+  }
+  /**
+   * This function draws a legend item with a colored circle and text at a specified position on a chart.
+   *
+   * @param {ChartPosition} position - The position parameter is an object that contains the x and y
+   * coordinates where the legend should be placed on the chart.
+   * @param {string} text - The text to be displayed in the legend.
+   * @param {string} color - Background color token type, which is a type of color
+   * used in the chart's background.
+   * @param {string} textStyle - The text style of the axis
+   * @returns {SVGGElement} svg g element
+   */
+  drawLegend(position, text, color, textStyle) {
+    return d3Select(this.context)
+      .select('.vega-chart-legend-g')
+      .append('g')
+      .attr('class', 'vega-chart-legend-item')
+      .attr('data-legend', text)
+      .attr('transform', `translate(${position.x},${position.y})`)
+      .call((g) => {
+      g.append(() => this.getCircleNode({
+        x: -4,
+        y: -4,
+      }, 4, color));
+      g.append(() => this.getTextNode({ x: 8, y: 0 }, text, textStyle));
+    })
+      .node();
+  }
+  /**
+   * This function draws a rectangle with a specified position, width, height, and optional color using D3.js.
+   *
+   * @param {ChartPosition} position - The position parameter is an object that contains the x and y coordinates of the top-left corner of the rectangle.
+   * @param {number} width - The width of the rectangle to be drawn.
+   * @param {number} height - The height parameter is a number that represents the height of the rectangle to be drawn.
+   * @param {string} [color] - The color parameter is an optional string that represents the color of the rectangle to be drawn. If it is not provided, the rectangle will have no fill color.
+   */
+  drawRect(position, width, height, color) {
+    d3Select(this.context)
+      .select('.vega-chart-draw-g')
+      .append('rect')
+      .attr('fill', color)
+      .attr('x', position.x)
+      .attr('y', position.y)
+      .attr('width', width)
+      .attr('height', height);
+  }
+  /**
+   * This function draws a path on a chart using D3 and SVG based on the provided positions and color.
+   *
+   * @param {ChartPosition[]} positions - An array of ChartPosition objects that represent the
+   * coordinates of the points on the path to be drawn. Each ChartPosition object contains an x and y
+   * value that represent the position of the point on the chart.
+   * @param {string} color - line color
+   * represents a color value. It is likely used to specify the color of the path that will be drawn on the chart.
+   */
+  drawLinePath(positions, color) {
+    d3Select(this.context)
+      .select('.vega-chart-draw-g')
+      .append('path')
+      .attr('class', 'vega-chart-line-path')
+      .datum(positions)
+      .attr('fill', 'none')
+      .attr('stroke', color)
+      .attr('stroke-width', 3)
+      .attr('stroke-linecap', 'round')
+      .attr('stroke-linejoin', 'round')
+      .attr('d', d3Line()
+      .x((position) => position.x)
+      .y((position) => position.y));
+  }
+  /**
+   * This function draws an arc path using D3 library and applies color and radius based on input parameters.
+   *
+   * @param {ChartPosition} center - the arc center position
+   * @param {ArcPathItem} record - an object containing data for the arc path to be drawn
+   * @param {string} color - The color parameter
+   * and is used to set the fill color of the arc path.
+   * @param {number} outerRadius - The outer radius parameter is a number that determines the outer
+   * radius of the arc path being drawn.
+   * @param {number} innerRadius - The inner radius of the arc path, specified as a number.
+   * @returns {SVGPathElement} svg arc path element.
+   */
+  drawArcPath(center, record, color, outerRadius, innerRadius) {
+    return d3Select(this.context)
+      .select('.vega-chart-draw-g')
+      .append('path')
+      .datum(record)
+      .attr('class', 'vega-chart-arc-path')
+      .attr('data-name', (item) => item.data.name)
+      .attr('transform', `translate(${center.x},${center.y})`)
+      .attr('fill', color)
+      .attr('stroke-width', 0)
+      .attr('d', d3Arc().innerRadius(innerRadius).outerRadius(outerRadius))
+      .attr('data-d', d3Arc()
+      .innerRadius(innerRadius)
+      .outerRadius(outerRadius + 10))
+      .node();
+  }
+  /**
+   * This function clears all elements within two specific classes in a D3 selection.
+   */
+  clear() {
+    d3Select(this.context).selectAll('.vega-chart-draw-g').remove();
+    d3Select(this.context).selectAll('.vega-chart-legend-g').remove();
+  }
+  /**
+   * This TypeScript function creates and returns an SVG text element with the given position and text.
+   *
+   * @param {ChartPosition} position - The position parameter is an object that contains the x and y
+   * coordinates where the text element will be placed on the SVG canvas.
+   * @param {string} text - The text parameter is a string that represents the text content that will be
+   * displayed in the SVGTextElement.
+   * @param {string} textStyle - The text style of the axis
+   * @param {TextAnchorType} textAnchor - text anchor
+   * @param {number} rotate - rotate of the text
+   * @returns {SVGTextElement} an SVGTextElement node.
+   */
+  getTextNode(position, text, textStyle, textAnchor = 'start', rotate = 0) {
+    const TextSelectionType = d3Create('svg:text')
+      .attr('style', textStyle)
+      .attr('x', position.x)
+      .attr('y', position.y)
+      .attr('text-anchor', textAnchor)
+      .attr('rotate', rotate)
+      .text(text);
+    return TextSelectionType.node();
+  }
+  /**
+   * This TypeScript function creates an SVG circle element with a specified center, radius, and color.
+   *
+   * @param {ChartPosition} center - The center position of the circle on the chart, specified as an
+   * object with `x` and `y` properties.
+   * @param {number} radius - The radius parameter is a number that represents the radius of the circle
+   * to be created.
+   * @param {string} fillColor - The color parameter
+   * and is used to determine the fill color of the circle. It is likely an enum or string type that maps
+   * to a specific color value.
+   * @param {number} strokeWidth - the border width
+   * @param {string} strokeColor - the border color
+   * @returns {SVGCircleElement} an SVG circle element.
+   */
+  getCircleNode(center, radius, fillColor, strokeWidth, strokeColor) {
+    const circleSelection = d3Create('svg:circle')
+      .attr('r', radius)
+      .attr('cx', center.x)
+      .attr('cy', center.y)
+      .attr('fill', fillColor)
+      .attr('stroke-width', strokeWidth || 0)
+      .attr('stroke', strokeColor);
+    return circleSelection.node();
+  }
+}
+
+/**
+ * The CanvasRenderer class is a TypeScript class that extends the BaseRenderer class and provides
+ * methods for drawing various shapes and elements on a canvas.
+ */
+class CanvasRenderer extends BaseRenderer {
+  /**
+   * The function sets the layout of a chart.
+   *
+   * @param {number} width - chart width
+   * @param {number} height - chart height
+   */
+  setLayout(width, height) {
+    this.context.width = width;
+    this.context.height = height;
+    this.context.style.display = 'block';
+    this.initCanvasContext2d();
+  }
+  /**
+   * The function `drawLine` takes two `ChartPosition` parameters and draws a line between them.
+   *
+   * @param {ChartPosition} from - The starting position of the line on the chart. It is of type ChartPosition.
+   * @param {ChartPosition} to - The "to" parameter in the "drawLine" function is a ChartPosition object
+   * that represents the end point of the line to be drawn. It contains information about the x and y
+   * coordinates of the point on the chart where the line should end.
+   */
+  drawLine(from, to) {
+    const context2d = this.getContext2d();
+    context2d.beginPath();
+    context2d.moveTo(from.x, from.y);
+    context2d.lineTo(to.x, to.y);
+    context2d.closePath();
+  }
+  /**
+   * This function draws the X-axis on a chart and takes in a parameter of type ChartExtend.
+   *
+   * @param {ChartExtend<unknown>} extend - The parameter "extend" is of type "ChartExtend" which is a generic type that can
+   * take any data type as an argument. It is likely used to extend or modify the properties of the chart's X-axis
+   */
+  drawXAxis(extend) {
+    this.drawLine(extend.start, extend.end);
+  }
+  /**
+   * This function draws the Y-axis on a chart.
+   *
+   * @param {ChartExtend<unknown>} extend - The parameter "extend" is of type ChartExtend, which is a generic type that
+   * represents the range of values for a chart axis. It contains information such as the minimum and
+   * maximum values for the axis
+   */
+  drawYAxis(extend) {
+    this.drawLine(extend.start, extend.end);
+  }
+  /**
+   * The function `drawCircle` takes in a center position, radius, and color and draws a circle.
+   *
+   * @param {ChartPosition} center - The center of the circle, represented by a ChartPosition object
+   * that contains the x and y coordinates of the center point.
+   * @param {number} radius - The _radius parameter is a number that represents the radius of the
+   * circle to be drawn. The radius is the distance from the center of the circle to any point on its circumference.
+   * @param {string} fillColor - The _color,
+   * which is a type that represents a color value that can be used as a background color for a chart element
+   * @param {number} strokeWidth - the border width
+   * @param {string} strokeColor - the border color
+   */
+  drawCircle(center, radius, fillColor, strokeWidth, strokeColor) {
+    const context2d = this.getContext2d();
+    if (strokeWidth && strokeColor) {
+      context2d.fillStyle = strokeColor;
+      context2d.beginPath();
+      context2d.arc(center.x, center.y, radius, 0, Math.PI * 2);
+      context2d.fill();
+    }
+    context2d.fillStyle = fillColor;
+    context2d.beginPath();
+    context2d.arc(center.x, center.y, radius - (strokeWidth || 0), 0, Math.PI * 2);
+    context2d.fill();
+  }
+  /**
+   * The function draws a legend on a chart with a circle and text at a specified position and color.
+   *
+   * @param {ChartPosition} position - ChartPosition is a type that represents the position of an
+   * element on a chart. It could be an object with properties like x and y coordinates or a string that
+   * represents a predefined position.
+   * @param {string} text - The text parameter is a string that represents the label or name of the
+   * legend that will be displayed on the chart.
+   * @param {string} color - color string
+   * represents a color for the legend. It could be a string or a number that corresponds to a specific
+   * color value.
+   * @returns {HTMLCanvasElement} chart canvas element
+   */
+  drawLegend(position, text, color) {
+    this.drawCircle(position, 4, color);
+    this.drawText(position, text);
+    return this.context;
+  }
+  /**
+   * The function `drawText` takes a position and a string of text as parameters and does not return anything.
+   *
+   * @param {ChartPosition} position - ChartPosition is a data type that represents the position of the
+   * text on a chart. It could be an object with properties such as x and y coordinates, or it could be
+   * a string that represents a pre-defined position on the chart (e.g. "top-left", "bottom-right",
+   * etc.).
+   * @param {string} text - The text parameter is a string that represents the text that needs to be drawn on the chart.
+   */
+  drawText(position, text) {
+    this.getContext2d().fillText(text, position.x, position.y);
+  }
+  /**
+   * The function `drawRect` takes in a position, width, height, and optional color parameter to draw a rectangle.
+   *
+   * @param {ChartPosition} position - The position parameter is of type ChartPosition and represents
+   * the position of the rectangle on the chart. It could be an object with x and y properties
+   * representing the coordinates of the top-left corner of the rectangle.
+   * @param {number} width - The width parameter is a number that represents the width of the rectangle
+   * to be drawn. It determines how wide the rectangle will be on the chart.
+   * @param {number} height - The `height` parameter in the `drawRect` function specifies the height of
+   * the rectangle to be drawn. It is a required parameter and must be a number value.
+   * @param {string} [color] - The color parameter is an optional parameter that
+   * specifies the background color of the rectangle. It is of type string, which is
+   * a custom type that represents a color token
+   */
+  drawRect(position, width, height, color) {
+    const context2d = this.getContext2d();
+    context2d.fillStyle = color;
+    context2d.fillRect(position.x, position.y, width, height);
+  }
+  /**
+   * The function `drawLinePath` takes in an array of `ChartPosition` objects and a `string` color and draws a path.
+   *
+   * @param {ChartPosition[]} positions - An array of ChartPosition objects that represent the
+   * coordinates of points on a chart. Each ChartPosition object has an x and y property that represent
+   * the horizontal and vertical position of the point on the chart.
+   * @param {string} color - The `color` parameter is of type
+   * `string` and represents the color of the path to be drawn. This parameter is
+   * used to set the background color of the chart.
+   */
+  drawLinePath(positions, color) {
+    const pathNode = d3Create('svg:path')
+      .datum(positions)
+      .attr('d', d3Line()
+      .x((position) => position.x)
+      .y((position) => position.y))
+      .node();
+    const path = new Path2D(pathNode.getAttribute('d'));
+    const context2d = this.getContext2d();
+    context2d.lineWidth = 3;
+    context2d.strokeStyle = color;
+    context2d.stroke(path);
+  }
+  /**
+   * This function draws an arc path using D3 library and applies color and radius based on input parameters.
+   *
+   * @param {ChartPosition} center - arc center position
+   * @param {ArcPathItem} record - an object containing data for the arc path to be drawn
+   * @param {string} color - The color parameter
+   * and is used to set the fill color of the arc path.
+   * @param {number} outerRadius - The outer radius parameter is a number that determines the outer
+   * radius of the arc path being drawn.
+   * @param {number} innerRadius - The inner radius of the arc path, specified as a number.
+   * @returns {HTMLCanvasElement} chart canvas element.
+   */
+  drawArcPath(center, record, color, outerRadius, innerRadius) {
+    const context2d = this.getContext2d();
+    context2d.beginPath();
+    context2d.moveTo(center.x, center.y);
+    context2d.arc(center.x, center.y, outerRadius, record.startAngle, record.endAngle);
+    context2d.fillStyle = color;
+    context2d.fill();
+    if (innerRadius) {
+      this.drawCircle(center, innerRadius, '#F0F3F7');
+    }
+    return this.context;
+  }
+  /**
+   * The function "clear"
+   */
+  clear() {
+    this.getContext2d().clearRect(0, 0, this.context.width, this.context.height);
+  }
+  /**
+   * This function initializes a 2D canvas context.
+   */
+  initCanvasContext2d() {
+    this.canvasContext2d = this.context.getContext('2d');
+  }
+  /**
+   * This function returns the canvas 2D rendering context and initializes it if it doesn't exist.
+   *
+   * @returns {CanvasRenderingContext2D} The function `getContext2d()` returns the `CanvasRenderingContext2D` object.
+   */
+  getContext2d() {
+    if (!this.canvasContext2d) {
+      this.initCanvasContext2d();
+    }
+    return this.canvasContext2d;
+  }
+}
+
+/** The RendererFactory class provides a static method to create a renderer based on the type of context provided. */
+class RendererFactory {
+  /**
+   * This function returns a renderer based on the type of context provided (SVG or Canvas).
+   *
+   * @param {SVGElement | HTMLCanvasElement} context - The `context` parameter is either an
+   * SVGElement or a HTMLCanvasElement. It is used to determine which renderer to instantiate and
+   * return
+   * @returns {BaseRenderer<SVGElement | HTMLCanvasElement> } based on the type of the `context` parameter. If
+   * the `context` is an instance of `SVGElement`, an `SVGRenderer` object is returned
+   */
+  static get(context) {
+    if (context instanceof SVGElement) {
+      return new SVGRenderer(context);
+    }
+    else if (context instanceof HTMLCanvasElement) {
+      return new CanvasRenderer(context);
+    }
+    else {
+      throw new Error('Invalid context');
+    }
+  }
+}
+
+const DEFAULT_LAYOUT = {
+  width: undefined,
+  height: undefined,
+  margin: {
+    top: 30,
+    right: 30,
+    bottom: 30,
+    left: 30,
+  },
+};
+const DEFAULT_MARGIN_TOP_WITH_LEGENDS = 60;
+const DEFAULT_MARGIN_LEFT_WITH_AXIS = 60;
+/** The ChartDimensionController class contains methods for setting and retrieving the width and height of a chart container element. */
+class ChartDimensionController {
+  /**
+   * This is a constructor function that takes an HTMLElement as a parameter and assigns it to a private property called "container".
+   *
+   * @param {HTMLElement} container - The "container" parameter is a reference to an HTML element that
+   * will be used as a container for the component or module being constructed. This parameter is
+   * typically passed in during the instantiation of the component or module and is used to specify
+   * where the component or module should be rendered in the DOM.
+   */
+  constructor(container) {
+    this.container = container;
+  }
+  /**
+   * This function sets the width and height of a container element based on a given layout object. if the layout is null, then will not update,
+   * prevent the original style is changed
+   *
+   * @param {ChartLayout} layout - ChartLayout object that contains the width and height values for the chart container.
+   */
+  setContainerWidthAndHeight(layout) {
+    const { width, height } = layout;
+    if (width !== undefined) {
+      this.container.style.width = parseNumberToPixelString(width);
+    }
+    if (height !== undefined) {
+      this.container.style.height = parseNumberToPixelString(height);
+    }
+  }
+  /**
+   * This function returns the client width of a container or parses the width from a layout object.
+   *
+   * @param {ChartLayout} layout - In this function, the layout parameter is used to determine the width of the chart container. If the container's
+   * clientWidth property is not available,
+   * @returns {number} returning a number. The number is either the client width of the container element or the parsed width value from the `ChartLayout` object.
+   */
+  getContainerClientWidth(layout) {
+    return (this.container.clientWidth ||
+      parsePixelStringToNumber((layout === null || layout === void 0 ? void 0 : layout.width) || this.container.style.width));
+  }
+  /**
+   * This function returns the height of a container element in pixels, either by accessing its clientHeight property or by parsing a string value from the layout object.
+   *
+   * @param {ChartLayout} layout -  the layout parameter is used to determine the height of the chart container if it is not already set.
+   * @returns {number} The function `getContainerClientHeight` returns a number which represents the height of
+   * the container client or the parsed height value from the `ChartLayout` object.
+   */
+  getContainerClientHeight(layout) {
+    return (this.container.clientHeight ||
+      parsePixelStringToNumber((layout === null || layout === void 0 ? void 0 : layout.height) || this.container.style.height));
+  }
+  /**
+   * This function calculates the inner width of a chart container by subtracting the left and right margins from the client width.
+   *
+   * @param {ChartLayout} layout - ChartLayout object that contains information about the chart layout,
+   * including the container width and margin.
+   * @returns {number} the inner width of a container element, which is calculated by subtracting the left and
+   * right margins from the client width of the container.
+   */
+  getContainerInnerWidth(layout) {
+    const width = this.getContainerClientWidth(layout);
+    const { left, right } = ((layout === null || layout === void 0 ? void 0 : layout.margin) || DEFAULT_LAYOUT.margin);
+    return width ? width - right - left : 0;
+  }
+  /**
+   * This function calculates the inner height of a chart container by subtracting the top and bottom margins from the client height.
+   *
+   * @param {ChartLayout} layout - The `layout` parameter is an object of type `ChartLayout` which
+   * contains information about the layout of a chart, including its dimensions and margins.
+   * @returns {number} the inner height of a container element, which is calculated by subtracting the top and
+   * bottom margins from the client height of the container. The returned value is a number.
+   */
+  getContainerInnerHeight(layout) {
+    const height = this.getContainerClientHeight(layout);
+    const { top, bottom } = ((layout === null || layout === void 0 ? void 0 : layout.margin) || DEFAULT_LAYOUT.margin);
+    return height ? height - top - bottom : 0;
+  }
+  /**
+   * This function merges a given chart layout with default values and returns the updated layout.
+   *
+   * @param {string} chartName - A string representing the name of the chart.
+   * @param {ChartLayout} layout - The `layout` parameter is an optional object that contains properties
+   * for the width, height, and margin of a chart. If provided, it will be merged with the default
+   * layout settings to create a new layout object. If not provided, the default layout settings will be
+   * used.
+   * @param {boolean} hasLegends - A boolean value indicating whether the chart has legends or not.
+   * @returns {ChartLayout} a ChartLayout object.
+   */
+  mergeLayout(chartName, layout, hasLegends) {
+    const defaultTop = hasLegends ? DEFAULT_MARGIN_TOP_WITH_LEGENDS : DEFAULT_LAYOUT.margin.top;
+    const defaultLeft = chartName === 'VEGA-LINE-CHART' || chartName === 'VEGA-BAR-CHART'
+      ? DEFAULT_MARGIN_LEFT_WITH_AXIS
+      : DEFAULT_LAYOUT.margin.left;
+    const newLayout = {
+      width: layout && layout.width ? layout.width : DEFAULT_LAYOUT.width,
+      height: layout && layout.height ? layout.height : DEFAULT_LAYOUT.height,
+      margin: Object.assign({}, DEFAULT_LAYOUT.margin, { top: defaultTop, left: defaultLeft }, layout && layout.margin ? layout.margin : {}),
+    };
+    return newLayout;
+  }
+}
+
+/**
+ * This is a TypeScript code that defines an abstract class `BaseInteractor` with a generic type `T` that extends either `SVGElement` or `HTMLCanvasElement`.
+ */
+class BaseInteractor {
+  /**
+   * This is a constructor function that takes a parameter of type T and sets it as a protected property called "context".
+   *
+   * @param {SVGElement | HTMLCanvasElement} context - The "context" parameter is a protected property of a class constructor that is
+   * of type "T". It is used to store a reference to an object or data that is required by the class
+   * methods to perform their tasks. The "protected" keyword means that the property can only be
+   * accessed within the class
+   */
+  constructor(context) {
+    this.context = context;
+    this.interactingEntryForEventRegistry = new Map();
+    this.interactingEntryForDrawerRegistry = new WeakMap();
+  }
+  /**
+   * This function registers an interacting entry with a drawer, draw piece, and event type in an interactor registry.
+   *
+   * @param {BaseDrawer<unknown>} drawer - The drawer parameter is an instance of a class that extends the BaseDrawer class,
+   * which is used for drawing on a canvas or other graphical surface.
+   * @param {DrawPiece} drawPiece - DrawPiece is a type that represents a specific piece that can be
+   * drawn on a canvas or other graphical surface. It could include information such as the shape,
+   * color, size, and position of the piece.
+   * @param {InteractingEntry} interactingEntry - InteractingEntry is a data structure that represents
+   * an interaction between a user and a graphical element on the screen. It contains information such
+   * as the type of event that triggered the interaction (e.g. mouse click, touch)
+   */
+  register(drawer, drawPiece, interactingEntry) {
+    /* eslint-disable @typescript-eslint/no-non-null-assertion */
+    const eventType = interactingEntry.eventType;
+    if (!this.interactingEntryForEventRegistry.get(eventType)) {
+      this.interactingEntryForEventRegistry.set(eventType, []);
+    }
+    this.interactingEntryForEventRegistry.get(eventType).push(interactingEntry);
+    if (!this.interactingEntryForDrawerRegistry.get(drawer)) {
+      this.interactingEntryForDrawerRegistry.set(drawer, new WeakMap());
+    }
+    if (!this.interactingEntryForDrawerRegistry.get(drawer).get(drawPiece)) {
+      this.interactingEntryForDrawerRegistry.get(drawer).set(drawPiece, []);
+    }
+    this.interactingEntryForDrawerRegistry.get(drawer).get(drawPiece).push(interactingEntry);
+    /* eslint-enable @typescript-eslint/no-non-null-assertion */
+  }
+  /**
+   * This function unregisters a drawer from the interactor registry.
+   *
+   * @param {BaseDrawer<unknown>} drawer - The parameter `drawer` is of type `BaseDrawer<unknown>`. It is an object that
+   * represents a drawer and is used to unregister the drawer from the `interactorRegistry`. The
+   * `interactorRegistry` is a `WeakMap` that stores a mapping between an `Interactor` and
+   */
+  unregisterByDrawer(drawer) {
+    /* eslint-disable @typescript-eslint/no-non-null-assertion */
+    const drawPiece = drawer.drawPiece;
+    if (drawPiece &&
+      this.interactingEntryForDrawerRegistry.has(drawer) &&
+      this.interactingEntryForDrawerRegistry.get(drawer) &&
+      this.interactingEntryForDrawerRegistry.get(drawer).has(drawPiece) &&
+      this.interactingEntryForDrawerRegistry.get(drawer).get(drawPiece)) {
+      this.interactingEntryForEventRegistry.forEach((value, key) => {
+        this.interactingEntryForEventRegistry.set(key, value.filter((interactingEntry) => {
+          return (this.interactingEntryForDrawerRegistry
+            .get(drawer)
+            .get(drawPiece)
+            .indexOf(interactingEntry) < 0);
+        }));
+      });
+      /* eslint-enable @typescript-eslint/no-non-null-assertion */
+    }
+    this.interactingEntryForDrawerRegistry.delete(drawer);
+  }
+  /**
+   * This function handles mouse events for registered interactor and drawers.
+   *
+   * @param {EventType} eventType - The type of event being registered in the registry, such as "click" or "mousemove".
+   * @param {MouseEvent} event - The `event` parameter is of type `MouseEvent`, which represents a
+   * mouse-related event (such as a click, double-click, or mouse movement) that occurred on the web
+   * page. It contains information about the event, such as the type of event, the target element that
+   * triggered the event
+   */
+  callRegistry(eventType, event) {
+    const interactingEntryArray = this.interactingEntryForEventRegistry.get(eventType);
+    if (interactingEntryArray) {
+      interactingEntryArray.forEach((interactingEntry) => {
+        if (interactingEntry.shouldHandle(event)) {
+          interactingEntry.handle(event);
+        }
+      });
+    }
+  }
+}
+
+/**
+ * The CanvasInteractor class extends the BaseInteractor class and provides empty methods for handling mouse move, click, and hover events on a HTML canvas element.
+ */
+class CanvasInteractor extends BaseInteractor {
+}
+
+/**
+ *  The SVGInteractor class extends the BaseInteractor class and provides methods for handling mouse events on SVG elements.
+ */
+class SVGInteractor extends BaseInteractor {
+  /**
+   * This is a constructor function that adds event listeners for click and mouseover events to an SVG element.
+   *
+   * @param {SVGElement} context - The context parameter is an SVGElement, which is the element that the
+   * constructor is being called on. It is used to add event listeners to the element for mouseover and
+   * click events.
+   */
+  constructor(context) {
+    super(context);
+    this.addContextListener();
+  }
+  /**
+   * This function adds event listeners for click and mouseover events to the context element and calls
+   * a registry function with the corresponding event type and event object.
+   */
+  addContextListener() {
+    this.context.addEventListener('click', (event) => {
+      this.callRegistry('click', event);
+    });
+    this.context.addEventListener('mouseover', (event) => {
+      this.callRegistry('mouseover', event);
+    });
+  }
+}
+
+/** The InteractorFactory class provides a static method to create and return an appropriate interactor based on the type of context provided. */
+class InteractorFactory {
+  /**
+   * This function returns a BaseInteractor object based on the type of context passed in (SVGElement or HTMLCanvasElement).
+   *
+   * @param {SVGElement | HTMLCanvasElement} context - The `context` parameter is either an SVGElement
+   * or an HTMLCanvasElement. It is used to determine which type of interactor to create and return. If
+   * the context is an SVGElement, an instance of SVGInteractor is returned. If the context is an
+   * HTMLCanvasElement, an instance of
+   * @returns {BaseInteractor<SVGElement | HTMLCanvasElement>} A `BaseInteractor` object that is either an instance of `SVGInteractor` or
+   * `CanvasInteractor`, depending on the type of the `context` parameter passed to the `get` method.
+   */
+  static get(context) {
+    if (context instanceof SVGElement) {
+      return new SVGInteractor(context);
+    }
+    else if (context instanceof HTMLCanvasElement) {
+      return new CanvasInteractor(context);
+    }
+    else {
+      throw new Error('Invalid context');
+    }
+  }
+}
+
+/** This is a TypeScript class called `BaseChart` that serves as a base class for creating charts */
+class BaseChart {
+  /**
+   * This is a constructor function that initializes a chart with options and creates a chain of drawers for rendering.
+   *
+   * @param {ChartOptions<unknown>} options - generic type that represents the configuration options for the chart
+   */
+  constructor(options) {
+    this.options = options;
+    this.isLayoutSet = false;
+    this.drawers = [];
+    const context = GraphContextFactory.get(options.mode, options.container.shadowRoot ? options.container.shadowRoot : options.container);
+    this.dimensionController = new ChartDimensionController(options.container);
+    this.renderer = RendererFactory.get(context);
+    this.interactor = InteractorFactory.get(context);
+    this.initLayoutOptions(options);
+  }
+  /**
+   * The function clears the renderer.
+   */
+  clear() {
+    this.renderer.clear();
+  }
+  /**
+   * This function updates the chart options, creates a new drawer chain, resets the layout, and renders the chart.
+   *
+   * @param {ChartOptions<unknown>} options - ChartOptions<T> is a generic type that represents the configuration options for a
+   * chart. It can include properties such as the chart type, data, labels, colors, and other stylingoptions
+   */
+  updateOptions(options) {
+    this.initLayoutOptions(options);
+    this.isLayoutSet = false;
+    this.render();
+  }
+  /**
+   * re render the chart using existing options
+   */
+  reRender() {
+    this.updateOptions(this.options);
+  }
+  /**
+   * sets the layout if it hasn't been set yet, and executes all the drawers. unregister the interactor by drawer
+   */
+  render() {
+    this.unregisterByDrawer();
+    this.drawers = this.createDrawerChain(this.renderer, this.interactor);
+    this.clear();
+    if (!this.isLayoutSet) {
+      this.setLayout();
+      this.isLayoutSet = true;
+    }
+    this.drawers.forEach((drawer) => drawer.execute());
+  }
+  /**
+   * sets the layout of a renderer using the options provided.
+   */
+  setLayout() {
+    const layout = this.options.layout;
+    const width = this.dimensionController.getContainerClientWidth(layout), height = this.dimensionController.getContainerClientHeight(layout), margin = (layout === null || layout === void 0 ? void 0 : layout.margin) || DEFAULT_LAYOUT.margin;
+    this.renderer.setLayout(width, height, margin.top, margin.left);
+  }
+  /**
+   * This function initializes layout options for a chart.
+   *
+   * @param {ChartOptions} options - ChartOptions<T> is a generic type that represents the configuration options for a
+   * chart. It includes properties such as data, layout, and style.
+   */
+  initLayoutOptions(options) {
+    const newLayout = this.dimensionController.mergeLayout(options.container.tagName, options.layout, options.legends && options.legends.length ? true : false);
+    this.options = Object.assign(options, { layout: newLayout });
+    this.dimensionController.setContainerWidthAndHeight(newLayout);
+    this.options.container.style.display = 'block';
+  }
+  /**
+   * This function un-registers drawers from the interactor.
+   */
+  unregisterByDrawer() {
+    if (this.drawers) {
+      this.drawers.forEach((drawer) => {
+        this.interactor.unregisterByDrawer(drawer);
+      });
+    }
+  }
+}
+
+/* This file is generated by vega-design 2.0.77 */
+/* eslint-disable */
+/* tslint:disable */
+// prettier-ignore
+const BackgroundColorsMappingLight = {
+  "bg-brand": "#33393D",
+  "bg-page": "#F0F3F7",
+  "bg-primary": "#FCFCFC",
+  "bg-secondary": "#F5F7F7",
+  "bg-tertiary": "#F0F3F7",
+  "bg-quaternary": "#F1F8FB",
+  "bg-inverted-primary": "#04041C",
+  "bg-inverted-secondary": "#121227",
+  "bg-inverted-tertiary": "#181830",
+  "bg-inverted-quaternary": "#464765",
+  "bg-action": "#1362E2",
+  "bg-action-hover": "#0470EC",
+  "bg-action-focus": "#1362E2",
+  "bg-action-active": "#1D41C3",
+  "bg-action-quaternary": "#DEE1E3",
+  "bg-action-quaternary-hover": "#EFEFEF",
+  "bg-action-quaternary-active": "#CDD1D3",
+  "bg-action-secondary": "#FCFCFC",
+  "bg-action-secondary-hover": "#0470EC",
+  "bg-action-secondary-active": "#1D41C3",
+  "bg-action-tertiary": "#000000",
+  "bg-action-tertiary-hover": "#04041C",
+  "bg-action-tertiary-active": "#04041C",
+  "bg-app-header": "#F0F3F7",
+  "bg-backdrop-modal": "#121227",
+  "bg-backdrop-popover": "#203645",
+  "bg-backdrop-sidebar": "#121227",
+  "bg-chip": "#203645",
+  "bg-chip-hover": "#203645",
+  "bg-chip-active": "#203645",
+  "bg-danger": "#BD2947",
+  "bg-danger-hover": "#E94768",
+  "bg-danger-focus": "#BD2947",
+  "bg-danger-active": "#E63257",
+  "bg-danger-tertiary": "#000000",
+  "bg-danger-tertiary-hover": "#FF5772",
+  "bg-danger-tertiary-active": "#BD2947",
+  "bg-disabled": "#B0B4B5",
+  "bg-divider": "#ABC6D8",
+  "bg-divider-secondary": "#C7D9E5",
+  "bg-keypad-btn-active": "#E5EFFF",
+  "bg-loading-progress": "#99C0FF",
+  "bg-loading-track": "#E5EFFF",
+  "bg-segment-hover": "#CDD1D3",
+  "bg-segment-control": "#596063",
+  "bg-selected": "#0097FF",
+  "bg-sidebar": "#121227",
+  "bg-sidebar-icon": "#BCBAD5",
+  "bg-sidebar-icon-hover": "#121227",
+  "bg-sidebar-icon-selected": "#FCFCFC",
+  "bg-sidebar-item-hover": "#FCFCFC",
+  "bg-sidebar-item-selected": "#1362E2",
+  "bg-site-footer": "#33393D",
+  "bg-site-footer-action": "#ABC6D8",
+  "bg-site-footer-action-hover": "#C7D9E5",
+  "bg-site-footer-action-active": "#8FB3CB",
+  "bg-site-footer-field": "#596063",
+  "bg-slider-handle": "#FCFCFC",
+  "bg-status-error": "#FF6E8B",
+  "bg-status-info": "#CDD1D3",
+  "bg-status-success": "#A0E9A7",
+  "bg-status-warning": "#FFDC83",
+  "bg-tab": "#F0F3F7",
+  "bg-tab-hover": "#F5F7F7",
+  "bg-tab-selected": "#203645",
+  "bg-table-alt-row": "#F5F7F7",
+  "bg-table-header": "#F0F3F7",
+  "bg-table-row-hover": "#F1F8FB",
+  "bg-table-row-selected-expanded": "#E5EFFF",
+  "bg-table-selected-row": "#CCDFFF",
+  "bg-textarea-count": "#04041C",
+  "bg-tile": "#FCFCFC",
+  "bg-tile-hover": "#F5F7F7",
+  "bg-tile-selected": "#F2F7FF",
+  "bg-tile-selected-hover": "#E5EFFF",
+  "bg-toggle-switch": "#6B747D",
+  "bg-toggle-switch-hover": "#6B747D",
+  "bg-toggle-switch-selected-disabled": "#99C0FF",
+  "bg-transparent": "#000000",
+  "bg-accent1-primary": "#73E6DC",
+  "bg-accent1-secondary": "#C1F4EF",
+  "bg-accent1-tertiary": "#E0F9F7",
+  "bg-accent2-primary": "#806BFF",
+  "bg-accent2-secondary": "#C7BDFF",
+  "bg-accent2-tertiary": "#E3DEFF",
+  "bg-accent3-primary": "#FFDC83",
+  "bg-accent3-secondary": "#FFEFC8",
+  "bg-accent3-tertiary": "#FFF7E3",
+  "bg-accent4-primary": "#FF9571",
+  "bg-accent4-secondary": "#FFD0C0",
+  "bg-accent4-tertiary": "#FFE7DF",
+  "bg-accent5-primary": "#00BBFF",
+  "bg-accent5-secondary": "#8EDFF9",
+  "bg-accent5-tertiary": "#E3F7FD",
+  "bg-accent6-primary": "#FF82C9",
+  "bg-accent6-secondary": "#FFC7E7",
+  "bg-accent6-tertiary": "#FFE3F3",
+  "bg-accent7-primary": "#259F9F",
+  "bg-accent7-secondary": "#9BD4D6",
+  "bg-accent7-tertiary": "#D0EFEF",
+  "bg-accent8-primary": "#563D82",
+  "bg-accent8-secondary": "#C7A2CC",
+  "bg-accent8-tertiary": "#E6D6EA",
+  "bg-accent9-primary": "#FFBF3F",
+  "bg-accent9-secondary": "#FED78E",
+  "bg-accent9-tertiary": "#FBE2B9",
+  "bg-accent10-primary": "#ED7A23",
+  "bg-accent10-secondary": "#F19255",
+  "bg-accent10-tertiary": "#F5BB94",
+  "bg-date-picker-range": "#E5EFFF"
+};
+
+const CHART_DEFAULT_COLORS = [
+  'bg-accent1-primary',
+  'bg-accent2-primary',
+  'bg-accent3-primary',
+  'bg-accent4-primary',
+  'bg-accent5-primary',
+  'bg-accent6-primary',
+  'bg-accent7-primary',
+  'bg-accent8-primary',
+  'bg-accent9-primary',
+  'bg-accent10-primary',
+];
+const DEFAULT_FONT_FAMILY = 'font-family:"Inter", sans-serif;';
+const FONTSTYLEMAPPING = Object.keys(Typography).reduce((result, key) => {
+  result[key] =
+    DEFAULT_FONT_FAMILY +
+      Typography[key].filter((str) => str.indexOf('@apply') < 0).join(';');
+  return result;
+}, { 'v-text-secondary': `color:rgba(107, 116, 125, 1);` });
+/**
+ * base drawer that provides a common structure for drawing charts using a renderer and options.
+ */
+class BaseDrawer {
+  /**
+   * This is a constructor function that takes in a renderer and options for a chart drawer.
+   *
+   * @param {BaseRenderer<SVGElement | HTMLCanvasElement>} renderer - `renderer` parameter is an instance of a `BaseRenderer` class that can render either SVG elements or a 2D canvas context
+   * @param {BaseInteractor<SVGElement | HTMLCanvasElement>} interactor - `renderer` parameter is an instance of a `BaseInteractor` class
+   * @param {ChartDrawerOptions<unknown>} options - where `T` is a generic type parameter. This parameter contains various options that can be used to customize the chart being drawn
+   */
+  constructor(renderer, interactor, options) {
+    this.renderer = renderer;
+    this.interactor = interactor;
+    this.options = options;
+  }
+  /**
+   * The function executes a draw method.
+   */
+  execute() {
+    const drawPiece = this.draw();
+    this.drawPiece = drawPiece;
+    this.addInteractionSupport(drawPiece);
+  }
+  /**
+   * returns a color token based on an index and an optional array of colors.
+   *
+   * @param {number} index - The index parameter is a number that represents the index of the color to be returned from the colors array.
+   * @param {BackgroundColorsTokenType[]} [colors] - `colors` is an optional parameter of type `BackgroundColorsTokenType[]`
+   * @returns {BackgroundColorsTokenType} color token
+   */
+  getColorByIndex(index, colors) {
+    colors = colors && colors.length ? colors : CHART_DEFAULT_COLORS;
+    index = index % colors.length;
+    return colors[index];
+  }
+  /**
+   * This function takes a token representing a background color and returns the corresponding color value from a predefined mapping.
+   *
+   * @param {BackgroundColorsTokenType} token - a string representing the token for a background color
+   * @returns {string} The string value returned is the color code
+   */
+  getColorFromToken(token) {
+    return BackgroundColorsMappingLight[token];
+  }
+  /**
+   * The function takes a token as input and returns the corresponding CSS style text from a predefined mapping.
+   *
+   * @param {string} token - The `token` parameter is a string that represents a specific style mapping
+   * in the `FONTSTYLEMAPPING` object. The function returns the CSS style text associated with the given `token`.
+   * @returns {string} a string that represents the CSS style associated with the input token. If the input token
+   * matches a key in the `FONTSTYLEMAPPING` object, the corresponding CSS style string is returned.
+   */
+  getStyleTextFromToken(token) {
+    return token
+      .split(' ')
+      .map((item) => FONTSTYLEMAPPING[item])
+      .join(';');
+  }
+}
+
+/** The code is defining an abstract class called `InteractingEntryGenerator` with a generic type `T`. This class is responsible for generating an `InteractingEntry` object based on the provided options. */
+class InteractingEntryGenerator {
+  /**
+   * The function generates an InteractingEntry object based on the provided options.
+   *
+   * @param {unknown} options - The `options` parameter is a generic type `T` that represents the options or configuration for the `generate` function. It can be any type that you define when calling the `generate` function.
+   * @returns {InteractingEntry} An object of type InteractingEntry is being returned.
+   */
+  generate(options) {
+    return {
+      eventType: this.eventType,
+      shouldHandle: this.createShouldHandle(options),
+      handle: this.createHandle(options),
+    };
+  }
+}
+
+/** The PieLegendHoverGenerator class generates an InteractingEntry object that handles mouseover events on a legend of a D3 pie chart and triggers a mouseover event on the corresponding path element. */
+class PieLegendHoverGenerator extends InteractingEntryGenerator {
+  constructor() {
+    super(...arguments);
+    this.eventType = 'mouseover';
+  }
+  /**
+   * The function "createShouldHandle" returns a function that takes an event as a parameter and returns a boolean value.
+   *
+   * @returns {InteractingEntry['shouldHandle']} A function that takes an event as an argument and returns a boolean value.
+   */
+  createShouldHandle() {
+    return this.shouldHandle;
+  }
+  /**
+   * The function "createHandle" returns the handle property of an InteractingEntry object.
+   *
+   * @param {LegendInputType} options the legend render options
+   * @returns {InteractingEntry['handle']} The `handle` property of the `InteractingEntry` object is being returned.
+   */
+  createHandle(options) {
+    // eslint-disable-next-line jsdoc/require-jsdoc
+    return (event) => {
+      this.handle(event, options);
+    };
+  }
+  /**
+   * This function checks if a mouse event should be handled based on whether the target or its parent element has a specific class.
+   *
+   * @param {MouseEvent} event - MouseEvent is a type of event that is triggered by a mouse action, such
+   * as clicking, hovering, or scrolling. It contains information about the event, such as the target
+   * element and the position of the mouse.
+   * @returns {boolean} A boolean value is being returned. The method `shouldHandle` checks if the target element
+   * or its parent element has a class of `vega-chart-legend-item` and returns `true` if it does, and
+   * `false` otherwise.
+   */
+  shouldHandle(event) {
+    var _a;
+    const target = event.target;
+    const currentTarget = event.currentTarget;
+    const container = currentTarget.parentElement && currentTarget.parentElement.nodeType !== 11
+      ? currentTarget.parentElement
+      : currentTarget.parentNode['host'];
+    return (container.tagName === 'VEGA-PIE-CHART' &&
+      (target.classList.contains('vega-chart-legend-item') ||
+        !!((_a = target.parentElement) === null || _a === void 0 ? void 0 : _a.classList.contains('vega-chart-legend-item'))));
+  }
+  /**
+   * The function handles a mouse event on a legend and triggers a mouseover event on the corresponding path element in a D3 chart.
+   *
+   * @param {MouseEvent} event - The event parameter is a MouseEvent, which represents a user action
+   * (such as a click or hover) on a specific element in the DOM.
+   * @param {LegendInputType} options - LegendInputType is a custom type that likely contains
+   * information about the data being displayed in the chart, such as the names of the categories or
+   * series being plotted. It may also include information about the chart's appearance or behavior,
+   * such as the colors or labels used in the legend. Without more information about
+   */
+  handle(event, options) {
+    var _a;
+    const svgSelection = d3Select(event.currentTarget);
+    const target = event.target;
+    const targetTextNode = target.tagName === 'text'
+      ? target
+      : target.tagName === 'circle'
+        ? target.nextElementSibling
+        : target.querySelector('text');
+    const name = targetTextNode ? targetTextNode.textContent : '';
+    const index = name ? options.data.indexOf(name) : 0;
+    const paths = svgSelection
+      .selectAll(`path.vega-chart-arc-path`)
+      .nodes();
+    (_a = paths[index]) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
+  }
+}
+
+/** The LegendDrawer class draws circles and text for each legend in a chart. */
+class LegendDrawer extends BaseDrawer {
+  constructor() {
+    super(...arguments);
+    this.pieLegendHoverGenerator = new PieLegendHoverGenerator();
+  }
+  /**
+   * This function adds interaction support to a chart by registering it with an interactor and providing a hover generator.
+   *
+   * @param {(SVGGElement | HTMLCanvasElement)[]} drawPiece - `drawPiece` is a parameter of type array
+   * that contains either `SVGGElement` or `HTMLCanvasElement` elements. It is used as a callback
+   * function to draw the legend items on the chart.
+   */
+  addInteractionSupport(drawPiece) {
+    var _a;
+    if ((_a = this.options.renderOptions.data) === null || _a === void 0 ? void 0 : _a.length) {
+      this.interactor.register(this, drawPiece, this.pieLegendHoverGenerator.generate(this.options.renderOptions));
+    }
+  }
+  /**
+   * This function draws a legend on a chart using input options.
+   *
+   * @returns {(SVGGElement | HTMLCanvasElement)[]}  draw piece
+   */
+  draw() {
+    const { data = [], colors, position, width } = this.options.renderOptions;
+    const options = this.getChartLegendOptions(data, colors, position);
+    if (options) {
+      const longestLegendLength = getLongestTextLengthFromArray(data);
+      return options.legends.map((legend, index) => {
+        const position = this.getLegendPosition(options.position, index, longestLegendLength, width);
+        return this.renderer.drawLegend(position, legend.field, legend.color, this.getStyleTextFromToken('v-font-footnote2-short'));
+      });
+    }
+  }
+  /**
+   * This function takes in an array of strings and an optional position parameter, and returns an object containing legend options for a chart.
+   *
+   * @param {string[]} data - an array of strings representing the legend labels
+   * @param {BackgroundColorsTokenType[]} [colors] - bg color token array
+   * @param {ChartPosition} [position] - The `position` parameter is an optional parameter of type
+   * `ChartPosition` which specifies the x and y coordinates of the chart legend on the chart. If it is
+   * not provided, the default position is `{x: 10, y: 0}`.
+   * @returns {ChartLegendOptions | undefined} an object of type `ChartLegendOptions`.
+   */
+  getChartLegendOptions(data, colors, position) {
+    if (data && data.length) {
+      position = position ? Object.assign({ x: 10, y: 0 }, position) : { x: 10, y: 0 };
+      const legendsMap = {
+        position,
+        legends: data.map((text, index) => {
+          return {
+            field: text,
+            color: this.getColorFromToken(this.getColorByIndex(index, colors)),
+            icon: '',
+          };
+        }),
+      };
+      return legendsMap;
+    }
+  }
+  /**
+   * This function calculates the position of a legend on a chart based on its index and the chart layout.
+   *
+   * @param {ChartPosition} position - The initial position of the legend on the chart, with x and y coordinates.
+   * @param {number} index - The index parameter is a number that represents the index of the legend item in the array of legends. It is used to calculate the position of the legend item on the chart.
+   * @param {number} longestTextLength - text length
+   * @param {number} width - chart width
+   * @returns {ChartPosition} an object of type `ChartPosition` with `x` and `y` properties.
+   */
+  getLegendPosition(position, index, longestTextLength, width) {
+    const maxWidth = width;
+    if (maxWidth) {
+      const restWidth = maxWidth - position.x;
+      const singleWidth = longestTextLength * 7 + 24;
+      const singleHeight = 18;
+      const column = Math.max(Number((restWidth / singleWidth).toFixed(0)), 1);
+      const row = parseInt((index / column).toString());
+      const x = position.x + singleWidth * (index % column);
+      const y = position.y + row * singleHeight;
+      return { x, y };
+    }
+    return { x: 0, y: 0 };
+  }
+}
+
+/** The LayoutInputProcessor class processes input chart options to calculate layout dimensions and margins. */
+class LayoutInputProcessor {
+  /**
+   * This function processes chart options and returns layout dimensions and margins.
+   *
+   * @param {ChartOptions<unknown>} input - A ChartOptions object containing the container and layout properties.
+   * @returns {LayoutProcessResultType} An object with properties `width`, `height`, `innerWidth`, `innerHeight`, `top`, `right`,
+   * `bottom`, and `left`.
+   */
+  process(input) {
+    const { container, layout } = input;
+    const { top, right, bottom, left } = ((layout === null || layout === void 0 ? void 0 : layout.margin) ||
+      DEFAULT_LAYOUT.margin);
+    const dimensionController = new ChartDimensionController(container);
+    return {
+      width: dimensionController.getContainerClientWidth(layout),
+      height: dimensionController.getContainerClientHeight(layout),
+      innerWidth: dimensionController.getContainerInnerWidth(layout),
+      innerHeight: dimensionController.getContainerInnerHeight(layout),
+      top,
+      right,
+      bottom,
+      left,
+    };
+  }
+}
+
+/** The `ProcessorChain` class takes an array of input processors, processes input through them, and returns the final output. */
+class ProcessorChain {
+  /**
+   * This is a constructor function that takes an array of input processors as a parameter.
+   *
+   * @param {InputProcessor<unknown, unknown, unknown>[]} processors - The `processors` parameter is a
+   * private property of the class that is of type `InputProcessor` which is an interface that takes
+   * three type parameters - `Input`, `Output`, and `Context`. It is an array of instances of classes
+   * that implement the `InputProcessor` interface. These processors are
+   */
+  constructor(processors) {
+    this.processors = processors;
+  }
+  /**
+   * This function processes input through a series of processors and returns the final output.
+   *
+   * @param {unknown} input - The input parameter is of type unknown, which means it can be any type of
+   * value. It is the data that will be processed by the processors.
+   * @returns {unknown} the output of the last processor in the `this.processors` array.
+   */
+  process(input) {
+    let previousOutput;
+    for (const processor of this.processors) {
+      previousOutput = processor.process(input, previousOutput);
+    }
+    return previousOutput;
+  }
+}
+
+/** The `LegendInputProcessor` class processes chart options and previous layout results to generate a legend input object for a line chart. */
+class LegendInputProcessor {
+  /**
+   * This function takes in chart options and previous layout results, and returns a legend input object with data, colors, position, width, and height properties.
+   *
+   *  @param {ChartOptions<LineChartDataType>} input - The input parameter is an object of type ChartOptions that contains the data and
+   * configuration options for a line chart.
+   * @param {LayoutProcessResultType} previousOutput - `previousOutput` is an optional parameter of
+   * type `LayoutProcessResultType` that represents the output of the previous layout process. It is
+   * used to retrieve the width and height of the chart, which are needed to properly position the
+   * legend. If no previous output is provided, the width and height will
+   * @returns {LegendInputType} an object of type `LegendInputType`. The object contains the following properties:
+   * - `data`: an array of legend items
+   * - `colors`: an array of colors used in the chart
+   * - `position`: an object with `x` and `y` properties representing the position of the legend
+   * - `width`: the width of the chart
+   * - `height`: the
+   */
+  process(input, previousOutput) {
+    const { colors, legends = [] } = input;
+    const { width, height } = previousOutput;
+    return {
+      data: legends,
+      colors,
+      position: { x: 10, y: 10 },
+      width,
+      height,
+    };
+  }
+}
+
+export { BaseDrawer as B, InteractingEntryGenerator as I, LayoutInputProcessor as L, ProcessorChain as P, BaseChart as a, LegendInputProcessor as b, LegendDrawer as c, constant$1 as d, color as e, interpolateRgb as f, interpolateString as g, array as h, interpolateNumber as i, constant as j, d3Select as k, tau as t };