<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>Bookcases</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>Chairs</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>Furnishings</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>Tables</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>Appliances</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>Art</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>Binders</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>Envelopes</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>Fasteners</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>Labels</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>Paper</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>Storage</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>Accessories</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>Phones</text>
            </g>
            <g>
              <rect class="treerect branchnode"></rect>
              <text>Furniture</text>
            </g>
            <g>
              <rect class="treerect branchnode"></rect>
              <text>Office Supplies</text>
            </g>
            <g>
              <rect class="treerect branchnode"></rect>
              <text>Technology</text>
            </g>
            <g>
              <rect class="treerect rootnode"></rect>
              <text>root</text>
            </g>
          </g>
        </svg>
        <div class="parent-controls">
          <button id="goto-parent">⇪ null</button>
        </div>
      </div>
    </div>
  </div>
  <div class="legend-container legend-color">
    <svg>
      <g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
        <g class="bar vertical" fill="#999"><path></path></g>
      </g>
      <g
        id="legend-axis"
        fill="none"
        font-size="10"
        font-family="sans-serif"
        text-anchor="start"
      >
        <path class="domain" stroke="#000"></path>
        <g class="tick">
          <path stroke="#000"></path>
          <text fill="#000">−2,000</text>
        </g>
        <g class="tick">
          <path stroke="#000"></path>
          <text fill="#000">2,000</text>
        </g>
        <g class="tick">
          <path stroke="#000"></path>
          <text fill="#000">0</text>
        </g>
      </g>
    </svg>
  </div>
  <div class="tooltip"><ul id="tooltip-values"></ul></div>
</div>
