<div id="container" class="chart heatmap">
  <d3fc-group class="cartesian-chart" auto-resize=""
    ><div class="chart-label top-label"></div>
    <div class="x-label bottom-label">Region, State</div>
    <div class="y-label left-label">Category, Sub-Category</div>
    <d3fc-svg class="svg-plot-area plot-area"
      ><svg preserveAspectRatio="none"></svg></d3fc-svg
    ><d3fc-canvas
      class="canvas-plot-area plot-area"
      use-device-pixel-ratio="true"
      ><canvas width="688" height="520"></canvas></d3fc-canvas
    ><d3fc-svg class="x-axis bottom-axis"
      ><svg preserveAspectRatio="none">
        <path class="domain" stroke="#000" fill="none"></path>
        <g
          class="group"
          fill="none"
          font-size="10"
          font-family="sans-serif"
          text-anchor="middle"
        >
          <path class="domain" stroke="#000"></path>
          <g class="tick">
            <path stroke="#000"></path>
            <text fill="#000">Illinois</text>
          </g>
          <g class="tick">
            <path stroke="#000"></path>
            <text fill="#000">Indiana</text>
          </g>
          <g class="tick">
            <path stroke="#000"></path>
            <text fill="#000">Michigan</text>
          </g>
          <g class="tick">
            <path stroke="#000"></path>
            <text fill="#000">Minnesota</text>
          </g>
          <g class="tick">
            <path stroke="#000"></path>
            <text fill="#000">Nebraska</text>
          </g>
          <g class="tick">
            <path stroke="#000"></path>
            <text fill="#000">Texas</text>
          </g>
          <g class="tick">
            <path stroke="#000"></path>
            <text fill="#000">Wisconsin</text>
          </g>
          <g class="tick">
            <path stroke="#000"></path>
            <text fill="#000">Delaware</text>
          </g>
          <g class="tick">
            <path stroke="#000"></path>
            <text fill="#000">New York</text>
          </g>
          <g class="tick">
            <path stroke="#000"></path>
            <text fill="#000">Pennsylvania</text>
          </g>
          <g class="tick">
            <path stroke="#000"></path>
            <text fill="#000">Alabama</text>
          </g>
          <g class="tick">
            <path stroke="#000"></path>
            <text fill="#000">Florida</text>
          </g>
          <g class="tick">
            <path stroke="#000"></path>
            <text fill="#000">Kentucky</text>
          </g>
          <g class="tick">
            <path stroke="#000"></path>
            <text fill="#000">North Carolina</text>
          </g>
          <g class="tick">
            <path stroke="#000"></path>
            <text fill="#000">South Carolina</text>
          </g>
          <g class="tick">
            <path stroke="#000"></path>
            <text fill="#000">Tennessee</text>
          </g>
          <g class="tick">
            <path stroke="#000"></path>
            <text fill="#000">Virginia</text>
          </g>
          <g class="tick">
            <path stroke="#000"></path>
            <text fill="#000">Arizona</text>
          </g>
          <g class="tick">
            <path stroke="#000"></path>
            <text fill="#000">California</text>
          </g>
          <g class="tick">
            <path stroke="#000"></path>
            <text fill="#000">Oregon</text>
          </g>
          <g class="tick">
            <path stroke="#000"></path>
            <text fill="#000">Utah</text>
          </g>
          <g class="tick">
            <path stroke="#000"></path>
            <text fill="#000">Washington</text>
          </g>
        </g>
        <g
          class="group"
          fill="none"
          font-size="10"
          font-family="sans-serif"
          text-anchor="middle"
        >
          <path class="domain" stroke="#000"></path>
          <g class="tick">
            <path stroke="#000"></path>
            <text fill="#000">Central</text>
          </g>
          <g class="tick">
            <path stroke="#000"></path>
            <text fill="#000">East</text>
          </g>
          <g class="tick">
            <path stroke="#000"></path>
            <text fill="#000">South</text>
          </g>
          <g class="tick">
            <path stroke="#000"></path>
            <text fill="#000">West</text>
          </g>
        </g>
      </svg></d3fc-svg
    ><d3fc-svg class="y-axis left-axis"
      ><svg preserveAspectRatio="none">
        <path class="domain" stroke="#000" fill="none"></path>
        <g
          class="group"
          fill="none"
          font-size="10"
          font-family="sans-serif"
          text-anchor="end"
        >
          <path class="domain" stroke="#000"></path>
          <g class="tick">
            <path stroke="#000"></path>
            <text fill="#000">Phones</text>
          </g>
          <g class="tick">
            <path stroke="#000"></path>
            <text fill="#000">Accessories</text>
          </g>
          <g class="tick">
            <path stroke="#000"></path>
            <text fill="#000">Storage</text>
          </g>
          <g class="tick">
            <path stroke="#000"></path>
            <text fill="#000">Paper</text>
          </g>
          <g class="tick">
            <path stroke="#000"></path>
            <text fill="#000">Labels</text>
          </g>
          <g class="tick">
            <path stroke="#000"></path>
            <text fill="#000">Fasteners</text>
          </g>
          <g class="tick">
            <path stroke="#000"></path>
            <text fill="#000">Envelopes</text>
          </g>
          <g class="tick">
            <path stroke="#000"></path>
            <text fill="#000">Binders</text>
          </g>
          <g class="tick">
            <path stroke="#000"></path>
            <text fill="#000">Art</text>
          </g>
          <g class="tick">
            <path stroke="#000"></path>
            <text fill="#000">Appliances</text>
          </g>
          <g class="tick">
            <path stroke="#000"></path>
            <text fill="#000">Tables</text>
          </g>
          <g class="tick">
            <path stroke="#000"></path>
            <text fill="#000">Furnishings</text>
          </g>
          <g class="tick">
            <path stroke="#000"></path>
            <text fill="#000">Chairs</text>
          </g>
          <g class="tick">
            <path stroke="#000"></path>
            <text fill="#000">Bookcases</text>
          </g>
        </g>
        <g
          class="group"
          fill="none"
          font-size="10"
          font-family="sans-serif"
          text-anchor="end"
        >
          <path class="domain" stroke="#000"></path>
          <g class="tick">
            <path stroke="#000"></path>
            <text fill="#000">Technology</text>
          </g>
          <g class="tick">
            <path stroke="#000"></path>
            <text fill="#000">Office Supplies</text>
          </g>
          <g class="tick">
            <path stroke="#000"></path>
            <text fill="#000">Furniture</text>
          </g>
        </g>
      </svg></d3fc-svg
    ></d3fc-group
  >
  <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">0</text>
        </g>
        <g class="tick">
          <path stroke="#000"></path>
          <text fill="#000">220</text>
        </g>
        <g class="tick">
          <path stroke="#000"></path>
          <text fill="#000">110</text>
        </g>
      </g>
    </svg>
  </div>
</div>
