<div id="container" class="chart sunburst">
  <div class="outer-container">
    <div class="inner-container">
      <div class="sunburst-container">
        <div class="title-container" display="inline-block">
          <text class="title"></text>
        </div>
        <svg>
          <g class="sunburst">
            <circle fill="none"></circle>
            <text class="parent"></text>
            <g class="segment">0</g>
            <g class="segment">1</g>
            <g class="segment">2</g>
            <g class="segment">3</g>
            <g class="segment">4</g>
            <g class="segment">5</g>
            <g class="segment">6</g>
            <g class="segment">7</g>
            <g class="segment">8</g>
            <g class="segment">9</g>
            <g class="segment">10</g>
            <g class="segment">11</g>
            <g class="segment">12</g>
            <g class="segment">13</g>
            <g class="segment">14</g>
            <g class="segment">15</g>
            <g class="segment">16</g>
            <g class="segment">17</g>
            <g class="segment">18</g>
            <g class="segment">19</g>
            <g class="segment">20</g>
            <g class="segment">21</g>
            <g class="segment">22</g>
            <g class="segment">23</g>
            <g class="segment">24</g>
            <g class="segment">25</g>
            <g class="segment">26</g>
            <g class="segment">27</g>
            <g class="segment">28</g>
            <g class="segment">29</g>
            <g class="segment">30</g>
            <g class="segment">31</g>
            <g class="segment">32</g>
            <g class="segment">33</g>
            <g class="segment">34</g>
            <g class="segment">35</g>
            <g class="segment">36</g>
            <g class="segment">37</g>
            <g class="segment">38</g>
            <g class="segment">39</g>
            <g class="segment">40</g>
            <g class="segment">41</g>
            <g class="segment">42</g>
            <g class="segment">43</g>
            <g class="segment">44</g>
            <g class="segment">45</g>
            <g class="segment">46</g>
            <g class="segment">47</g>
            <g class="segment">48</g>
            <g class="segment">49</g>
            <g class="segment">50</g>
            <g class="segment">51</g>
            <g class="segment">52</g>
            <g class="segment">53</g>
            <g class="segment">54</g>
            <g class="segment">55</g>
            <g class="segment">56</g>
            <g class="segment">57</g>
            <g class="segment">58</g>
            <g class="segment">59</g>
            <g class="segment">60</g>
            <g class="segment">61</g>
            <g class="segment">62</g>
            <g class="segment">63</g>
            <g class="segment">64</g>
            <g class="segment">65</g>
            <g class="segment">66</g>
            <g class="segment">67</g>
            <g class="segment">68</g>
            <g class="segment">69</g>
            <g class="segment">70</g>
            <g class="segment">71</g>
            <g class="segment">72</g>
            <g class="segment">73</g>
            <g class="segment">74</g>
            <g class="segment">75</g>
            <g class="segment">76</g>
            <g class="segment">77</g>
            <g class="segment">78</g>
            <g class="segment">79</g>
            <g class="segment">80</g>
            <g class="segment">81</g>
            <g class="segment">82</g>
            <g class="segment">83</g>
            <g class="segment">84</g>
            <g class="segment">85</g>
            <g class="segment">86</g>
            <g class="segment">87</g>
            <g class="segment">88</g>
            <g class="segment">89</g>
            <g class="segment">90</g>
            <g class="segment">91</g>
            <g class="segment">92</g>
            <g class="segment">93</g>
            <g class="segment">94</g>
            <g class="segment">95</g>
            <g class="segment">96</g>
            <g class="segment">97</g>
            <g class="segment">98</g>
          </g>
        </svg>
      </div>
    </div>
  </div>
  <div class="legend-container" borderbox-on-hover="true">
    <svg id="dragHandles" width="150">
      <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="132"
          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="132"
          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>
