<div id="container" class="chart treemap has-legend">
  <div class="outer-container">
    <div class="inner-container">
      <div class="treemap-container">
        <div class="title-container" display="inline-block">
          <text class="title"></text>
        </div>
        <svg>
          <g class="treemap">
            <g>
              <rect class="treerect leafnode"></rect>
              <text>0</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>1</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>2</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>3</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>4</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>5</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>6</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>7</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>8</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>9</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>10</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>11</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>12</text>
            </g>
            <g>
              <rect class="treerect rootnode"></rect>
              <text>NaN</text>
            </g>
          </g>
        </svg>
        <div class="parent-controls">
          <button id="goto-parent">⇪ null</button>
        </div>
      </div>
    </div>
  </div>
  <div class="legend-container" borderbox-on-hover="true">
    <svg id="dragHandles" width="100">
      <g>
        <rect
          id="dragleft"
          class="vertical-drag-handle"
          height="162"
          width="9"
          fill="lightgreen"
          fill-opacity="0"
          cursor="ew-resize"
        ></rect>
        <rect
          id="dragtop"
          class="horizontal-drag-handle"
          height="9"
          width="82"
          fill="lightblue"
          fill-opacity="0"
          cursor="ns-resize"
        ></rect>
        <rect
          id="dragright"
          class="vertical-drag-handle"
          height="162"
          width="9"
          fill="lightgreen"
          fill-opacity="0"
          cursor="ew-resize"
        ></rect>
        <rect
          id="dragbottom"
          class="horizontal-drag-handle"
          height="9"
          width="82"
          fill="lightblue"
          fill-opacity="0"
          cursor="ns-resize"
        ></rect>
        <rect
          id="dragtopleft"
          class="corner-drag-handle top left"
          height="9"
          width="9"
          fill="red"
          fill-opacity="0"
          cursor="nwse-resize"
        ></rect>
        <rect
          id="dragtopright"
          class="corner-drag-handle top right"
          height="9"
          width="9"
          fill="red"
          fill-opacity="0"
          cursor="nesw-resize"
        ></rect>
        <rect
          id="dragbottomright"
          class="corner-drag-handle bottom right"
          height="9"
          width="9"
          fill="red"
          fill-opacity="0"
          cursor="nwse-resize"
        ></rect>
        <rect
          id="dragbottomleft"
          class="corner-drag-handle bottom left"
          height="9"
          width="9"
          fill="red"
          fill-opacity="0"
          cursor="nesw-resize"
        ></rect>
      </g></svg
    ><g class="legend-controls"
      ><span id="up-arrow" class="disabled">▲</span>
      <span id="page-text">1/1</span>
      <span id="down-arrow" class="disabled">▼</span> </g
    ><svg class="legend">
      <g class="legendCells">
        <g class="cell">
          <circle class="swatch"></circle>
          <text class="label">Ke</text>
          <title>Kentucky</title>
        </g>
        <g class="cell">
          <circle class="swatch"></circle>
          <text class="label">Fl</text>
          <title>Florida</title>
        </g>
        <g class="cell">
          <circle class="swatch"></circle>
          <text class="label">Ca</text>
          <title>California</title>
        </g>
        <g class="cell">
          <circle class="swatch"></circle>
          <text class="label">Wi</text>
          <title>Wisconsin</title>
        </g>
        <g class="cell">
          <circle class="swatch"></circle>
          <text class="label">Ut</text>
          <title>Utah</title>
        </g>
        <g class="cell">
          <circle class="swatch"></circle>
          <text class="label">Pe</text>
          <title>Pennsylvania</title>
        </g>
        <g class="cell">
          <circle class="swatch"></circle>
          <text class="label">Te</text>
          <title>Texas</title>
        </g>
        <g class="cell">
          <circle class="swatch"></circle>
          <text class="label">Ne</text>
          <title>New York</title>
        </g>
        <g class="cell">
          <circle class="swatch"></circle>
          <text class="label">Ar</text>
          <title>Arizona</title>
        </g>
        <g class="cell">
          <circle class="swatch"></circle>
          <text class="label">Te</text>
          <title>Tennessee</title>
        </g>
      </g>
    </svg>
  </div>
  <div class="tooltip"><ul id="tooltip-values"></ul></div>
</div>
