@ni/nimble-components 17.0.1 → 17.0.3

package/dist/all-components-bundle.js

@@ -3594,7 +3594,7 @@
      * @param propertyOrOptions - The options used to configure child node observation.
      * @public
      */
-    function children(propertyOrOptions) {
+    function children$1(propertyOrOptions) {
         if (typeof propertyOrOptions === "string") {
             propertyOrOptions = {
                 property: propertyOrOptions,
@@ -9791,7 +9791,7 @@
     __decorate([
         observable
     ], DesignTokenNode.prototype, "children", void 0);
-    function create(nameOrConfig) {
+    function create$1(nameOrConfig) {
         return DesignTokenImpl.from(nameOrConfig);
     }
     /* eslint-enable @typescript-eslint/no-unused-vars */
@@ -9800,7 +9800,7 @@
      * @public
      */
     const DesignToken = Object.freeze({
-        create,
+        create: create$1,
         /**
          * Informs DesignToken that an HTMLElement for which tokens have
          * been set has been connected to the document.
@@ -13969,7 +13969,7 @@
         @click="${(x, c) => x.clickHandler(c.event)}"
         @focusin="${(x, c) => x.focusinHandler(c.event)}"
         @keydown="${(x, c) => x.keydownHandler(c.event)}"
-        ${children({
+        ${children$1({
     property: "childItems",
     attributeFilter: ["disabled", "hidden"],
     filter: elements(),
@@ -14834,7 +14834,7 @@
         aria-disabled="${x => x.disabled}"
         @focusin="${(x, c) => x.handleFocus(c.event)}"
         @focusout="${(x, c) => x.handleBlur(c.event)}"
-        ${children({
+        ${children$1({
     property: "childItems",
     filter: elements(),
 })}
@@ -15713,9 +15713,9 @@
     const prefix = 'ni-nimble';
     const styleNameFromTokenName = (tokenName) => `${prefix}-${tokenName}`;
 
-    const template$g = html `<slot></slot>`;
+    const template$h = html `<slot></slot>`;
 
-    const styles$F = css `
+    const styles$G = css `
     :host {
         display: contents;
     }
@@ -15771,8 +15771,8 @@
     ], ThemeProvider.prototype, "theme", void 0);
     const nimbleDesignSystemProvider = ThemeProvider.compose({
         baseName: 'theme-provider',
-        styles: styles$F,
-        template: template$g
+        styles: styles$G,
+        template: template$h
     });
     DesignSystem.getOrCreate()
         .withPrefix('nimble')
@@ -15931,7 +15931,7 @@
         }
     }
 
-    const styles$E = css `
+    const styles$F = css `
     ${display('inline')}
 
     :host {
@@ -16014,7 +16014,7 @@
 `;
 
     // prettier-ignore
-    const template$f = (context, definition) => html `
+    const template$g = (context, definition) => html `
     <a
         class="control"
         part="control"
@@ -16087,8 +16087,8 @@
     const nimbleAnchor = Anchor.compose({
         baseName: 'anchor',
         baseClass: Anchor$1,
-        template: template$f,
-        styles: styles$E,
+        template: template$g,
+        styles: styles$F,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -16173,7 +16173,7 @@
         return new MultivaluePropertyStyleSheetBehavior('appearance', value, styles);
     }
 
-    const styles$D = css `
+    const styles$E = css `
     ${display('inline-flex')}
 
     :host {
@@ -16454,8 +16454,8 @@
             }
         `));
 
-    const styles$C = css `
-    ${styles$D}
+    const styles$D = css `
+    ${styles$E}
     ${buttonAppearanceVariantStyles}
 
     .control {
@@ -16463,7 +16463,7 @@
     }
 `;
 
-    const template$e = (context, definition) => html `
+    const template$f = (context, definition) => html `
     <a
         class="control"
         part="control"
@@ -16545,15 +16545,15 @@
     ], AnchorButton.prototype, "disabled", void 0);
     const nimbleAnchorButton = AnchorButton.compose({
         baseName: 'anchor-button',
-        template: template$e,
-        styles: styles$C,
+        template: template$f,
+        styles: styles$D,
         shadowOptions: {
             delegatesFocus: true
         }
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorButton());
 
-    const styles$B = css `
+    const styles$C = css `
     :host {
         contain: layout;
         display: block;
@@ -16577,13 +16577,13 @@
         baseName: 'anchored-region',
         baseClass: AnchoredRegion$1,
         template: anchoredRegionTemplate,
-        styles: styles$B
+        styles: styles$C
     });
     DesignSystem.getOrCreate()
         .withPrefix('nimble')
         .register(nimbleAnchoredRegion());
 
-    const styles$A = css `
+    const styles$B = css `
     ${display('inline-block')}
 
     :host {
@@ -16624,7 +16624,7 @@
         baseName: 'breadcrumb',
         baseClass: Breadcrumb$1,
         template: breadcrumbTemplate,
-        styles: styles$A
+        styles: styles$B
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBreadcrumb());
 
@@ -17230,7 +17230,7 @@
         data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="cls-1" d="M8.033 14.026L4.9 10.866 6.277 9.53l1.744 1.81 4.562-4.507 1.307 1.363zm1.155-10.68l-1.321-1.32-2.312 2.311-2.311-2.311-1.321 1.32 2.311 2.312L1.923 7.97l1.32 1.32 2.312-2.31 2.312 2.31 1.32-1.32-2.31-2.312z"/></svg>`
     };
 
-    const styles$z = css `
+    const styles$A = css `
     ${display('inline-flex')}
 
     :host {
@@ -17309,15 +17309,15 @@
         baseName: 'breadcrumb-item',
         baseClass: BreadcrumbItem$1,
         template: breadcrumbItemTemplate,
-        styles: styles$z,
+        styles: styles$A,
         separator: forwardSlash16X16.data
     });
     DesignSystem.getOrCreate()
         .withPrefix('nimble')
         .register(nimbleBreadcrumbItem());
 
-    const styles$y = css `
-    ${styles$D}
+    const styles$z = css `
+    ${styles$E}
     ${buttonAppearanceVariantStyles}
 `;
 
@@ -17363,7 +17363,7 @@
         baseName: 'button',
         baseClass: Button$1,
         template: buttonTemplate,
-        styles: styles$y,
+        styles: styles$z,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -17443,7 +17443,7 @@
      */
     const themeBehavior = (theme, styles) => new ThemeStyleSheetBehavior(theme, styles);
 
-    const styles$x = css `
+    const styles$y = css `
     ${display('inline-flex')}
 
     :host {
@@ -17602,14 +17602,14 @@
     const nimbleCardButton = CardButton.compose({
         baseName: 'card-button',
         template: buttonTemplate,
-        styles: styles$x,
+        styles: styles$y,
         shadowOptions: {
             delegatesFocus: true
         }
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCardButton());
 
-    const styles$w = css `
+    const styles$x = css `
     ${display('inline-flex')}
 
     :host {
@@ -17727,14 +17727,14 @@
         baseName: 'checkbox',
         baseClass: Checkbox$1,
         template: checkboxTemplate,
-        styles: styles$w,
+        styles: styles$x,
         checkedIndicator: check16X16.data,
         indeterminateIndicator: minus16X16.data
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCheckbox());
 
-    const styles$v = css `
-    ${styles$D}
+    const styles$w = css `
+    ${styles$E}
 
     .control[aria-pressed='true'] {
         background-color: ${fillSelectedColor};
@@ -17760,7 +17760,7 @@
     }
 `;
 
-    const template$d = (context, definition) => html `
+    const template$e = (context, definition) => html `
     <div
         role="button"
         part="control"
@@ -17835,8 +17835,8 @@
     applyMixins(ToggleButton, StartEnd, DelegatesARIAButton);
     const nimbleToggleButton = ToggleButton.compose({
         baseName: 'toggle-button',
-        template: template$d,
-        styles: styles$v,
+        template: template$e,
+        styles: styles$w,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -17849,13 +17849,13 @@
     </div>
 `;
 
-    const template$c = html `
+    const template$d = html `
     <template>
         <div class="icon" :innerHTML=${x => x.icon.data}></div>
     </template
 `;
 
-    const styles$u = css `
+    const styles$v = css `
     ${display('inline-flex')}
 
     :host {
@@ -17908,8 +17908,8 @@
     const registerIcon = (baseName, iconClass) => {
         const composedIcon = iconClass.compose({
             baseName,
-            template: template$c,
-            styles: styles$u,
+            template: template$d,
+            styles: styles$v,
             baseClass: iconClass
         });
         DesignSystem.getOrCreate().withPrefix('nimble').register(composedIcon());
@@ -17943,7 +17943,7 @@
         block: 'block'
     };
 
-    const styles$t = css `
+    const styles$u = css `
     ${display('inline-flex')}
 
     :host {
@@ -18171,7 +18171,7 @@
             }
         `));
 
-    const styles$s = css `
+    const styles$t = css `
     .error-icon {
         display: none;
     }
@@ -18209,9 +18209,9 @@
     }
 `;
 
-    const styles$r = css `
+    const styles$s = css `
+    ${styles$u}
     ${styles$t}
-    ${styles$s}
 
     :host {
         --ni-private-hover-bottom-border-width: 2px;
@@ -18447,7 +18447,7 @@
         baseName: 'combobox',
         baseClass: Combobox$1,
         template: comboboxTemplate,
-        styles: styles$r,
+        styles: styles$s,
         shadowOptions: {
             delegatesFocus: true
         },
@@ -18491,7 +18491,7 @@
      */
     const UserDismissed = Symbol('user dismissed');
 
-    const styles$q = css `
+    const styles$r = css `
     ${display('grid')}
 
     dialog {
@@ -18607,7 +18607,7 @@
             }
         `));
 
-    const template$b = html `
+    const template$c = html `
     <template>
         <dialog
             ${ref('dialogElement')}
@@ -18733,13 +18733,13 @@
     applyMixins(Dialog, ARIAGlobalStatesAndProperties);
     const nimbleDialog = Dialog.compose({
         baseName: 'dialog',
-        template: template$b,
-        styles: styles$q,
+        template: template$c,
+        styles: styles$r,
         baseClass: Dialog
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDialog());
 
-    const styles$p = css `
+    const styles$q = css `
     ${display('block')}
 
     :host {
@@ -18892,7 +18892,7 @@
             }
         `));
 
-    const template$a = html `
+    const template$b = html `
     <dialog
         ${ref('dialog')}
         aria-label="${x => x.ariaLabel}"
@@ -19006,8 +19006,8 @@
     applyMixins(Drawer, ARIAGlobalStatesAndProperties);
     const nimbleDrawer = Drawer.compose({
         baseName: 'drawer',
-        template: template$a,
-        styles: styles$p
+        template: template$b,
+        styles: styles$q
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDrawer());
 
@@ -20639,7 +20639,7 @@
     }
     registerIcon('icon-xmark-check', IconXmarkCheck);
 
-    const styles$o = css `
+    const styles$p = css `
     ${display('flex')}
 
     :host {
@@ -20719,11 +20719,11 @@
         baseName: 'list-option',
         baseClass: ListboxOption,
         template: listboxOptionTemplate,
-        styles: styles$o
+        styles: styles$p
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleListOption());
 
-    const styles$n = css `
+    const styles$o = css `
     ${display('grid')}
 
     :host {
@@ -20778,11 +20778,11 @@
         baseName: 'menu',
         baseClass: Menu$1,
         template: menuTemplate,
-        styles: styles$n
+        styles: styles$o
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenu());
 
-    const styles$m = css `
+    const styles$n = css `
     ${display('inline-block')}
 
     :host {
@@ -20801,7 +20801,7 @@
 `;
 
     // prettier-ignore
-    const template$9 = html `
+    const template$a = html `
     <template
         ?open="${x => x.open}"
         @focusout="${(x, c) => x.focusoutHandler(c.event)}"
@@ -21009,15 +21009,15 @@
     ], MenuButton.prototype, "slottedMenus", void 0);
     const nimbleMenuButton = MenuButton.compose({
         baseName: 'menu-button',
-        template: template$9,
-        styles: styles$m,
+        template: template$a,
+        styles: styles$n,
         shadowOptions: {
             delegatesFocus: true
         }
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuButton());
 
-    const styles$l = css `
+    const styles$m = css `
     ${display('grid')}
 
     :host {
@@ -21115,7 +21115,7 @@
         baseName: 'menu-item',
         baseClass: MenuItem$1,
         template: menuItemTemplate,
-        styles: styles$l,
+        styles: styles$m,
         expandCollapseGlyph: arrowExpanderRight16X16.data
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuItem());
@@ -21129,9 +21129,9 @@
         block: 'block'
     };
 
-    const styles$k = css `
+    const styles$l = css `
     ${display('inline-block')}
-    ${styles$s}
+    ${styles$t}
 
     :host {
         font: ${bodyFont};
@@ -21345,7 +21345,7 @@
         baseName: 'number-field',
         baseClass: NumberField$1,
         template: numberFieldTemplate,
-        styles: styles$k,
+        styles: styles$l,
         shadowOptions: {
             delegatesFocus: true
         },
@@ -21386,7 +21386,7 @@
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleNumberField());
 
-    const styles$j = css `
+    const styles$k = css `
     ${display('inline-flex')}
 
     :host {
@@ -21486,12 +21486,12 @@
         baseName: 'radio',
         baseClass: Radio$1,
         template: radioTemplate,
-        styles: styles$j,
+        styles: styles$k,
         checkedIndicator: circleFilled16X16.data
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleRadio());
 
-    const styles$i = css `
+    const styles$j = css `
     ${display('inline-block')}
 
     .positioning-region {
@@ -21526,16 +21526,16 @@
         baseName: 'radio-group',
         baseClass: RadioGroup$1,
         template: radioGroupTemplate,
-        styles: styles$i,
+        styles: styles$j,
         shadowOptions: {
             delegatesFocus: true
         }
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleRadioGroup());
 
-    const styles$h = css `
+    const styles$i = css `
+    ${styles$u}
     ${styles$t}
-    ${styles$s}
 
     ${
 /* We are using flex `order` to define the visual ordering of the selected value,
@@ -21611,7 +21611,7 @@
         baseName: 'select',
         baseClass: Select$1,
         template: selectTemplate,
-        styles: styles$h,
+        styles: styles$i,
         indicator: arrowExpanderDown16X16.data,
         end: html `
         <${DesignSystem.tagFor(IconExclamationMark)}
@@ -21623,7 +21623,7 @@
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSelect());
 
-    const styles$g = css `
+    const styles$h = css `
     ${display('inline-flex')}
 
     :host {
@@ -21767,7 +21767,7 @@
             }
         `));
 
-    const template$8 = html `
+    const template$9 = html `
     <template role="progressbar">
         <div class="container">
             <div class="bit1"></div>
@@ -21784,12 +21784,12 @@
     }
     const nimbleSpinner = Spinner.compose({
         baseName: 'spinner',
-        template: template$8,
-        styles: styles$g
+        template: template$9,
+        styles: styles$h
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSpinner());
 
-    const styles$f = css `
+    const styles$g = css `
     ${display('inline-flex')}
 
     :host {
@@ -21952,7 +21952,7 @@
         `));
 
     // prettier-ignore
-    const template$7 = html `
+    const template$8 = html `
     <template
         role="switch"
         aria-checked="${x => x.checked}"
@@ -21996,12 +21996,12 @@
     const nimbleSwitch = Switch.compose({
         baseClass: Switch$1,
         baseName: 'switch',
-        template: template$7,
-        styles: styles$f
+        template: template$8,
+        styles: styles$g
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSwitch());
 
-    const styles$e = css `
+    const styles$f = css `
     ${display('inline-flex')}
 
     :host {
@@ -22106,11 +22106,11 @@
         baseName: 'tab',
         baseClass: Tab$1,
         template: tabTemplate,
-        styles: styles$e
+        styles: styles$f
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTab());
 
-    const styles$d = css `
+    const styles$e = css `
     ${display('block')}
 
     :host {
@@ -22130,7 +22130,7 @@
         baseName: 'tab-panel',
         baseClass: TabPanel$1,
         template: tabPanelTemplate,
-        styles: styles$d
+        styles: styles$e
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabPanel());
 
@@ -25128,7 +25128,7 @@
         }
     }
 
-    const styles$c = css `
+    const styles$d = css `
     ${display('flex')}
 
     .table-container {
@@ -25155,7 +25155,7 @@
     }
 `;
 
-    const styles$b = css `
+    const styles$c = css `
     ${display('flex')}
 
     :host {
@@ -25169,7 +25169,7 @@
 `;
 
     // prettier-ignore
-    const template$6 = html `
+    const template$7 = html `
     <template role="columnheader">
         <slot></slot>
     </template>
@@ -25183,22 +25183,20 @@
     }
     const nimbleTableHeader = TableHeader.compose({
         baseName: 'table-header',
-        template: template$6,
-        styles: styles$b
+        template: template$7,
+        styles: styles$c
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableHeader());
 
-    const styles$a = css `
-    ${display('flex')}
+    const styles$b = css `
+    ${display('grid')}
 
     :host {
         height: ${controlHeight};
         background: ${applicationBackgroundColor};
         border-top: calc(2 * ${borderWidth}) solid ${tableRowBorderColor};
-    }
-
-    .cell {
-        flex: 1;
+        grid-auto-flow: column;
+        grid-auto-columns: 1fr;
     }
 
     :host(:hover) .cell {
@@ -25206,19 +25204,26 @@
     }
 `;
 
-    const styles$9 = css `
-    ${display('flex')}
+    const styles$a = css `
+    ${display('grid')}
 
     :host {
         padding: 0px calc(${standardPadding} / 2);
+        align-self: center;
+        height: 100%;
+    }
+
+    .cell-content-container {
+        overflow: hidden;
+        display: flex;
         align-items: center;
     }
 `;
 
     // prettier-ignore
-    const template$5 = html `
+    const template$6 = html `
     <template role="cell">
-        ${x => x.data}
+        <div ${ref('cellContentContainer')} class="cell-content-container"></div>
     </template>
 `;
 
@@ -25227,24 +25232,56 @@
      * @internal
      */
     class TableCell extends FoundationElement {
+        constructor() {
+            super(...arguments);
+            this.customCellView = undefined;
+        }
+        connectedCallback() {
+            super.connectedCallback();
+            this.customCellView = this.cellTemplate?.render(this.cellState, this.cellContentContainer);
+        }
+        cellStateChanged() {
+            this.customCellView?.bind(this.cellState, defaultExecutionContext);
+        }
+        cellTemplateChanged() {
+            if (this.isConnected) {
+                this.customCellView = this.cellTemplate?.render(this.cellState, this.cellContentContainer);
+            }
+        }
+        cellStylesChanged(prev, next) {
+            if (prev) {
+                this.$fastController.removeStyles(prev);
+            }
+            if (next) {
+                this.$fastController.addStyles(next);
+            }
+        }
     }
     __decorate$1([
         observable
-    ], TableCell.prototype, "data", void 0);
+    ], TableCell.prototype, "cellState", void 0);
+    __decorate$1([
+        observable
+    ], TableCell.prototype, "cellTemplate", void 0);
+    __decorate$1([
+        observable
+    ], TableCell.prototype, "cellStyles", void 0);
     const nimbleTableCell = TableCell.compose({
         baseName: 'table-cell',
-        template: template$5,
-        styles: styles$9
+        template: template$6,
+        styles: styles$a
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableCell());
 
     // prettier-ignore
-    const template$4 = html `
+    const template$5 = html `
     <template role="row">
         ${repeat(x => x.columns, html `
             <${DesignSystem.tagFor(TableCell)}
                 class="cell"
-                :data="${(x, c) => c.parent.getCellValue(x)}"
+                :cellTemplate="${x => x.cellTemplate}"
+                :cellStyles="${x => x.cellStyles}"
+                :cellState="${(x, c) => c.parent.getCellState(x)}"
             >
             </${DesignSystem.tagFor(TableCell)}>
         `)}
@@ -25258,50 +25295,80 @@
     class TableRow extends FoundationElement {
         constructor() {
             super(...arguments);
-            // TODO: Temporarily assume the set of columns will be an array of strings.
-            // Eventually, this will be an array of column definitions.
             this.columns = [];
         }
-        getCellValue(column) {
-            return this.data ? this.data[column] : undefined;
+        getCellState(column) {
+            const fieldNames = column.getDataRecordFieldNames();
+            if (this.hasValidFieldNames(fieldNames) && this.dataRecord) {
+                const cellDataValues = fieldNames.map(field => this.dataRecord[field]);
+                const cellRecord = Object.fromEntries(column.cellRecordFieldNames.map((k, i) => [
+                    k,
+                    cellDataValues[i]
+                ]));
+                const columnConfig = column.getColumnConfig?.() ?? {};
+                const cellState = {
+                    cellRecord,
+                    columnConfig
+                };
+                return cellState;
+            }
+            return { cellRecord: {}, columnConfig: {} };
+        }
+        hasValidFieldNames(keys) {
+            return keys.every(key => key !== undefined);
         }
     }
     __decorate$1([
         observable
-    ], TableRow.prototype, "data", void 0);
+    ], TableRow.prototype, "dataRecord", void 0);
     __decorate$1([
         observable
     ], TableRow.prototype, "columns", void 0);
     const nimbleTableRow = TableRow.compose({
         baseName: 'table-row',
-        template: template$4,
-        styles: styles$a
+        template: template$5,
+        styles: styles$b
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTableRow());
 
+    /**
+     * The base class for table columns
+     */
+    class TableColumn extends FoundationElement {
+    }
+
+    const isTableColumn = () => {
+        const filter = (value, _, __) => {
+            return value instanceof TableColumn;
+        };
+        return filter;
+    };
     // prettier-ignore
-    const template$3 = html `
+    const template$4 = html `
     <template role="table">
         <div class="table-container">
             <div role="rowgroup" class="header-container">
                 <div class="header-row" role="row">
-                    ${repeat(x => x.columnHeaders, html `
+                    ${repeat(x => x.columns, html `
                         <${DesignSystem.tagFor(TableHeader)} class="header">
-                            ${x => x}
+                            ${x => x.textContent}
                         </${DesignSystem.tagFor(TableHeader)}>
                     `)}
                 </div>
             </div>
             <div class="table-viewport" role="rowgroup">
+            ${when(x => x.columns.length > 0, html `
                 ${repeat(x => x.tableData, html `
                     <${DesignSystem.tagFor(TableRow)}
-                        :data="${x => x.data}"
+                        :dataRecord="${x => x.record}"
                         :columns="${(_, c) => c.parent.columns}"
                     >
                     </${DesignSystem.tagFor(TableRow)}>
                 `)}
+            `)}
             </div>
         </div>
+        <slot ${slotted({ property: 'columns', filter: isTableColumn() })}></slot>
     </template>
 `;
 
@@ -25316,11 +25383,7 @@
              * @internal
              */
             this.tableData = [];
-            // TODO: Temporarily expose the columns as a string array. This will ultimately be
-            // column definitions provided by slotted elements.
             this.columns = [];
-            // TODO: Temporarily expose the column headers as a string array.
-            this.columnHeaders = [];
             this.tableInitialized = false;
             this.tableValidator = new TableValidator();
             this.update = (state) => {
@@ -25387,7 +25450,7 @@
         refreshRows() {
             const rows = this.table.getRowModel().rows;
             this.tableData = rows.map(row => {
-                const rowState = { data: row.original };
+                const rowState = { record: row.original };
                 return rowState;
             });
         }
@@ -25396,8 +25459,8 @@
             this.update(this.table.initialState);
             this.refreshRows();
         }
-        // Temporarily auto-detect the keys in TData to make columns.
-        // TODO: Remove this logic when another way to specify columns is provided.
+        // Generate columns for TanStack that correspond to all the keys in TData because all operations,
+        // such as grouping and sorting, will be performed on the data's records, not the values rendered within a cell.
         generateColumns() {
             if (this.data.length === 0) {
                 return;
@@ -25413,8 +25476,6 @@
                 return columnDef;
             });
             this.updateTableOptions({ columns: generatedColumns });
-            this.columnHeaders = generatedColumns.map(x => x.header);
-            this.columns = this.columnHeaders;
         }
     }
     __decorate$1([
@@ -25429,16 +25490,81 @@
     __decorate$1([
         observable
     ], Table.prototype, "columns", void 0);
-    __decorate$1([
-        observable
-    ], Table.prototype, "columnHeaders", void 0);
     const nimbleTable = Table.compose({
         baseName: 'table',
-        template: template$3,
-        styles: styles$c
+        template: template$4,
+        styles: styles$d
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTable());
 
+    const styles$9 = css `
+    :host {
+        display: none;
+    }
+`;
+
+    const template$3 = html `
+    <template>
+        <slot></slot>
+    </template>
+`;
+
+    const cellStyles = css `
+    span {
+        font: ${bodyFont};
+        color: ${bodyFontColor};
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .placeholder {
+        color: ${controlLabelFontColor};
+    }
+`;
+
+    const cellTemplate = html `
+    <span
+        class="${x => (typeof x.cellRecord.value === 'string' ? '' : 'placeholder')}"
+    >
+        ${x => (typeof x.cellRecord.value === 'string'
+    ? x.cellRecord.value
+    : x.columnConfig.placeholder)}
+    </span>
+`;
+
+    /**
+     * The table column for displaying strings.
+     */
+    class TableColumnText extends TableColumn {
+        constructor() {
+            super(...arguments);
+            this.cellRecordFieldNames = ['value'];
+            this.cellStyles = cellStyles;
+            this.cellTemplate = cellTemplate;
+        }
+        getColumnConfig() {
+            return { placeholder: this.placeholder ?? '' };
+        }
+        getDataRecordFieldNames() {
+            return [this.fieldName];
+        }
+    }
+    __decorate$1([
+        attr({ attribute: 'field-name' })
+    ], TableColumnText.prototype, "fieldName", void 0);
+    __decorate$1([
+        attr
+    ], TableColumnText.prototype, "placeholder", void 0);
+    const nimbleTableColumnText = TableColumnText.compose({
+        baseName: 'table-column-text',
+        template: template$3,
+        styles: styles$9
+    });
+    DesignSystem.getOrCreate()
+        .withPrefix('nimble')
+        .register(nimbleTableColumnText());
+
     const styles$8 = css `
     ${display('grid')}
 
@@ -25679,7 +25805,7 @@
 
     const styles$5 = css `
     ${display('inline-block')}
-    ${styles$s}
+    ${styles$t}
 
     :host {
         font: ${bodyFont};
@@ -26575,20 +26701,22 @@ Instead styling against the role which is more general and likely a better appro
 
     const template = html `
     <div class="wafer-map-container">
-        <svg class="svg-root ${x => x.orientation}">
-            <g class="zoom-container">
-                <svg
-                    class="circle-base"
-                    version="1.1"
-                    x="0px"
-                    y="0px"
-                    viewBox="1 .45 20 21"
-                >
-                    <path
-                        class="circle-drawing-path"
-                        d="m 21 12 a 10 10 330 1 1 0 -1.98 a 1 1 0 0 0 0 2"
-                    />
-                </svg>
+        <svg class="svg-root">
+            <g class="zoom-container" ${ref('zoomContainer')}>
+                <g class="notch ${x => x.orientation}">
+                    <svg
+                        class="circle-base"
+                        version="1.1"
+                        x="0px"
+                        y="0px"
+                        viewBox="1 .45 20 21"
+                    >
+                        <path
+                            class="circle-drawing-path"
+                            d="m 21 12 a 10 10 330 1 1 0 -1.98 a 1 1 0 0 0 0 2"
+                        />
+                    </svg>
+                </g>
             </g>
         </svg>
         <div class="wafer-map-area">
@@ -26619,19 +26747,30 @@ Instead styling against the role which is more general and likely a better appro
         position: absolute;
     }
 
-    .svg-root.top {
+    .circle-base {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        fill: white;
+    }
+
+    .notch {
+        transform-origin: center center;
+    }
+
+    .notch.top {
         transform: rotate(-90deg);
     }
 
-    .svg-root.right {
+    .notch.right {
         transform: rotate(0deg);
     }
 
-    .svg-root.left {
+    .notch.left {
         transform: rotate(180deg);
     }
 
-    .svg-root.bottom {
+    .notch.bottom {
         transform: rotate(90deg);
     }
 
@@ -26687,7 +26826,7 @@ Instead styling against the role which is more general and likely a better appro
         ordinal: 'ordinal'
     };
 
-    function ascending(a, b) {
+    function ascending$1(a, b) {
       return a == null || b == null ? NaN : a < b ? -1 : a > b ? 1 : a >= b ? 0 : NaN;
     }
 
@@ -26708,11 +26847,11 @@ Instead styling against the role which is more general and likely a better appro
       // tell if the comparator is symmetric, and an asymmetric comparator can’t be
       // used to test whether a single value is comparable.
       if (f.length !== 2) {
-        compare1 = ascending;
-        compare2 = (d, x) => ascending(f(d), x);
+        compare1 = ascending$1;
+        compare2 = (d, x) => ascending$1(f(d), x);
         delta = (d, x) => f(d) - x;
       } else {
-        compare1 = f === ascending || f === descending ? f : zero$1;
+        compare1 = f === ascending$1 || f === descending ? f : zero$1;
         compare2 = f;
         delta = f;
       }
@@ -26757,7 +26896,7 @@ Instead styling against the role which is more general and likely a better appro
       return x === null ? NaN : +x;
     }
 
-    const ascendingBisect = bisector(ascending);
+    const ascendingBisect = bisector(ascending$1);
     const bisectRight = ascendingBisect.right;
     bisector(number$1).center;
     var bisect = bisectRight;
@@ -27253,7 +27392,7 @@ Instead styling against the role which is more general and likely a better appro
       return new Rgb(o.r, o.g, o.b, o.opacity);
     }
 
-    function rgb$1(r, g, b, opacity) {
+    function rgb(r, g, b, opacity) {
       return arguments.length === 1 ? rgbConvert(r) : new Rgb(r, g, b, opacity == null ? 1 : opacity);
     }
 
@@ -27264,7 +27403,7 @@ Instead styling against the role which is more general and likely a better appro
       this.opacity = +opacity;
     }
 
-    define(Rgb, rgb$1, extend(Color, {
+    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);
@@ -27415,7 +27554,7 @@ Instead styling against the role which is more general and likely a better appro
           : m1) * 255;
     }
 
-    var constant = x => () => x;
+    var constant$2 = x => () => x;
 
     function linear$1(a, d) {
       return function(t) {
@@ -27431,20 +27570,20 @@ Instead styling against the role which is more general and likely a better appro
 
     function gamma(y) {
       return (y = +y) === 1 ? nogamma : function(a, b) {
-        return b - a ? exponential(a, b, y) : constant(isNaN(a) ? b : a);
+        return b - a ? exponential(a, b, y) : constant$2(isNaN(a) ? b : a);
       };
     }
 
     function nogamma(a, b) {
       var d = b - a;
-      return d ? linear$1(a, d) : constant(isNaN(a) ? b : a);
+      return d ? linear$1(a, d) : constant$2(isNaN(a) ? b : a);
     }
 
-    var rgb = (function rgbGamma(y) {
+    var interpolateRgb = (function rgbGamma(y) {
       var color = gamma(y);
 
-      function rgb(start, end) {
-        var r = color((start = rgb$1(start)).r, (end = rgb$1(end)).r),
+      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);
@@ -27457,9 +27596,9 @@ Instead styling against the role which is more general and likely a better appro
         };
       }
 
-      rgb.gamma = rgbGamma;
+      rgb$1.gamma = rgbGamma;
 
-      return rgb;
+      return rgb$1;
     })(1);
 
     function numberArray(a, b) {
@@ -27484,7 +27623,7 @@ Instead styling against the role which is more general and likely a better appro
           c = new Array(nb),
           i;
 
-      for (i = 0; i < na; ++i) x[i] = interpolate(a[i], b[i]);
+      for (i = 0; i < na; ++i) x[i] = interpolate$1(a[i], b[i]);
       for (; i < nb; ++i) c[i] = b[i];
 
       return function(t) {
@@ -27516,7 +27655,7 @@ Instead styling against the role which is more general and likely a better appro
 
       for (k in b) {
         if (k in a) {
-          i[k] = interpolate(a[k], b[k]);
+          i[k] = interpolate$1(a[k], b[k]);
         } else {
           c[k] = b[k];
         }
@@ -27543,7 +27682,7 @@ Instead styling against the role which is more general and likely a better appro
       };
     }
 
-    function string(a, b) {
+    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
@@ -27591,12 +27730,12 @@ Instead styling against the role which is more general and likely a better appro
             });
     }
 
-    function interpolate(a, b) {
+    function interpolate$1(a, b) {
       var t = typeof b, c;
-      return b == null || t === "boolean" ? constant(b)
+      return b == null || t === "boolean" ? constant$2(b)
           : (t === "number" ? interpolateNumber
-          : t === "string" ? ((c = color(b)) ? (b = c, rgb) : string)
-          : b instanceof color ? rgb
+          : t === "string" ? ((c = color(b)) ? (b = c, interpolateRgb) : interpolateString)
+          : b instanceof color ? interpolateRgb
           : b instanceof Date ? date
           : isNumberArray(b) ? numberArray
           : Array.isArray(b) ? genericArray
@@ -27610,8 +27749,185 @@ Instead styling against the role which is more general and likely a better appro
       };
     }
 
-    function constants(x) {
-      return function() {
+    var degrees = 180 / Math.PI;
+
+    var identity$3 = {
+      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$3 : decompose(m.a, m.b, m.c, m.d, m.e, m.f);
+    }
+
+    function parseSvg(value) {
+      if (value == null) return identity$3;
+      if (!svgNode) svgNode = document.createElementNS("http://www.w3.org/2000/svg", "g");
+      svgNode.setAttribute("transform", value);
+      if (!(value = svgNode.transform.baseVal.consolidate())) return identity$3;
+      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 epsilon2 = 1e-12;
+
+    function cosh(x) {
+      return ((x = Math.exp(x)) + 1 / x) / 2;
+    }
+
+    function sinh(x) {
+      return ((x = Math.exp(x)) - 1 / x) / 2;
+    }
+
+    function tanh(x) {
+      return ((x = Math.exp(2 * x)) - 1) / (x + 1);
+    }
+
+    var interpolateZoom = (function zoomRho(rho, rho2, rho4) {
+
+      // p0 = [ux0, uy0, w0]
+      // p1 = [ux1, uy1, w1]
+      function zoom(p0, p1) {
+        var ux0 = p0[0], uy0 = p0[1], w0 = p0[2],
+            ux1 = p1[0], uy1 = p1[1], w1 = p1[2],
+            dx = ux1 - ux0,
+            dy = uy1 - uy0,
+            d2 = dx * dx + dy * dy,
+            i,
+            S;
+
+        // Special case for u0 ≅ u1.
+        if (d2 < epsilon2) {
+          S = Math.log(w1 / w0) / rho;
+          i = function(t) {
+            return [
+              ux0 + t * dx,
+              uy0 + t * dy,
+              w0 * Math.exp(rho * t * S)
+            ];
+          };
+        }
+
+        // General case.
+        else {
+          var d1 = Math.sqrt(d2),
+              b0 = (w1 * w1 - w0 * w0 + rho4 * d2) / (2 * w0 * rho2 * d1),
+              b1 = (w1 * w1 - w0 * w0 - rho4 * d2) / (2 * w1 * rho2 * d1),
+              r0 = Math.log(Math.sqrt(b0 * b0 + 1) - b0),
+              r1 = Math.log(Math.sqrt(b1 * b1 + 1) - b1);
+          S = (r1 - r0) / rho;
+          i = function(t) {
+            var s = t * S,
+                coshr0 = cosh(r0),
+                u = w0 / (rho2 * d1) * (coshr0 * tanh(rho * s + r0) - sinh(r0));
+            return [
+              ux0 + u * dx,
+              uy0 + u * dy,
+              w0 * coshr0 / cosh(rho * s + r0)
+            ];
+          };
+        }
+
+        i.duration = S * 1000 * rho / Math.SQRT2;
+
+        return i;
+      }
+
+      zoom.rho = function(_) {
+        var _1 = Math.max(1e-3, +_), _2 = _1 * _1, _4 = _2 * _2;
+        return zoomRho(_1, _2, _4);
+      };
+
+      return zoom;
+    })(Math.SQRT2, 2, 4);
+
+    function constants(x) {
+      return function() {
         return x;
       };
     }
@@ -27622,7 +27938,7 @@ Instead styling against the role which is more general and likely a better appro
 
     var unit = [0, 1];
 
-    function identity$1(x) {
+    function identity$2(x) {
       return x;
     }
 
@@ -27682,25 +27998,25 @@ Instead styling against the role which is more general and likely a better appro
     function transformer() {
       var domain = unit,
           range = unit,
-          interpolate$1 = interpolate,
+          interpolate = interpolate$1,
           transform,
           untransform,
           unknown,
-          clamp = identity$1,
+          clamp = identity$2,
           piecewise,
           output,
           input;
 
       function rescale() {
         var n = Math.min(domain.length, range.length);
-        if (clamp !== identity$1) clamp = clamper(domain[0], domain[n - 1]);
+        if (clamp !== identity$2) clamp = clamper(domain[0], domain[n - 1]);
         piecewise = n > 2 ? polymap : bimap;
         output = input = null;
         return scale;
       }
 
       function scale(x) {
-        return x == null || isNaN(x = +x) ? unknown : (output || (output = piecewise(domain.map(transform), range, interpolate$1)))(transform(clamp(x)));
+        return x == null || isNaN(x = +x) ? unknown : (output || (output = piecewise(domain.map(transform), range, interpolate)))(transform(clamp(x)));
       }
 
       scale.invert = function(y) {
@@ -27716,15 +28032,15 @@ Instead styling against the role which is more general and likely a better appro
       };
 
       scale.rangeRound = function(_) {
-        return range = Array.from(_), interpolate$1 = interpolateRound, rescale();
+        return range = Array.from(_), interpolate = interpolateRound, rescale();
       };
 
       scale.clamp = function(_) {
-        return arguments.length ? (clamp = _ ? true : identity$1, rescale()) : clamp !== identity$1;
+        return arguments.length ? (clamp = _ ? true : identity$2, rescale()) : clamp !== identity$2;
       };
 
       scale.interpolate = function(_) {
-        return arguments.length ? (interpolate$1 = _, rescale()) : interpolate$1;
+        return arguments.length ? (interpolate = _, rescale()) : interpolate;
       };
 
       scale.unknown = function(_) {
@@ -27738,7 +28054,7 @@ Instead styling against the role which is more general and likely a better appro
     }
 
     function continuous() {
-      return transformer()(identity$1, identity$1);
+      return transformer()(identity$2, identity$2);
     }
 
     function formatDecimal(x) {
@@ -27894,7 +28210,7 @@ Instead styling against the role which is more general and likely a better appro
       "x": (x) => Math.round(x).toString(16)
     };
 
-    function identity(x) {
+    function identity$1(x) {
       return x;
     }
 
@@ -27902,11 +28218,11 @@ Instead styling against the role which is more general and likely a better appro
         prefixes = ["y","z","a","f","p","n","µ","m","","k","M","G","T","P","E","Z","Y"];
 
     function formatLocale(locale) {
-      var group = locale.grouping === undefined || locale.thousands === undefined ? identity : formatGroup(map.call(locale.grouping, Number), locale.thousands + ""),
+      var group = locale.grouping === undefined || locale.thousands === undefined ? identity$1 : formatGroup(map.call(locale.grouping, Number), locale.thousands + ""),
           currencyPrefix = locale.currency === undefined ? "" : locale.currency[0] + "",
           currencySuffix = locale.currency === undefined ? "" : locale.currency[1] + "",
           decimal = locale.decimal === undefined ? "." : locale.decimal + "",
-          numerals = locale.numerals === undefined ? identity : formatNumerals(map.call(locale.numerals, String)),
+          numerals = locale.numerals === undefined ? identity$1 : formatNumerals(map.call(locale.numerals, String)),
           percent = locale.percent === undefined ? "%" : locale.percent + "",
           minus = locale.minus === undefined ? "−" : locale.minus + "",
           nan = locale.nan === undefined ? "NaN" : locale.nan + "";
@@ -29531,41 +29847,2700 @@ Instead styling against the role which is more general and likely a better appro
         }
     }
 
-    /**
-     * A nimble-styled WaferMap
-     */
-    class WaferMap extends FoundationElement {
-        constructor() {
-            super(...arguments);
-            this.quadrant = WaferMapQuadrant.topLeft;
-            this.orientation = WaferMapOrientation.top;
-            this.maxCharacters = 4;
-            this.dieLabelsHidden = false;
-            this.dieLabelsSuffix = '';
-            this.colorScaleMode = WaferMapColorScaleMode.linear;
-            this.highlightedValues = [];
-            this.dies = [];
-            this.colorScale = {
-                colors: [],
-                values: []
-            };
-            this.renderQueued = false;
+    var xhtml = "http://www.w3.org/1999/xhtml";
+
+    var 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;
+          }
         }
-        connectedCallback() {
-            super.connectedCallback();
-            this.resizeObserver = new ResizeObserver(entries => {
-                const entry = entries[0];
-                if (entry === undefined) {
-                    return;
-                }
-                const { height, width } = entry.contentRect;
-                this.canvasSideLength = Math.min(height, width);
-            });
-            this.resizeObserver.observe(this);
+      }
+
+      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(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(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$1(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$1(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$1(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$1(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 select(selector) {
+      return typeof selector === "string"
+          ? new Selection$1([[document.querySelector(selector)]], [document.documentElement])
+          : new Selection$1([[selector]], root);
+    }
+
+    function sourceEvent(event) {
+      let sourceEvent;
+      while (sourceEvent = event.sourceEvent) event = sourceEvent;
+      return event;
+    }
+
+    function pointer(event, node) {
+      event = sourceEvent(event);
+      if (node === undefined) node = event.currentTarget;
+      if (node) {
+        var svg = node.ownerSVGElement || node;
+        if (svg.createSVGPoint) {
+          var point = svg.createSVGPoint();
+          point.x = event.clientX, point.y = event.clientY;
+          point = point.matrixTransform(node.getScreenCTM().inverse());
+          return [point.x, point.y];
+        }
+        if (node.getBoundingClientRect) {
+          var rect = node.getBoundingClientRect();
+          return [event.clientX - rect.left - node.clientLeft, event.clientY - rect.top - node.clientTop];
+        }
+      }
+      return [event.pageX, event.pageY];
+    }
+
+    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(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(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;
+    }
+
+    // These are typically used in conjunction with noevent to ensure that we can
+    const nonpassivecapture = {capture: true, passive: false};
+
+    function noevent$1(event) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+    }
+
+    function dragDisable(view) {
+      var root = view.document.documentElement,
+          selection = select(view).on("dragstart.drag", noevent$1, nonpassivecapture);
+      if ("onselectstart" in root) {
+        selection.on("selectstart.drag", noevent$1, nonpassivecapture);
+      } else {
+        root.__noselect = root.style.MozUserSelect;
+        root.style.MozUserSelect = "none";
+      }
+    }
+
+    function yesdrag(view, noclick) {
+      var root = view.document.documentElement,
+          selection = select(view).on("dragstart.drag", null);
+      if (noclick) {
+        selection.on("click.drag", noevent$1, nonpassivecapture);
+        setTimeout(function() { selection.on("click.drag", null); }, 0);
+      }
+      if ("onselectstart" in root) {
+        selection.on("selectstart.drag", null);
+      } else {
+        root.style.MozUserSelect = root.__noselect;
+        delete root.__noselect;
+      }
+    }
+
+    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;
+
+    var constant = x => () => x;
+
+    function ZoomEvent(type, {
+      sourceEvent,
+      target,
+      transform,
+      dispatch
+    }) {
+      Object.defineProperties(this, {
+        type: {value: type, enumerable: true, configurable: true},
+        sourceEvent: {value: sourceEvent, enumerable: true, configurable: true},
+        target: {value: target, enumerable: true, configurable: true},
+        transform: {value: transform, enumerable: true, configurable: true},
+        _: {value: dispatch}
+      });
+    }
+
+    function Transform(k, x, y) {
+      this.k = k;
+      this.x = x;
+      this.y = y;
+    }
+
+    Transform.prototype = {
+      constructor: Transform,
+      scale: function(k) {
+        return k === 1 ? this : new Transform(this.k * k, this.x, this.y);
+      },
+      translate: function(x, y) {
+        return x === 0 & y === 0 ? this : new Transform(this.k, this.x + this.k * x, this.y + this.k * y);
+      },
+      apply: function(point) {
+        return [point[0] * this.k + this.x, point[1] * this.k + this.y];
+      },
+      applyX: function(x) {
+        return x * this.k + this.x;
+      },
+      applyY: function(y) {
+        return y * this.k + this.y;
+      },
+      invert: function(location) {
+        return [(location[0] - this.x) / this.k, (location[1] - this.y) / this.k];
+      },
+      invertX: function(x) {
+        return (x - this.x) / this.k;
+      },
+      invertY: function(y) {
+        return (y - this.y) / this.k;
+      },
+      rescaleX: function(x) {
+        return x.copy().domain(x.range().map(this.invertX, this).map(x.invert, x));
+      },
+      rescaleY: function(y) {
+        return y.copy().domain(y.range().map(this.invertY, this).map(y.invert, y));
+      },
+      toString: function() {
+        return "translate(" + this.x + "," + this.y + ") scale(" + this.k + ")";
+      }
+    };
+
+    var identity = new Transform(1, 0, 0);
+
+    transform.prototype = Transform.prototype;
+
+    function transform(node) {
+      while (!node.__zoom) if (!(node = node.parentNode)) return identity;
+      return node.__zoom;
+    }
+
+    function nopropagation(event) {
+      event.stopImmediatePropagation();
+    }
+
+    function noevent(event) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+    }
+
+    // Ignore right-click, since that should open the context menu.
+    // except for pinch-to-zoom, which is sent as a wheel+ctrlKey event
+    function defaultFilter(event) {
+      return (!event.ctrlKey || event.type === 'wheel') && !event.button;
+    }
+
+    function defaultExtent() {
+      var e = this;
+      if (e instanceof SVGElement) {
+        e = e.ownerSVGElement || e;
+        if (e.hasAttribute("viewBox")) {
+          e = e.viewBox.baseVal;
+          return [[e.x, e.y], [e.x + e.width, e.y + e.height]];
+        }
+        return [[0, 0], [e.width.baseVal.value, e.height.baseVal.value]];
+      }
+      return [[0, 0], [e.clientWidth, e.clientHeight]];
+    }
+
+    function defaultTransform() {
+      return this.__zoom || identity;
+    }
+
+    function defaultWheelDelta(event) {
+      return -event.deltaY * (event.deltaMode === 1 ? 0.05 : event.deltaMode ? 1 : 0.002) * (event.ctrlKey ? 10 : 1);
+    }
+
+    function defaultTouchable() {
+      return navigator.maxTouchPoints || ("ontouchstart" in this);
+    }
+
+    function defaultConstrain(transform, extent, translateExtent) {
+      var dx0 = transform.invertX(extent[0][0]) - translateExtent[0][0],
+          dx1 = transform.invertX(extent[1][0]) - translateExtent[1][0],
+          dy0 = transform.invertY(extent[0][1]) - translateExtent[0][1],
+          dy1 = transform.invertY(extent[1][1]) - translateExtent[1][1];
+      return transform.translate(
+        dx1 > dx0 ? (dx0 + dx1) / 2 : Math.min(0, dx0) || Math.max(0, dx1),
+        dy1 > dy0 ? (dy0 + dy1) / 2 : Math.min(0, dy0) || Math.max(0, dy1)
+      );
+    }
+
+    function zoom() {
+      var filter = defaultFilter,
+          extent = defaultExtent,
+          constrain = defaultConstrain,
+          wheelDelta = defaultWheelDelta,
+          touchable = defaultTouchable,
+          scaleExtent = [0, Infinity],
+          translateExtent = [[-Infinity, -Infinity], [Infinity, Infinity]],
+          duration = 250,
+          interpolate = interpolateZoom,
+          listeners = dispatch("start", "zoom", "end"),
+          touchstarting,
+          touchfirst,
+          touchending,
+          touchDelay = 500,
+          wheelDelay = 150,
+          clickDistance2 = 0,
+          tapDistance = 10;
+
+      function zoom(selection) {
+        selection
+            .property("__zoom", defaultTransform)
+            .on("wheel.zoom", wheeled, {passive: false})
+            .on("mousedown.zoom", mousedowned)
+            .on("dblclick.zoom", dblclicked)
+          .filter(touchable)
+            .on("touchstart.zoom", touchstarted)
+            .on("touchmove.zoom", touchmoved)
+            .on("touchend.zoom touchcancel.zoom", touchended)
+            .style("-webkit-tap-highlight-color", "rgba(0,0,0,0)");
+      }
+
+      zoom.transform = function(collection, transform, point, event) {
+        var selection = collection.selection ? collection.selection() : collection;
+        selection.property("__zoom", defaultTransform);
+        if (collection !== selection) {
+          schedule(collection, transform, point, event);
+        } else {
+          selection.interrupt().each(function() {
+            gesture(this, arguments)
+              .event(event)
+              .start()
+              .zoom(null, typeof transform === "function" ? transform.apply(this, arguments) : transform)
+              .end();
+          });
+        }
+      };
+
+      zoom.scaleBy = function(selection, k, p, event) {
+        zoom.scaleTo(selection, function() {
+          var k0 = this.__zoom.k,
+              k1 = typeof k === "function" ? k.apply(this, arguments) : k;
+          return k0 * k1;
+        }, p, event);
+      };
+
+      zoom.scaleTo = function(selection, k, p, event) {
+        zoom.transform(selection, function() {
+          var e = extent.apply(this, arguments),
+              t0 = this.__zoom,
+              p0 = p == null ? centroid(e) : typeof p === "function" ? p.apply(this, arguments) : p,
+              p1 = t0.invert(p0),
+              k1 = typeof k === "function" ? k.apply(this, arguments) : k;
+          return constrain(translate(scale(t0, k1), p0, p1), e, translateExtent);
+        }, p, event);
+      };
+
+      zoom.translateBy = function(selection, x, y, event) {
+        zoom.transform(selection, function() {
+          return constrain(this.__zoom.translate(
+            typeof x === "function" ? x.apply(this, arguments) : x,
+            typeof y === "function" ? y.apply(this, arguments) : y
+          ), extent.apply(this, arguments), translateExtent);
+        }, null, event);
+      };
+
+      zoom.translateTo = function(selection, x, y, p, event) {
+        zoom.transform(selection, function() {
+          var e = extent.apply(this, arguments),
+              t = this.__zoom,
+              p0 = p == null ? centroid(e) : typeof p === "function" ? p.apply(this, arguments) : p;
+          return constrain(identity.translate(p0[0], p0[1]).scale(t.k).translate(
+            typeof x === "function" ? -x.apply(this, arguments) : -x,
+            typeof y === "function" ? -y.apply(this, arguments) : -y
+          ), e, translateExtent);
+        }, p, event);
+      };
+
+      function scale(transform, k) {
+        k = Math.max(scaleExtent[0], Math.min(scaleExtent[1], k));
+        return k === transform.k ? transform : new Transform(k, transform.x, transform.y);
+      }
+
+      function translate(transform, p0, p1) {
+        var x = p0[0] - p1[0] * transform.k, y = p0[1] - p1[1] * transform.k;
+        return x === transform.x && y === transform.y ? transform : new Transform(transform.k, x, y);
+      }
+
+      function centroid(extent) {
+        return [(+extent[0][0] + +extent[1][0]) / 2, (+extent[0][1] + +extent[1][1]) / 2];
+      }
+
+      function schedule(transition, transform, point, event) {
+        transition
+            .on("start.zoom", function() { gesture(this, arguments).event(event).start(); })
+            .on("interrupt.zoom end.zoom", function() { gesture(this, arguments).event(event).end(); })
+            .tween("zoom", function() {
+              var that = this,
+                  args = arguments,
+                  g = gesture(that, args).event(event),
+                  e = extent.apply(that, args),
+                  p = point == null ? centroid(e) : typeof point === "function" ? point.apply(that, args) : point,
+                  w = Math.max(e[1][0] - e[0][0], e[1][1] - e[0][1]),
+                  a = that.__zoom,
+                  b = typeof transform === "function" ? transform.apply(that, args) : transform,
+                  i = interpolate(a.invert(p).concat(w / a.k), b.invert(p).concat(w / b.k));
+              return function(t) {
+                if (t === 1) t = b; // Avoid rounding error on end.
+                else { var l = i(t), k = w / l[2]; t = new Transform(k, p[0] - l[0] * k, p[1] - l[1] * k); }
+                g.zoom(null, t);
+              };
+            });
+      }
+
+      function gesture(that, args, clean) {
+        return (!clean && that.__zooming) || new Gesture(that, args);
+      }
+
+      function Gesture(that, args) {
+        this.that = that;
+        this.args = args;
+        this.active = 0;
+        this.sourceEvent = null;
+        this.extent = extent.apply(that, args);
+        this.taps = 0;
+      }
+
+      Gesture.prototype = {
+        event: function(event) {
+          if (event) this.sourceEvent = event;
+          return this;
+        },
+        start: function() {
+          if (++this.active === 1) {
+            this.that.__zooming = this;
+            this.emit("start");
+          }
+          return this;
+        },
+        zoom: function(key, transform) {
+          if (this.mouse && key !== "mouse") this.mouse[1] = transform.invert(this.mouse[0]);
+          if (this.touch0 && key !== "touch") this.touch0[1] = transform.invert(this.touch0[0]);
+          if (this.touch1 && key !== "touch") this.touch1[1] = transform.invert(this.touch1[0]);
+          this.that.__zoom = transform;
+          this.emit("zoom");
+          return this;
+        },
+        end: function() {
+          if (--this.active === 0) {
+            delete this.that.__zooming;
+            this.emit("end");
+          }
+          return this;
+        },
+        emit: function(type) {
+          var d = select(this.that).datum();
+          listeners.call(
+            type,
+            this.that,
+            new ZoomEvent(type, {
+              sourceEvent: this.sourceEvent,
+              target: zoom,
+              type,
+              transform: this.that.__zoom,
+              dispatch: listeners
+            }),
+            d
+          );
+        }
+      };
+
+      function wheeled(event, ...args) {
+        if (!filter.apply(this, arguments)) return;
+        var g = gesture(this, args).event(event),
+            t = this.__zoom,
+            k = Math.max(scaleExtent[0], Math.min(scaleExtent[1], t.k * Math.pow(2, wheelDelta.apply(this, arguments)))),
+            p = pointer(event);
+
+        // If the mouse is in the same location as before, reuse it.
+        // If there were recent wheel events, reset the wheel idle timeout.
+        if (g.wheel) {
+          if (g.mouse[0][0] !== p[0] || g.mouse[0][1] !== p[1]) {
+            g.mouse[1] = t.invert(g.mouse[0] = p);
+          }
+          clearTimeout(g.wheel);
+        }
+
+        // If this wheel event won’t trigger a transform change, ignore it.
+        else if (t.k === k) return;
+
+        // Otherwise, capture the mouse point and location at the start.
+        else {
+          g.mouse = [p, t.invert(p)];
+          interrupt(this);
+          g.start();
+        }
+
+        noevent(event);
+        g.wheel = setTimeout(wheelidled, wheelDelay);
+        g.zoom("mouse", constrain(translate(scale(t, k), g.mouse[0], g.mouse[1]), g.extent, translateExtent));
+
+        function wheelidled() {
+          g.wheel = null;
+          g.end();
+        }
+      }
+
+      function mousedowned(event, ...args) {
+        if (touchending || !filter.apply(this, arguments)) return;
+        var currentTarget = event.currentTarget,
+            g = gesture(this, args, true).event(event),
+            v = select(event.view).on("mousemove.zoom", mousemoved, true).on("mouseup.zoom", mouseupped, true),
+            p = pointer(event, currentTarget),
+            x0 = event.clientX,
+            y0 = event.clientY;
+
+        dragDisable(event.view);
+        nopropagation(event);
+        g.mouse = [p, this.__zoom.invert(p)];
+        interrupt(this);
+        g.start();
+
+        function mousemoved(event) {
+          noevent(event);
+          if (!g.moved) {
+            var dx = event.clientX - x0, dy = event.clientY - y0;
+            g.moved = dx * dx + dy * dy > clickDistance2;
+          }
+          g.event(event)
+           .zoom("mouse", constrain(translate(g.that.__zoom, g.mouse[0] = pointer(event, currentTarget), g.mouse[1]), g.extent, translateExtent));
+        }
+
+        function mouseupped(event) {
+          v.on("mousemove.zoom mouseup.zoom", null);
+          yesdrag(event.view, g.moved);
+          noevent(event);
+          g.event(event).end();
+        }
+      }
+
+      function dblclicked(event, ...args) {
+        if (!filter.apply(this, arguments)) return;
+        var t0 = this.__zoom,
+            p0 = pointer(event.changedTouches ? event.changedTouches[0] : event, this),
+            p1 = t0.invert(p0),
+            k1 = t0.k * (event.shiftKey ? 0.5 : 2),
+            t1 = constrain(translate(scale(t0, k1), p0, p1), extent.apply(this, args), translateExtent);
+
+        noevent(event);
+        if (duration > 0) select(this).transition().duration(duration).call(schedule, t1, p0, event);
+        else select(this).call(zoom.transform, t1, p0, event);
+      }
+
+      function touchstarted(event, ...args) {
+        if (!filter.apply(this, arguments)) return;
+        var touches = event.touches,
+            n = touches.length,
+            g = gesture(this, args, event.changedTouches.length === n).event(event),
+            started, i, t, p;
+
+        nopropagation(event);
+        for (i = 0; i < n; ++i) {
+          t = touches[i], p = pointer(t, this);
+          p = [p, this.__zoom.invert(p), t.identifier];
+          if (!g.touch0) g.touch0 = p, started = true, g.taps = 1 + !!touchstarting;
+          else if (!g.touch1 && g.touch0[2] !== p[2]) g.touch1 = p, g.taps = 0;
+        }
+
+        if (touchstarting) touchstarting = clearTimeout(touchstarting);
+
+        if (started) {
+          if (g.taps < 2) touchfirst = p[0], touchstarting = setTimeout(function() { touchstarting = null; }, touchDelay);
+          interrupt(this);
+          g.start();
+        }
+      }
+
+      function touchmoved(event, ...args) {
+        if (!this.__zooming) return;
+        var g = gesture(this, args).event(event),
+            touches = event.changedTouches,
+            n = touches.length, i, t, p, l;
+
+        noevent(event);
+        for (i = 0; i < n; ++i) {
+          t = touches[i], p = pointer(t, this);
+          if (g.touch0 && g.touch0[2] === t.identifier) g.touch0[0] = p;
+          else if (g.touch1 && g.touch1[2] === t.identifier) g.touch1[0] = p;
+        }
+        t = g.that.__zoom;
+        if (g.touch1) {
+          var p0 = g.touch0[0], l0 = g.touch0[1],
+              p1 = g.touch1[0], l1 = g.touch1[1],
+              dp = (dp = p1[0] - p0[0]) * dp + (dp = p1[1] - p0[1]) * dp,
+              dl = (dl = l1[0] - l0[0]) * dl + (dl = l1[1] - l0[1]) * dl;
+          t = scale(t, Math.sqrt(dp / dl));
+          p = [(p0[0] + p1[0]) / 2, (p0[1] + p1[1]) / 2];
+          l = [(l0[0] + l1[0]) / 2, (l0[1] + l1[1]) / 2];
+        }
+        else if (g.touch0) p = g.touch0[0], l = g.touch0[1];
+        else return;
+
+        g.zoom("touch", constrain(translate(t, p, l), g.extent, translateExtent));
+      }
+
+      function touchended(event, ...args) {
+        if (!this.__zooming) return;
+        var g = gesture(this, args).event(event),
+            touches = event.changedTouches,
+            n = touches.length, i, t;
+
+        nopropagation(event);
+        if (touchending) clearTimeout(touchending);
+        touchending = setTimeout(function() { touchending = null; }, touchDelay);
+        for (i = 0; i < n; ++i) {
+          t = touches[i];
+          if (g.touch0 && g.touch0[2] === t.identifier) delete g.touch0;
+          else if (g.touch1 && g.touch1[2] === t.identifier) delete g.touch1;
+        }
+        if (g.touch1 && !g.touch0) g.touch0 = g.touch1, delete g.touch1;
+        if (g.touch0) g.touch0[1] = this.__zoom.invert(g.touch0[0]);
+        else {
+          g.end();
+          // If this was a dbltap, reroute to the (optional) dblclick.zoom handler.
+          if (g.taps === 2) {
+            t = pointer(t, this);
+            if (Math.hypot(touchfirst[0] - t[0], touchfirst[1] - t[1]) < tapDistance) {
+              var p = select(this).on("dblclick.zoom");
+              if (p) p.apply(this, arguments);
+            }
+          }
+        }
+      }
+
+      zoom.wheelDelta = function(_) {
+        return arguments.length ? (wheelDelta = typeof _ === "function" ? _ : constant(+_), zoom) : wheelDelta;
+      };
+
+      zoom.filter = function(_) {
+        return arguments.length ? (filter = typeof _ === "function" ? _ : constant(!!_), zoom) : filter;
+      };
+
+      zoom.touchable = function(_) {
+        return arguments.length ? (touchable = typeof _ === "function" ? _ : constant(!!_), zoom) : touchable;
+      };
+
+      zoom.extent = function(_) {
+        return arguments.length ? (extent = typeof _ === "function" ? _ : constant([[+_[0][0], +_[0][1]], [+_[1][0], +_[1][1]]]), zoom) : extent;
+      };
+
+      zoom.scaleExtent = function(_) {
+        return arguments.length ? (scaleExtent[0] = +_[0], scaleExtent[1] = +_[1], zoom) : [scaleExtent[0], scaleExtent[1]];
+      };
+
+      zoom.translateExtent = function(_) {
+        return arguments.length ? (translateExtent[0][0] = +_[0][0], translateExtent[1][0] = +_[1][0], translateExtent[0][1] = +_[0][1], translateExtent[1][1] = +_[1][1], zoom) : [[translateExtent[0][0], translateExtent[0][1]], [translateExtent[1][0], translateExtent[1][1]]];
+      };
+
+      zoom.constrain = function(_) {
+        return arguments.length ? (constrain = _, zoom) : constrain;
+      };
+
+      zoom.duration = function(_) {
+        return arguments.length ? (duration = +_, zoom) : duration;
+      };
+
+      zoom.interpolate = function(_) {
+        return arguments.length ? (interpolate = _, zoom) : interpolate;
+      };
+
+      zoom.on = function() {
+        var value = listeners.on.apply(listeners, arguments);
+        return value === listeners ? zoom : value;
+      };
+
+      zoom.clickDistance = function(_) {
+        return arguments.length ? (clickDistance2 = (_ = +_) * _, zoom) : Math.sqrt(clickDistance2);
+      };
+
+      zoom.tapDistance = function(_) {
+        return arguments.length ? (tapDistance = +_, zoom) : tapDistance;
+      };
+
+      return zoom;
+    }
+
+    /**
+     * ZoomHandler deals with user interactions and events like zooming
+     */
+    class ZoomHandler {
+        constructor(canvas, zoomContainer, dataManager, renderingModule, canvasLength) {
+            this.canvas = canvas;
+            this.zoomContainer = zoomContainer;
+            this.dataManager = dataManager;
+            this.renderingModule = renderingModule;
+            this.canvasLength = canvasLength;
+            this.zoomTransform = identity;
+            this.minScale = 1.1;
+            this.minExtentPoint = [-100, -100];
+            this.extentPadding = 100;
+        }
+        attachZoomBehavior() {
+            this.zoomBehavior = this.createZoomBehavior();
+            this.zoomBehavior(select(this.canvas));
+        }
+        resetTransform() {
+            const canvasContext = this.canvas.getContext('2d');
+            if (canvasContext === null) {
+                return;
+            }
+            this.zoomTransform = identity;
+            this.clearCanvas(canvasContext, this.canvasLength, this.canvasLength);
+            this.scaleCanvas(canvasContext, identity.x, identity.y, identity.k);
+            this.renderingModule.drawWafer();
+            this.zoomBehavior?.transform(select(this.canvas), identity);
+        }
+        createZoomBehavior() {
+            const zoomBehavior = zoom()
+                .scaleExtent([
+                1.1,
+                this.getZoomMax(this.canvasLength * this.canvasLength, this.dataManager.containerDimensions.width
+                    * this.dataManager.containerDimensions.height)
+            ])
+                .translateExtent([
+                this.minExtentPoint,
+                [
+                    this.canvasLength + this.extentPadding,
+                    this.canvasLength + this.extentPadding
+                ]
+            ])
+                .filter((event) => {
+                const transform$1 = transform(this.canvas);
+                return transform$1.k >= this.minScale || event.type === 'wheel';
+            })
+                .on('zoom', (event) => {
+                const transform = event.transform;
+                const canvasContext = this.canvas.getContext('2d');
+                if (canvasContext === null) {
+                    return;
+                }
+                canvasContext.save();
+                if (transform.k === this.minScale) {
+                    this.zoomTransform = identity;
+                    this.clearCanvas(canvasContext, this.canvasLength, this.canvasLength);
+                    this.scaleCanvas(canvasContext, identity.x, identity.y, identity.k);
+                    this.renderingModule.drawWafer();
+                    zoomBehavior.transform(select(this.canvas), identity);
+                }
+                else {
+                    this.zoomTransform = transform;
+                    this.clearCanvas(canvasContext, this.canvasLength * this.zoomTransform.k, this.canvasLength * this.zoomTransform.k);
+                    this.scaleCanvas(canvasContext, transform.x, transform.y, transform.k);
+                    this.renderingModule.drawWafer();
+                }
+                canvasContext.restore();
+                this.zoomContainer.setAttribute('transform', this.zoomTransform.toString());
+            });
+            return zoomBehavior;
+        }
+        getZoomMax(canvasArea, dataArea) {
+            return Math.ceil((dataArea / canvasArea) * 100);
+        }
+        clearCanvas(context, width, height) {
+            context.clearRect(0, 0, width, height);
+        }
+        scaleCanvas(context, x = 0, y = 0, scale = 1) {
+            context.translate(x, y);
+            context.scale(scale, scale);
+        }
+    }
+
+    /**
+     * A nimble-styled WaferMap
+     */
+    class WaferMap extends FoundationElement {
+        constructor() {
+            super(...arguments);
+            this.quadrant = WaferMapQuadrant.topLeft;
+            this.orientation = WaferMapOrientation.top;
+            this.maxCharacters = 4;
+            this.dieLabelsHidden = false;
+            this.dieLabelsSuffix = '';
+            this.colorScaleMode = WaferMapColorScaleMode.linear;
+            this.highlightedValues = [];
+            this.dies = [];
+            this.colorScale = {
+                colors: [],
+                values: []
+            };
+            this.renderQueued = false;
+        }
+        connectedCallback() {
+            super.connectedCallback();
+            this.resizeObserver = new ResizeObserver(entries => {
+                const entry = entries[0];
+                if (entry === undefined) {
+                    return;
+                }
+                const { height, width } = entry.contentRect;
+                this.canvasSideLength = Math.min(height, width);
+            });
+            this.resizeObserver.observe(this);
+            this.canvas.addEventListener('wheel', event => event.preventDefault(), {
+                passive: false
+            });
             this.queueRender();
         }
         disconnectedCallback() {
             super.disconnectedCallback();
+            this.canvas.removeEventListener('wheel', event => event.preventDefault());
             this.resizeObserver.unobserve(this);
         }
         /**
@@ -29580,6 +32555,8 @@ Instead styling against the role which is more general and likely a better appro
             this.renderer?.clearCanvas(this.canvasSideLength, this.canvasSideLength);
             this.dataManager = new DataManager(this.dies, this.quadrant, { width: this.canvasSideLength, height: this.canvasSideLength }, this.colorScale, this.highlightedValues, this.colorScaleMode, this.dieLabelsHidden, this.dieLabelsSuffix, this.maxCharacters);
             this.renderer = new RenderingModule(this.dataManager, this.canvas);
+            this.zoomHandler = new ZoomHandler(this.canvas, this.zoomContainer, this.dataManager, this.renderer, this.canvasSideLength);
+            this.zoomHandler.attachZoomBehavior();
             this.renderer.drawWafer();
         }
         quadrantChanged() {
@@ -29615,6 +32592,7 @@ Instead styling against the role which is more general and likely a better appro
                 this.canvas.width = this.canvasSideLength;
                 this.canvas.height = this.canvasSideLength;
             }
+            this.zoomHandler?.resetTransform();
             this.queueRender();
         }
         queueRender() {