<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 leafnode"></rect>
              <text>13</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>14</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>15</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>16</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>17</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>18</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>19</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>20</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>21</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>22</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>23</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>24</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>25</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>26</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>27</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>28</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>29</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>30</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>31</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>32</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>33</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>34</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>35</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>36</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>37</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>38</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>39</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>40</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>41</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>42</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>43</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>44</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>45</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>46</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>47</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>48</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>49</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>50</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>51</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>52</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>53</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>54</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>55</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>56</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>57</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>58</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>59</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>60</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>61</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>62</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>63</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>64</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>65</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>66</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>67</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>68</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>69</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>70</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>71</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>72</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>73</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>74</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>75</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>76</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>77</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>78</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>79</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>80</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>81</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>82</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>83</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>84</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>85</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>86</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>87</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>88</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>89</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>90</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>91</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>92</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>93</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>94</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>95</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>96</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>97</text>
            </g>
            <g>
              <rect class="treerect leafnode"></rect>
              <text>98</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="262"
          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="262"
          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/2</span>
      <span id="down-arrow" class="">▼</span> </g
    ><svg class="legend">
      <g class="legendCells">
        <g class="cell">
          <circle class="swatch"></circle>
          <text class="label">Al</text>
          <title>Alabama</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">Ca</text>
          <title>California</title>
        </g>
        <g class="cell">
          <circle class="swatch"></circle>
          <text class="label">De</text>
          <title>Delaware</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">Il</text>
          <title>Illinois</title>
        </g>
        <g class="cell">
          <circle class="swatch"></circle>
          <text class="label">In</text>
          <title>Indiana</title>
        </g>
        <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">Mi</text>
          <title>Michigan</title>
        </g>
        <g class="cell">
          <circle class="swatch"></circle>
          <text class="label">Mi</text>
          <title>Minnesota</title>
        </g>
        <g class="cell">
          <circle class="swatch"></circle>
          <text class="label">Ne</text>
          <title>Nebraska</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">No</text>
          <title>North Carolina</title>
        </g>
        <g class="cell">
          <circle class="swatch"></circle>
          <text class="label">Or</text>
          <title>Oregon</title>
        </g>
        <g class="cell">
          <circle class="swatch"></circle>
          <text class="label">Pe</text>
          <title>Pennsylvania</title>
        </g>
      </g>
    </svg>
  </div>
  <div class="tooltip"><ul id="tooltip-values"></ul></div>
</div>
