search

posit-dev / great-tables

Make awesome display tables using Python.
https://posit-dev.github.io/great-tables/
MIT License
1.9k stars 72 forks source link

Rendering issue with `GT.as_raw_html()` for `nanoplot` #429

Closed jrycw closed 2 months ago

jrycw commented 2 months ago

I've noticed that GT.as_raw_html() sometimes doesn't render correctly in the browser when plotting with nanoplot. For instance, consider the example provided in the documentation:

from great_tables import GT
import polars as pl

random_numbers_df = pl.DataFrame(
    {
        "i": range(1, 5),
        "lines": [
            "20 23 6 7 37 23 21 4 7 16",
            "2.3 6.8 9.2 2.42 3.5 12.1 5.3 3.6 7.2 3.74",
            "-12 -5 6 3.7 0 8 -7.4",
            "2 0 15 7 8 10 1 24 17 13 6",
        ],
    }
).with_columns(bars=pl.col("lines"))

gt = (
    GT(random_numbers_df, rowname_col="i")
    .fmt_nanoplot(columns="lines")
    .fmt_nanoplot(columns="bars", plot_type="bar")
)

with open("a.html", "w") as f:
    f.write(gt.as_raw_html())

The result appears incorrectly rendered when viewing a.html in the browser. image

Is this a bug, or is there something I might have overlooked?

machow commented 2 months ago

Oh strange, are you saying the issue is the last bar entry not showing? (what would the last cell of bars, on the bottom right)

jrycw commented 2 months ago

Yes, the last cell of the bars is empty, but it seems that v0.11.0 may have resolved the issue. The nanoplot now looks correct. Here are the correct HTML and nanoplot for reference.

image

<div id="pmbemypxqk" style="padding-left:0px;padding-right:0px;padding-top:10px;padding-bottom:10px;overflow-x:auto;overflow-y:auto;width:auto;height:auto;">
<style>
#pmbemypxqk table {
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', 'Fira Sans', 'Droid Sans', Arial, sans-serif;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }

#pmbemypxqk thead, tbody, tfoot, tr, td, th { border-style: none; }
 tr { background-color: transparent; }
#pmbemypxqk p { margin: 0; padding: 0; }
 #pmbemypxqk .gt_table { display: table; border-collapse: collapse; line-height: normal; margin-left: auto; margin-right: auto; color: #333333; font-size: 16px; font-weight: normal; font-style: normal; background-color: #FFFFFF; width: auto; border-top-style: solid; border-top-width: 2px; border-top-color: #A8A8A8; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #A8A8A8; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; }
 #pmbemypxqk .gt_caption { padding-top: 4px; padding-bottom: 4px; }
 #pmbemypxqk .gt_title { color: #333333; font-size: 125%; font-weight: initial; padding-top: 4px; padding-bottom: 4px; padding-left: 5px; padding-right: 5px; border-bottom-color: #FFFFFF; border-bottom-width: 0; }
 #pmbemypxqk .gt_subtitle { color: #333333; font-size: 85%; font-weight: initial; padding-top: 3px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; border-top-color: #FFFFFF; border-top-width: 0; }
 #pmbemypxqk .gt_heading { background-color: #FFFFFF; text-align: center; border-bottom-color: #FFFFFF; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
 #pmbemypxqk .gt_bottom_border { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
 #pmbemypxqk .gt_col_headings { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
 #pmbemypxqk .gt_col_heading { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; overflow-x: hidden; }
 #pmbemypxqk .gt_column_spanner_outer { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; padding-top: 0; padding-bottom: 0; padding-left: 4px; padding-right: 4px; }
 #pmbemypxqk .gt_column_spanner_outer:first-child { padding-left: 0; }
 #pmbemypxqk .gt_column_spanner_outer:last-child { padding-right: 0; }
 #pmbemypxqk .gt_column_spanner { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; overflow-x: hidden; display: inline-block; width: 100%; }
 #pmbemypxqk .gt_spanner_row { border-bottom-style: hidden; }
 #pmbemypxqk .gt_group_heading { padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; text-align: left; }
 #pmbemypxqk .gt_empty_group_heading { padding: 0.5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: middle; }
 #pmbemypxqk .gt_from_md> :first-child { margin-top: 0; }
 #pmbemypxqk .gt_from_md> :last-child { margin-bottom: 0; }
 #pmbemypxqk .gt_row { padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; margin: 10px; border-top-style: solid; border-top-width: 1px; border-top-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; overflow-x: hidden; }
 #pmbemypxqk .gt_stub { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 5px; padding-right: 5px; }
 #pmbemypxqk .gt_stub_row_group { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 5px; padding-right: 5px; vertical-align: top; }
 #pmbemypxqk .gt_row_group_first td { border-top-width: 2px; }
 #pmbemypxqk .gt_row_group_first th { border-top-width: 2px; }
 #pmbemypxqk .gt_table_body { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
 #pmbemypxqk .gt_sourcenotes { color: #333333; background-color: #FFFFFF; border-bottom-style: none; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; }
 #pmbemypxqk .gt_sourcenote { font-size: 90%; padding-top: 4px; padding-bottom: 4px; padding-left: 5px; padding-right: 5px; text-align: left; }
 #pmbemypxqk .gt_left { text-align: left; }
 #pmbemypxqk .gt_center { text-align: center; }
 #pmbemypxqk .gt_right { text-align: right; font-variant-numeric: tabular-nums; }
 #pmbemypxqk .gt_font_normal { font-weight: normal; }
 #pmbemypxqk .gt_font_bold { font-weight: bold; }
 #pmbemypxqk .gt_font_italic { font-style: italic; }
 #pmbemypxqk .gt_super { font-size: 65%; }
 #pmbemypxqk .gt_footnote_marks { font-size: 75%; vertical-align: 0.4em; position: initial; }
 #pmbemypxqk .gt_asterisk { font-size: 100%; vertical-align: 0; }

</style>
<table class="gt_table" data-quarto-disable-processing="false" data-quarto-bootstrap="false">
<thead>

<tr class="gt_col_headings">
  <th class="gt_col_heading gt_columns_bottom_border gt_left" rowspan="1" colspan="1" scope="col" id=""></th>
  <th class="gt_col_heading gt_columns_bottom_border gt_left" rowspan="1" colspan="1" scope="col" id="lines">lines</th>
  <th class="gt_col_heading gt_columns_bottom_border gt_left" rowspan="1" colspan="1" scope="col" id="bars">bars</th>
</tr>
</thead>
<tbody class="gt_table_body">
  <tr>
    <th class="gt_row gt_left gt_stub">1</th>
    <td class="gt_row gt_left"><div><svg role="img" viewBox="0 0 600 130" style="height: 2em; margin-left: auto; margin-right: auto; font-size: inherit; overflow: visible; vertical-align: middle; position:relative;"><defs><pattern id="area_pattern" width="8" height="8" patternUnits="userSpaceOnUse"><path class="pattern-line" d="M 0,8 l 8,-8 M -1,1 l 4,-4 M 6,10 l 4,-4" stroke="#FF0000" stroke-width="1.5" stroke-linecap="round" shape-rendering="geometricPrecision"></path></pattern></defs><style> text { font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace; stroke-width: 0.15em; paint-order: stroke; stroke-linejoin: round; cursor: default; } .vert-line:hover rect { fill: #911EB4; fill-opacity: 40%; stroke: #FFFFFF60; color: red; } .vert-line:hover text { stroke: white; fill: #212427; } .horizontal-line:hover text {stroke: white; fill: #212427; } .ref-line:hover rect { stroke: #FFFFFF60; } .ref-line:hover line { stroke: #FF0000; } .ref-line:hover text { stroke: white; fill: #212427; } .y-axis-line:hover rect { fill: #EDEDED; fill-opacity: 60%; stroke: #FFFFFF60; color: red; } .y-axis-line:hover text { stroke: white; stroke-width: 0.20em; fill: #1A1C1F; } </style><path class="area-closed" d="M 50.0,66.51515151515152 105.55555555555554,57.42424242424242 161.1111111111111,108.93939393939394 216.66666666666666,105.9090909090909 272.2222222222222,15.0 327.77777777777777,57.42424242424242 383.3333333333333,63.484848484848484 438.88888888888886,115.0 494.4444444444444,105.9090909090909 550.0,78.63636363636363 550.0,125 50.0,125 Z" stroke="transparent" stroke-width="2" fill="url(#area_pattern)" fill-opacity="0.7"></path><path d="M 50.0,66.51515151515152 C 75.0,66.51515151515152 80.55555555555554,57.42424242424242 105.55555555555554,57.42424242424242 C 130.55555555555554,57.42424242424242 136.1111111111111,108.93939393939394 161.1111111111111,108.93939393939394 C 186.1111111111111,108.93939393939394 191.66666666666666,105.9090909090909 216.66666666666666,105.9090909090909 C 241.66666666666666,105.9090909090909 247.22222222222217,15.0 272.2222222222222,15.0 C 297.2222222222222,15.0 302.77777777777777,57.42424242424242 327.77777777777777,57.42424242424242 C 352.77777777777777,57.42424242424242 358.3333333333333,63.484848484848484 383.3333333333333,63.484848484848484 C 408.3333333333333,63.484848484848484 413.88888888888886,115.0 438.88888888888886,115.0 C 463.88888888888886,115.0 469.4444444444444,105.9090909090909 494.4444444444444,105.9090909090909 C 519.4444444444443,105.9090909090909 525.0,78.63636363636363 550.0,78.63636363636363" stroke="#4682B4" stroke-width="8" fill="none"></path><circle cx="50.0" cy="66.51515151515152" r="10" stroke="#FFFFFF" stroke-width="4" fill="#FF0000"></circle><circle cx="105.55555555555554" cy="57.42424242424242" r="10" stroke="#FFFFFF" stroke-width="4" fill="#FF0000"></circle><circle cx="161.1111111111111" cy="108.93939393939394" r="10" stroke="#FFFFFF" stroke-width="4" fill="#FF0000"></circle><circle cx="216.66666666666666" cy="105.9090909090909" r="10" stroke="#FFFFFF" stroke-width="4" fill="#FF0000"></circle><circle cx="272.2222222222222" cy="15.0" r="10" stroke="#FFFFFF" stroke-width="4" fill="#FF0000"></circle><circle cx="327.77777777777777" cy="57.42424242424242" r="10" stroke="#FFFFFF" stroke-width="4" fill="#FF0000"></circle><circle cx="383.3333333333333" cy="63.484848484848484" r="10" stroke="#FFFFFF" stroke-width="4" fill="#FF0000"></circle><circle cx="438.88888888888886" cy="115.0" r="10" stroke="#FFFFFF" stroke-width="4" fill="#FF0000"></circle><circle cx="494.4444444444444" cy="105.9090909090909" r="10" stroke="#FFFFFF" stroke-width="4" fill="#FF0000"></circle><circle cx="550.0" cy="78.63636363636363" r="10" stroke="#FFFFFF" stroke-width="4" fill="#FF0000"></circle><g class="y-axis-line"><rect x="0" y="0" width="65" height="130" stroke="transparent" stroke-width="0" fill="transparent"></rect><text x="0" y="19.0" fill="transparent" stroke="transparent" font-size="25">37</text><text x="0" y="126.0" fill="transparent" stroke="transparent" font-size="25">4</text></g><g class="vert-line"><rect x="40.0" y="0" width="20" height="130" stroke="transparent" stroke-width="12" fill="transparent"></rect><text x="60.0" y="20" fill="transparent" stroke="transparent" font-size="30px">20</text></g><g class="vert-line"><rect x="95.55555555555554" y="0" width="20" height="130" stroke="transparent" stroke-width="12" fill="transparent"></rect><text x="115.55555555555554" y="20" fill="transparent" stroke="transparent" font-size="30px">23</text></g><g class="vert-line"><rect x="151.1111111111111" y="0" width="20" height="130" stroke="transparent" stroke-width="12" fill="transparent"></rect><text x="171.1111111111111" y="20" fill="transparent" stroke="transparent" font-size="30px">6</text></g><g class="vert-line"><rect x="206.66666666666666" y="0" width="20" height="130" stroke="transparent" stroke-width="12" fill="transparent"></rect><text x="226.66666666666666" y="20" fill="transparent" stroke="transparent" font-size="30px">7</text></g><g class="vert-line"><rect x="262.2222222222222" y="0" width="20" height="130" stroke="transparent" stroke-width="12" fill="transparent"></rect><text x="282.2222222222222" y="20" fill="transparent" stroke="transparent" font-size="30px">37</text></g><g class="vert-line"><rect x="317.77777777777777" y="0" width="20" height="130" stroke="transparent" stroke-width="12" fill="transparent"></rect><text x="337.77777777777777" y="20" fill="transparent" stroke="transparent" font-size="30px">23</text></g><g class="vert-line"><rect x="373.3333333333333" y="0" width="20" height="130" stroke="transparent" stroke-width="12" fill="transparent"></rect><text x="393.3333333333333" y="20" fill="transparent" stroke="transparent" font-size="30px">21</text></g><g class="vert-line"><rect x="428.88888888888886" y="0" width="20" height="130" stroke="transparent" stroke-width="12" fill="transparent"></rect><text x="448.88888888888886" y="20" fill="transparent" stroke="transparent" font-size="30px">4</text></g><g class="vert-line"><rect x="484.4444444444444" y="0" width="20" height="130" stroke="transparent" stroke-width="12" fill="transparent"></rect><text x="504.4444444444444" y="20" fill="transparent" stroke="transparent" font-size="30px">7</text></g><g class="vert-line"><rect x="540.0" y="0" width="20" height="130" stroke="transparent" stroke-width="12" fill="transparent"></rect><text x="560.0" y="20" fill="transparent" stroke="transparent" font-size="30px">16</text></g></svg></div></td>
    <td class="gt_row gt_left"><div><svg role="img" viewBox="0 0 600 130" style="height: 2em; margin-left: auto; margin-right: auto; font-size: inherit; overflow: visible; vertical-align: middle; position:relative;"><defs><pattern id="area_pattern" width="8" height="8" patternUnits="userSpaceOnUse"><path class="pattern-line" d="M 0,8 l 8,-8 M -1,1 l 4,-4 M 6,10 l 4,-4" stroke="#FF0000" stroke-width="1.5" stroke-linecap="round" shape-rendering="geometricPrecision"></path></pattern></defs><style> text { font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace; stroke-width: 0.15em; paint-order: stroke; stroke-linejoin: round; cursor: default; } .vert-line:hover rect { fill: #911EB4; fill-opacity: 40%; stroke: #FFFFFF60; color: red; } .vert-line:hover text { stroke: white; fill: #212427; } .horizontal-line:hover text {stroke: white; fill: #212427; } .ref-line:hover rect { stroke: #FFFFFF60; } .ref-line:hover line { stroke: #FF0000; } .ref-line:hover text { stroke: white; fill: #212427; } .y-axis-line:hover rect { fill: #EDEDED; fill-opacity: 60%; stroke: #FFFFFF60; color: red; } .y-axis-line:hover text { stroke: white; stroke-width: 0.20em; fill: #1A1C1F; } </style><line x1="22.5" y1="115.0" x2="577.5" y2="115.0" stroke="#BFBFBF" stroke-width="4"></line><rect x="30.0" y="60.945945945945944" width="40" height="54.054054054054056" stroke="#3290CC" stroke-width="4" fill="#3FB5FF"></rect><rect x="85.55555555555554" y="52.83783783783784" width="40" height="62.16216216216216" stroke="#3290CC" stroke-width="4" fill="#3FB5FF"></rect><rect x="141.1111111111111" y="98.78378378378379" width="40" height="16.21621621621621" stroke="#3290CC" stroke-width="4" fill="#3FB5FF"></rect><rect x="196.66666666666666" y="96.08108108108108" width="40" height="18.91891891891892" stroke="#3290CC" stroke-width="4" fill="#3FB5FF"></rect><rect x="252.22222222222217" y="15.0" width="40" height="100.0" stroke="#3290CC" stroke-width="4" fill="#3FB5FF"></rect><rect x="307.77777777777777" y="52.83783783783784" width="40" height="62.16216216216216" stroke="#3290CC" stroke-width="4" fill="#3FB5FF"></rect><rect x="363.3333333333333" y="58.24324324324324" width="40" height="56.75675675675676" stroke="#3290CC" stroke-width="4" fill="#3FB5FF"></rect><rect x="418.88888888888886" y="104.1891891891892" width="40" height="10.810810810810807" stroke="#3290CC" stroke-width="4" fill="#3FB5FF"></rect><rect x="474.4444444444444" y="96.08108108108108" width="40" height="18.91891891891892" stroke="#3290CC" stroke-width="4" fill="#3FB5FF"></rect><rect x="530.0" y="71.75675675675676" width="40" height="43.24324324324324" stroke="#3290CC" stroke-width="4" fill="#3FB5FF"></rect><g class="y-axis-line"><rect x="0" y="0" width="65" height="130" stroke="transparent" stroke-width="0" fill="transparent"></rect><text x="0" y="19.0" fill="transparent" stroke="transparent" font-size="25">37</text><text x="0" y="126.0" fill="transparent" stroke="transparent" font-size="25">0</text></g><g class="vert-line"><rect x="40.0" y="0" width="20" height="130" stroke="transparent" stroke-width="12" fill="transparent"></rect><text x="60.0" y="20" fill="transparent" stroke="transparent" font-size="30px">20</text></g><g class="vert-line"><rect x="95.55555555555554" y="0" width="20" height="130" stroke="transparent" stroke-width="12" fill="transparent"></rect><text x="115.55555555555554" y="20" fill="transparent" stroke="transparent" font-size="30px">23</text></g><g class="vert-line"><rect x="151.1111111111111" y="0" width="20" height="130" stroke="transparent" stroke-width="12" fill="transparent"></rect><text x="171.1111111111111" y="20" fill="transparent" stroke="transparent" font-size="30px">6</text></g><g class="vert-line"><rect x="206.66666666666666" y="0" width="20" height="130" stroke="transparent" stroke-width="12" fill="transparent"></rect><text x="226.66666666666666" y="20" fill="transparent" stroke="transparent" font-size="30px">7</text></g><g class="vert-line"><rect x="262.2222222222222" y="0" width="20" height="130" stroke="transparent" stroke-width="12" fill="transparent"></rect><text x="282.2222222222222" y="20" fill="transparent" stroke="transparent" font-size="30px">37</text></g><g class="vert-line"><rect x="317.77777777777777" y="0" width="20" height="130" stroke="transparent" stroke-width="12" fill="transparent"></rect><text x="337.77777777777777" y="20" fill="transparent" stroke="transparent" font-size="30px">23</text></g><g class="vert-line"><rect x="373.3333333333333" y="0" width="20" height="130" stroke="transparent" stroke-width="12" fill="transparent"></rect><text x="393.3333333333333" y="20" fill="transparent" stroke="transparent" font-size="30px">21</text></g><g class="vert-line"><rect x="428.88888888888886" y="0" width="20" height="130" stroke="transparent" stroke-width="12" fill="transparent"></rect><text x="448.88888888888886" y="20" fill="transparent" stroke="transparent" font-size="30px">4</text></g><g class="vert-line"><rect x="484.4444444444444" y="0" width="20" height="130" stroke="transparent" stroke-width="12" fill="transparent"></rect><text x="504.4444444444444" y="20" fill="transparent" stroke="transparent" font-size="30px">7</text></g><g class="vert-line"><rect x="540.0" y="0" width="20" height="130" stroke="transparent" stroke-width="12" fill="transparent"></rect><text x="560.0" y="20" fill="transparent" stroke="transparent" font-size="30px">16</text></g></svg></div></td>
  </tr>
  <tr>
    <th class="gt_row gt_left gt_stub">2</th>
    <td class="gt_row gt_left"><div><svg role="img" viewBox="0 0 600 130" style="height: 2em; margin-left: auto; margin-right: auto; font-size: inherit; overflow: visible; vertical-align: middle; position:relative;"><defs><pattern id="area_pattern" width="8" height="8" patternUnits="userSpaceOnUse"><path class="pattern-line" d="M 0,8 l 8,-8 M -1,1 l 4,-4 M 6,10 l 4,-4" stroke="#FF0000" stroke-width="1.5" stroke-linecap="round" shape-rendering="geometricPrecision"></path></pattern></defs><style> text { font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace; stroke-width: 0.15em; paint-order: stroke; stroke-linejoin: round; cursor: default; } .vert-line:hover rect { fill: #911EB4; fill-opacity: 40%; stroke: #FFFFFF60; color: red; } .vert-line:hover text { stroke: white; fill: #212427; } .horizontal-line:hover text {stroke: white; fill: #212427; } .ref-line:hover rect { stroke: #FFFFFF60; } .ref-line:hover line { stroke: #FF0000; } .ref-line:hover text { stroke: white; fill: #212427; } .y-axis-line:hover rect { fill: #EDEDED; fill-opacity: 60%; stroke: #FFFFFF60; color: red; } .y-axis-line:hover text { stroke: white; stroke-width: 0.20em; fill: #1A1C1F; } </style><path class="area-closed" d="M 50.0,115.0 105.55555555555554,69.08163265306123 161.1111111111111,44.591836734693885 216.66666666666666,113.77551020408163 272.2222222222222,102.75510204081633 327.77777777777777,15.0 383.3333333333333,84.38775510204083 438.88888888888886,101.73469387755102 494.4444444444444,65.0 550.0,100.3061224489796 550.0,125 50.0,125 Z" stroke="transparent" stroke-width="2" fill="url(#area_pattern)" fill-opacity="0.7"></path><path d="M 50.0,115.0 C 75.0,115.0 80.55555555555554,69.08163265306123 105.55555555555554,69.08163265306123 C 130.55555555555554,69.08163265306123 136.1111111111111,44.591836734693885 161.1111111111111,44.591836734693885 C 186.1111111111111,44.591836734693885 191.66666666666666,113.77551020408163 216.66666666666666,113.77551020408163 C 241.66666666666666,113.77551020408163 247.22222222222217,102.75510204081633 272.2222222222222,102.75510204081633 C 297.2222222222222,102.75510204081633 302.77777777777777,15.0 327.77777777777777,15.0 C 352.77777777777777,15.0 358.3333333333333,84.38775510204083 383.3333333333333,84.38775510204083 C 408.3333333333333,84.38775510204083 413.88888888888886,101.73469387755102 438.88888888888886,101.73469387755102 C 463.88888888888886,101.73469387755102 469.4444444444444,65.0 494.4444444444444,65.0 C 519.4444444444443,65.0 525.0,100.3061224489796 550.0,100.3061224489796" stroke="#4682B4" stroke-width="8" fill="none"></path><circle cx="50.0" cy="115.0" r="10" stroke="#FFFFFF" stroke-width="4" fill="#FF0000"></circle><circle cx="105.55555555555554" cy="69.08163265306123" r="10" stroke="#FFFFFF" stroke-width="4" fill="#FF0000"></circle><circle cx="161.1111111111111" cy="44.591836734693885" r="10" stroke="#FFFFFF" stroke-width="4" fill="#FF0000"></circle><circle cx="216.66666666666666" cy="113.77551020408163" r="10" stroke="#FFFFFF" stroke-width="4" fill="#FF0000"></circle><circle cx="272.2222222222222" cy="102.75510204081633" r="10" stroke="#FFFFFF" stroke-width="4" fill="#FF0000"></circle><circle cx="327.77777777777777" cy="15.0" r="10" stroke="#FFFFFF" stroke-width="4" fill="#FF0000"></circle><circle cx="383.3333333333333" cy="84.38775510204083" r="10" stroke="#FFFFFF" stroke-width="4" fill="#FF0000"></circle><circle cx="438.88888888888886" cy="101.73469387755102" r="10" stroke="#FFFFFF" stroke-width="4" fill="#FF0000"></circle><circle cx="494.4444444444444" cy="65.0" r="10" stroke="#FFFFFF" stroke-width="4" fill="#FF0000"></circle><circle cx="550.0" cy="100.3061224489796" r="10" stroke="#FFFFFF" stroke-width="4" fill="#FF0000"></circle><g class="y-axis-line"><rect x="0" y="0" width="65" height="130" stroke="transparent" stroke-width="0" fill="transparent"></rect><text x="0" y="19.0" fill="transparent" stroke="transparent" font-size="25">12.1</text><text x="0" y="126.0" fill="transparent" stroke="transparent" font-size="25">2.30</text></g><g class="vert-line"><rect x="40.0" y="0" width="20" height="130" stroke="transparent" stroke-width="12" fill="transparent"></rect><text x="60.0" y="20" fill="transparent" stroke="transparent" font-size="30px">2.30</text></g><g class="vert-line"><rect x="95.55555555555554" y="0" width="20" height="130" stroke="transparent" stroke-width="12" fill="transparent"></rect><text x="115.55555555555554" y="20" fill="transparent" stroke="transparent" font-size="30px">6.80</text></g><g class="vert-line"><rect x="151.1111111111111" y="0" width="20" height="130" stroke="transparent" stroke-width="12" fill="transparent"></rect><text x="171.1111111111111" y="20" fill="transparent" stroke="transparent" font-size="30px">9.20</text></g><g class="vert-line"><rect x="206.66666666666666" y="0" width="20" height="130" stroke="transparent" stroke-width="12" fill="transparent"></rect><text x="226.66666666666666" y="20" fill="transparent" stroke="transparent" font-size="30px">2.42</text></g><g class="vert-line"><rect x="262.2222222222222" y="0" width="20" height="130" stroke="transparent" stroke-width="12" fill="transparent"></rect><text x="282.2222222222222" y="20" fill="transparent" stroke="transparent" font-size="30px">3.50</text></g><g class="vert-line"><rect x="317.77777777777777" y="0" width="20" height="130" stroke="transparent" stroke-width="12" fill="transparent"></rect><text x="337.77777777777777" y="20" fill="transparent" stroke="transparent" font-size="30px">12.1</text></g><g class="vert-line"><rect x="373.3333333333333" y="0" width="20" height="130" stroke="transparent" stroke-width="12" fill="transparent"></rect><text x="393.3333333333333" y="20" fill="transparent" stroke="transparent" font-size="30px">5.30</text></g><g class="vert-line"><rect x="428.88888888888886" y="0" width="20" height="130" stroke="transparent" stroke-width="12" fill="transparent"></rect><text x="448.88888888888886" y="20" fill="transparent" stroke="transparent" font-size="30px">3.60</text></g><g class="vert-line"><rect x="484.4444444444444" y="0" width="20" height="130" stroke="transparent" stroke-width="12" fill="transparent"></rect><text x="504.4444444444444" y="20" fill="transparent" stroke="transparent" font-size="30px">7.20</text></g><g class="vert-line"><rect x="540.0" y="0" width="20" height="130" stroke="transparent" stroke-width="12" fill="transparent"></rect><text x="560.0" y="20" fill="transparent" stroke="transparent" font-size="30px">3.74</text></g></svg></div></td>
    <td class="gt_row gt_left"><div><svg role="img" viewBox="0 0 600 130" style="height: 2em; margin-left: auto; margin-right: auto; font-size: inherit; overflow: visible; vertical-align: middle; position:relative;"><defs><pattern id="area_pattern" width="8" height="8" patternUnits="userSpaceOnUse"><path class="pattern-line" d="M 0,8 l 8,-8 M -1,1 l 4,-4 M 6,10 l 4,-4" stroke="#FF0000" stroke-width="1.5" stroke-linecap="round" shape-rendering="geometricPrecision"></path></pattern></defs><style> text { font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace; stroke-width: 0.15em; paint-order: stroke; stroke-linejoin: round; cursor: default; } .vert-line:hover rect { fill: #911EB4; fill-opacity: 40%; stroke: #FFFFFF60; color: red; } .vert-line:hover text { stroke: white; fill: #212427; } .horizontal-line:hover text {stroke: white; fill: #212427; } .ref-line:hover rect { stroke: #FFFFFF60; } .ref-line:hover line { stroke: #FF0000; } .ref-line:hover text { stroke: white; fill: #212427; } .y-axis-line:hover rect { fill: #EDEDED; fill-opacity: 60%; stroke: #FFFFFF60; color: red; } .y-axis-line:hover text { stroke: white; stroke-width: 0.20em; fill: #1A1C1F; } </style><line x1="22.5" y1="115.0" x2="577.5" y2="115.0" stroke="#BFBFBF" stroke-width="4"></line><rect x="30.0" y="95.99173553719008" width="40" height="19.00826446280992" stroke="#3290CC" stroke-width="4" fill="#3FB5FF"></rect><rect x="85.55555555555554" y="58.80165289256198" width="40" height="56.19834710743802" stroke="#3290CC" stroke-width="4" fill="#3FB5FF"></rect><rect x="141.1111111111111" y="38.96694214876034" width="40" height="76.03305785123966" stroke="#3290CC" stroke-width="4" fill="#3FB5FF"></rect><rect x="196.66666666666666" y="95.0" width="40" height="20.0" stroke="#3290CC" stroke-width="4" fill="#3FB5FF"></rect><rect x="252.22222222222217" y="86.07438016528926" width="40" height="28.925619834710744" stroke="#3290CC" stroke-width="4" fill="#3FB5FF"></rect><rect x="307.77777777777777" y="15.0" width="40" height="100.0" stroke="#3290CC" stroke-width="4" fill="#3FB5FF"></rect><rect x="363.3333333333333" y="71.19834710743802" width="40" height="43.801652892561975" stroke="#3290CC" stroke-width="4" fill="#3FB5FF"></rect><rect x="418.88888888888886" y="85.24793388429752" width="40" height="29.752066115702476" stroke="#3290CC" stroke-width="4" fill="#3FB5FF"></rect><rect x="474.4444444444444" y="55.49586776859504" width="40" height="59.50413223140496" stroke="#3290CC" stroke-width="4" fill="#3FB5FF"></rect><rect x="530.0" y="84.0909090909091" width="40" height="30.909090909090907" stroke="#3290CC" stroke-width="4" fill="#3FB5FF"></rect><g class="y-axis-line"><rect x="0" y="0" width="65" height="130" stroke="transparent" stroke-width="0" fill="transparent"></rect><text x="0" y="19.0" fill="transparent" stroke="transparent" font-size="25">12.1</text><text x="0" y="126.0" fill="transparent" stroke="transparent" font-size="25">0</text></g><g class="vert-line"><rect x="40.0" y="0" width="20" height="130" stroke="transparent" stroke-width="12" fill="transparent"></rect><text x="60.0" y="20" fill="transparent" stroke="transparent" font-size="30px">2.30</text></g><g class="vert-line"><rect x="95.55555555555554" y="0" width="20" height="130" stroke="transparent" stroke-width="12" fill="transparent"></rect><text x="115.55555555555554" y="20" fill="transparent" stroke="transparent" font-size="30px">6.80</text></g><g class="vert-line"><rect x="151.1111111111111" y="0" width="20" height="130" stroke="transparent" stroke-width="12" fill="transparent"></rect><text x="171.1111111111111" y="20" fill="transparent" stroke="transparent" font-size="30px">9.20</text></g><g class="vert-line"><rect x="206.66666666666666" y="0" width="20" height="130" stroke="transparent" stroke-width="12" fill="transparent"></rect><text x="226.66666666666666" y="20" fill="transparent" stroke="transparent" font-size="30px">2.42</text></g><g class="vert-line"><rect x="262.2222222222222" y="0" width="20" height="130" stroke="transparent" stroke-width="12" fill="transparent"></rect><text x="282.2222222222222" y="20" fill="transparent" stroke="transparent" font-size="30px">3.50</text></g><g class="vert-line"><rect x="317.77777777777777" y="0" width="20" height="130" stroke="transparent" stroke-width="12" fill="transparent"></rect><text x="337.77777777777777" y="20" fill="transparent" stroke="transparent" font-size="30px">12.1</text></g><g class="vert-line"><rect x="373.3333333333333" y="0" width="20" height="130" stroke="transparent" stroke-width="12" fill="transparent"></rect><text x="393.3333333333333" y="20" fill="transparent" stroke="transparent" font-size="30px">5.30</text></g><g class="vert-line"><rect x="428.88888888888886" y="0" width="20" height="130" stroke="transparent" stroke-width="12" fill="transparent"></rect><text x="448.88888888888886" y="20" fill="transparent" stroke="transparent" font-size="30px">3.60</text></g><g class="vert-line"><rect x="484.4444444444444" y="0" width="20" height="130" stroke="transparent" stroke-width="12" fill="transparent"></rect><text x="504.4444444444444" y="20" fill="transparent" stroke="transparent" font-size="30px">7.20</text></g><g class="vert-line"><rect x="540.0" y="0" width="20" height="130" stroke="transparent" stroke-width="12" fill="transparent"></rect><text x="560.0" y="20" fill="transparent" stroke="transparent" font-size="30px">3.74</text></g></svg></div></td>
  </tr>
  <tr>
    <th class="gt_row gt_left gt_stub">3</th>
    <td class="gt_row gt_left"><div><svg role="img" viewBox="0 0 450 130" style="height: 2em; margin-left: auto; margin-right: auto; font-size: inherit; overflow: visible; vertical-align: middle; position:relative;"><defs><pattern id="area_pattern" width="8" height="8" patternUnits="userSpaceOnUse"><path class="pattern-line" d="M 0,8 l 8,-8 M -1,1 l 4,-4 M 6,10 l 4,-4" stroke="#FF0000" stroke-width="1.5" stroke-linecap="round" shape-rendering="geometricPrecision"></path></pattern></defs><style> text { font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace; stroke-width: 0.15em; paint-order: stroke; stroke-linejoin: round; cursor: default; } .vert-line:hover rect { fill: #911EB4; fill-opacity: 40%; stroke: #FFFFFF60; color: red; } .vert-line:hover text { stroke: white; fill: #212427; } .horizontal-line:hover text {stroke: white; fill: #212427; } .ref-line:hover rect { stroke: #FFFFFF60; } .ref-line:hover line { stroke: #FF0000; } .ref-line:hover text { stroke: white; fill: #212427; } .y-axis-line:hover rect { fill: #EDEDED; fill-opacity: 60%; stroke: #FFFFFF60; color: red; } .y-axis-line:hover text { stroke: white; stroke-width: 0.20em; fill: #1A1C1F; } </style><path class="area-closed" d="M 50.0,115.0 108.33333333333333,80.0 166.66666666666666,25.0 225.0,36.50000000000001 283.3333333333333,55.0 341.66666666666663,15.0 400.0,92.0 400.0,125 50.0,125 Z" stroke="transparent" stroke-width="2" fill="url(#area_pattern)" fill-opacity="0.7"></path><path d="M 50.0,115.0 C 75.0,115.0 83.33333333333333,80.0 108.33333333333333,80.0 C 133.33333333333331,80.0 141.66666666666666,25.0 166.66666666666666,25.0 C 191.66666666666666,25.0 200.0,36.50000000000001 225.0,36.50000000000001 C 250.0,36.50000000000001 258.3333333333333,55.0 283.3333333333333,55.0 C 308.3333333333333,55.0 316.66666666666663,15.0 341.66666666666663,15.0 C 366.66666666666663,15.0 375.0,92.0 400.0,92.0" stroke="#4682B4" stroke-width="8" fill="none"></path><circle cx="50.0" cy="115.0" r="10" stroke="#FFFFFF" stroke-width="4" fill="#FF0000"></circle><circle cx="108.33333333333333" cy="80.0" r="10" stroke="#FFFFFF" stroke-width="4" fill="#FF0000"></circle><circle cx="166.66666666666666" cy="25.0" r="10" stroke="#FFFFFF" stroke-width="4" fill="#FF0000"></circle><circle cx="225.0" cy="36.50000000000001" r="10" stroke="#FFFFFF" stroke-width="4" fill="#FF0000"></circle><circle cx="283.3333333333333" cy="55.0" r="10" stroke="#FFFFFF" stroke-width="4" fill="#FF0000"></circle><circle cx="341.66666666666663" cy="15.0" r="10" stroke="#FFFFFF" stroke-width="4" fill="#FF0000"></circle><circle cx="400.0" cy="92.0" r="10" stroke="#FFFFFF" stroke-width="4" fill="#FF0000"></circle><g class="y-axis-line"><rect x="0" y="0" width="65" height="130" stroke="transparent" stroke-width="0" fill="transparent"></rect><text x="0" y="19.0" fill="transparent" stroke="transparent" font-size="25">8.00</text><text x="0" y="126.0" fill="transparent" stroke="transparent" font-size="25">−12.0</text></g><g class="vert-line"><rect x="40.0" y="0" width="20" height="130" stroke="transparent" stroke-width="12" fill="transparent"></rect><text x="60.0" y="20" fill="transparent" stroke="transparent" font-size="30px">−12.0</text></g><g class="vert-line"><rect x="98.33333333333333" y="0" width="20" height="130" stroke="transparent" stroke-width="12" fill="transparent"></rect><text x="118.33333333333333" y="20" fill="transparent" stroke="transparent" font-size="30px">−5.00</text></g><g class="vert-line"><rect x="156.66666666666666" y="0" width="20" height="130" stroke="transparent" stroke-width="12" fill="transparent"></rect><text x="176.66666666666666" y="20" fill="transparent" stroke="transparent" font-size="30px">6.00</text></g><g class="vert-line"><rect x="215.0" y="0" width="20" height="130" stroke="transparent" stroke-width="12" fill="transparent"></rect><text x="235.0" y="20" fill="transparent" stroke="transparent" font-size="30px">3.70</text></g><g class="vert-line"><rect x="273.3333333333333" y="0" width="20" height="130" stroke="transparent" stroke-width="12" fill="transparent"></rect><text x="293.3333333333333" y="20" fill="transparent" stroke="transparent" font-size="30px">0</text></g><g class="vert-line"><rect x="331.66666666666663" y="0" width="20" height="130" stroke="transparent" stroke-width="12" fill="transparent"></rect><text x="351.66666666666663" y="20" fill="transparent" stroke="transparent" font-size="30px">8.00</text></g><g class="vert-line"><rect x="390.0" y="0" width="20" height="130" stroke="transparent" stroke-width="12" fill="transparent"></rect><text x="410.0" y="20" fill="transparent" stroke="transparent" font-size="30px">−7.40</text></g></svg></div></td>
    <td class="gt_row gt_left"><div><svg role="img" viewBox="0 0 450 130" style="height: 2em; margin-left: auto; margin-right: auto; font-size: inherit; overflow: visible; vertical-align: middle; position:relative;"><defs><pattern id="area_pattern" width="8" height="8" patternUnits="userSpaceOnUse"><path class="pattern-line" d="M 0,8 l 8,-8 M -1,1 l 4,-4 M 6,10 l 4,-4" stroke="#FF0000" stroke-width="1.5" stroke-linecap="round" shape-rendering="geometricPrecision"></path></pattern></defs><style> text { font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace; stroke-width: 0.15em; paint-order: stroke; stroke-linejoin: round; cursor: default; } .vert-line:hover rect { fill: #911EB4; fill-opacity: 40%; stroke: #FFFFFF60; color: red; } .vert-line:hover text { stroke: white; fill: #212427; } .horizontal-line:hover text {stroke: white; fill: #212427; } .ref-line:hover rect { stroke: #FFFFFF60; } .ref-line:hover line { stroke: #FF0000; } .ref-line:hover text { stroke: white; fill: #212427; } .y-axis-line:hover rect { fill: #EDEDED; fill-opacity: 60%; stroke: #FFFFFF60; color: red; } .y-axis-line:hover text { stroke: white; stroke-width: 0.20em; fill: #1A1C1F; } </style><line x1="22.5" y1="55.0" x2="427.5" y2="55.0" stroke="#BFBFBF" stroke-width="4"></line><rect x="30.0" y="55.0" width="40" height="60.0" stroke="#CC3243" stroke-width="4" fill="#D75A68"></rect><rect x="88.33333333333333" y="55.0" width="40" height="25.0" stroke="#CC3243" stroke-width="4" fill="#D75A68"></rect><rect x="146.66666666666666" y="25.0" width="40" height="30.0" stroke="#3290CC" stroke-width="4" fill="#3FB5FF"></rect><rect x="205.0" y="36.50000000000001" width="40" height="18.499999999999993" stroke="#3290CC" stroke-width="4" fill="#3FB5FF"></rect><rect x="263.3333333333333" y="54.0" width="40" height="2" stroke="#808080" stroke-width="4" fill="#808080"></rect><rect x="321.66666666666663" y="15.0" width="40" height="40.0" stroke="#3290CC" stroke-width="4" fill="#3FB5FF"></rect><rect x="380.0" y="55.0" width="40" height="37.0" stroke="#CC3243" stroke-width="4" fill="#D75A68"></rect><g class="y-axis-line"><rect x="0" y="0" width="65" height="130" stroke="transparent" stroke-width="0" fill="transparent"></rect><text x="0" y="19.0" fill="transparent" stroke="transparent" font-size="25">8.00</text><text x="0" y="126.0" fill="transparent" stroke="transparent" font-size="25">−12.0</text></g><g class="vert-line"><rect x="40.0" y="0" width="20" height="130" stroke="transparent" stroke-width="12" fill="transparent"></rect><text x="60.0" y="20" fill="transparent" stroke="transparent" font-size="30px">−12.0</text></g><g class="vert-line"><rect x="98.33333333333333" y="0" width="20" height="130" stroke="transparent" stroke-width="12" fill="transparent"></rect><text x="118.33333333333333" y="20" fill="transparent" stroke="transparent" font-size="30px">−5.00</text></g><g class="vert-line"><rect x="156.66666666666666" y="0" width="20" height="130" stroke="transparent" stroke-width="12" fill="transparent"></rect><text x="176.66666666666666" y="20" fill="transparent" stroke="transparent" font-size="30px">6.00</text></g><g class="vert-line"><rect x="215.0" y="0" width="20" height="130" stroke="transparent" stroke-width="12" fill="transparent"></rect><text x="235.0" y="20" fill="transparent" stroke="transparent" font-size="30px">3.70</text></g><g class="vert-line"><rect x="273.3333333333333" y="0" width="20" height="130" stroke="transparent" stroke-width="12" fill="transparent"></rect><text x="293.3333333333333" y="20" fill="transparent" stroke="transparent" font-size="30px">0</text></g><g class="vert-line"><rect x="331.66666666666663" y="0" width="20" height="130" stroke="transparent" stroke-width="12" fill="transparent"></rect><text x="351.66666666666663" y="20" fill="transparent" stroke="transparent" font-size="30px">8.00</text></g><g class="vert-line"><rect x="390.0" y="0" width="20" height="130" stroke="transparent" stroke-width="12" fill="transparent"></rect><text x="410.0" y="20" fill="transparent" stroke="transparent" font-size="30px">−7.40</text></g></svg></div></td>
  </tr>
  <tr>
    <th class="gt_row gt_left gt_stub">4</th>
    <td class="gt_row gt_left"><div><svg role="img" viewBox="0 0 650 130" style="height: 2em; margin-left: auto; margin-right: auto; font-size: inherit; overflow: visible; vertical-align: middle; position:relative;"><defs><pattern id="area_pattern" width="8" height="8" patternUnits="userSpaceOnUse"><path class="pattern-line" d="M 0,8 l 8,-8 M -1,1 l 4,-4 M 6,10 l 4,-4" stroke="#FF0000" stroke-width="1.5" stroke-linecap="round" shape-rendering="geometricPrecision"></path></pattern></defs><style> text { font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace; stroke-width: 0.15em; paint-order: stroke; stroke-linejoin: round; cursor: default; } .vert-line:hover rect { fill: #911EB4; fill-opacity: 40%; stroke: #FFFFFF60; color: red; } .vert-line:hover text { stroke: white; fill: #212427; } .horizontal-line:hover text {stroke: white; fill: #212427; } .ref-line:hover rect { stroke: #FFFFFF60; } .ref-line:hover line { stroke: #FF0000; } .ref-line:hover text { stroke: white; fill: #212427; } .y-axis-line:hover rect { fill: #EDEDED; fill-opacity: 60%; stroke: #FFFFFF60; color: red; } .y-axis-line:hover text { stroke: white; stroke-width: 0.20em; fill: #1A1C1F; } </style><path class="area-closed" d="M 50.0,106.66666666666666 105.0,115.0 160.0,52.5 215.00000000000003,85.83333333333333 270.0,81.66666666666667 325.0,73.33333333333333 380.00000000000006,110.83333333333334 435.00000000000006,15.0 490.0,44.166666666666664 545.0,60.833333333333336 600.0,90.0 600.0,125 50.0,125 Z" stroke="transparent" stroke-width="2" fill="url(#area_pattern)" fill-opacity="0.7"></path><path d="M 50.0,106.66666666666666 C 75.0,106.66666666666666 80.0,115.0 105.0,115.0 C 130.0,115.0 135.0,52.5 160.0,52.5 C 185.0,52.5 190.00000000000003,85.83333333333333 215.00000000000003,85.83333333333333 C 240.00000000000003,85.83333333333333 245.0,81.66666666666667 270.0,81.66666666666667 C 295.0,81.66666666666667 300.0,73.33333333333333 325.0,73.33333333333333 C 350.0,73.33333333333333 355.00000000000006,110.83333333333334 380.00000000000006,110.83333333333334 C 405.00000000000006,110.83333333333334 410.00000000000006,15.0 435.00000000000006,15.0 C 460.00000000000006,15.0 465.0,44.166666666666664 490.0,44.166666666666664 C 515.0,44.166666666666664 520.0,60.833333333333336 545.0,60.833333333333336 C 570.0,60.833333333333336 575.0,90.0 600.0,90.0" stroke="#4682B4" stroke-width="8" fill="none"></path><circle cx="50.0" cy="106.66666666666666" r="10" stroke="#FFFFFF" stroke-width="4" fill="#FF0000"></circle><circle cx="105.0" cy="115.0" r="10" stroke="#FFFFFF" stroke-width="4" fill="#FF0000"></circle><circle cx="160.0" cy="52.5" r="10" stroke="#FFFFFF" stroke-width="4" fill="#FF0000"></circle><circle cx="215.00000000000003" cy="85.83333333333333" r="10" stroke="#FFFFFF" stroke-width="4" fill="#FF0000"></circle><circle cx="270.0" cy="81.66666666666667" r="10" stroke="#FFFFFF" stroke-width="4" fill="#FF0000"></circle><circle cx="325.0" cy="73.33333333333333" r="10" stroke="#FFFFFF" stroke-width="4" fill="#FF0000"></circle><circle cx="380.00000000000006" cy="110.83333333333334" r="10" stroke="#FFFFFF" stroke-width="4" fill="#FF0000"></circle><circle cx="435.00000000000006" cy="15.0" r="10" stroke="#FFFFFF" stroke-width="4" fill="#FF0000"></circle><circle cx="490.0" cy="44.166666666666664" r="10" stroke="#FFFFFF" stroke-width="4" fill="#FF0000"></circle><circle cx="545.0" cy="60.833333333333336" r="10" stroke="#FFFFFF" stroke-width="4" fill="#FF0000"></circle><circle cx="600.0" cy="90.0" r="10" stroke="#FFFFFF" stroke-width="4" fill="#FF0000"></circle><g class="y-axis-line"><rect x="0" y="0" width="65" height="130" stroke="transparent" stroke-width="0" fill="transparent"></rect><text x="0" y="19.0" fill="transparent" stroke="transparent" font-size="25">24</text><text x="0" y="126.0" fill="transparent" stroke="transparent" font-size="25">0</text></g><g class="vert-line"><rect x="40.0" y="0" width="20" height="130" stroke="transparent" stroke-width="12" fill="transparent"></rect><text x="60.0" y="20" fill="transparent" stroke="transparent" font-size="30px">2</text></g><g class="vert-line"><rect x="95.0" y="0" width="20" height="130" stroke="transparent" stroke-width="12" fill="transparent"></rect><text x="115.0" y="20" fill="transparent" stroke="transparent" font-size="30px">0</text></g><g class="vert-line"><rect x="150.0" y="0" width="20" height="130" stroke="transparent" stroke-width="12" fill="transparent"></rect><text x="170.0" y="20" fill="transparent" stroke="transparent" font-size="30px">15</text></g><g class="vert-line"><rect x="205.00000000000003" y="0" width="20" height="130" stroke="transparent" stroke-width="12" fill="transparent"></rect><text x="225.00000000000003" y="20" fill="transparent" stroke="transparent" font-size="30px">7</text></g><g class="vert-line"><rect x="260.0" y="0" width="20" height="130" stroke="transparent" stroke-width="12" fill="transparent"></rect><text x="280.0" y="20" fill="transparent" stroke="transparent" font-size="30px">8</text></g><g class="vert-line"><rect x="315.0" y="0" width="20" height="130" stroke="transparent" stroke-width="12" fill="transparent"></rect><text x="335.0" y="20" fill="transparent" stroke="transparent" font-size="30px">10</text></g><g class="vert-line"><rect x="370.00000000000006" y="0" width="20" height="130" stroke="transparent" stroke-width="12" fill="transparent"></rect><text x="390.00000000000006" y="20" fill="transparent" stroke="transparent" font-size="30px">1</text></g><g class="vert-line"><rect x="425.00000000000006" y="0" width="20" height="130" stroke="transparent" stroke-width="12" fill="transparent"></rect><text x="445.00000000000006" y="20" fill="transparent" stroke="transparent" font-size="30px">24</text></g><g class="vert-line"><rect x="480.0" y="0" width="20" height="130" stroke="transparent" stroke-width="12" fill="transparent"></rect><text x="500.0" y="20" fill="transparent" stroke="transparent" font-size="30px">17</text></g><g class="vert-line"><rect x="535.0" y="0" width="20" height="130" stroke="transparent" stroke-width="12" fill="transparent"></rect><text x="555.0" y="20" fill="transparent" stroke="transparent" font-size="30px">13</text></g><g class="vert-line"><rect x="590.0" y="0" width="20" height="130" stroke="transparent" stroke-width="12" fill="transparent"></rect><text x="610.0" y="20" fill="transparent" stroke="transparent" font-size="30px">6</text></g></svg></div></td>
    <td class="gt_row gt_left"><div><svg role="img" viewBox="0 0 650 130" style="height: 2em; margin-left: auto; margin-right: auto; font-size: inherit; overflow: visible; vertical-align: middle; position:relative;"><defs><pattern id="area_pattern" width="8" height="8" patternUnits="userSpaceOnUse"><path class="pattern-line" d="M 0,8 l 8,-8 M -1,1 l 4,-4 M 6,10 l 4,-4" stroke="#FF0000" stroke-width="1.5" stroke-linecap="round" shape-rendering="geometricPrecision"></path></pattern></defs><style> text { font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace; stroke-width: 0.15em; paint-order: stroke; stroke-linejoin: round; cursor: default; } .vert-line:hover rect { fill: #911EB4; fill-opacity: 40%; stroke: #FFFFFF60; color: red; } .vert-line:hover text { stroke: white; fill: #212427; } .horizontal-line:hover text {stroke: white; fill: #212427; } .ref-line:hover rect { stroke: #FFFFFF60; } .ref-line:hover line { stroke: #FF0000; } .ref-line:hover text { stroke: white; fill: #212427; } .y-axis-line:hover rect { fill: #EDEDED; fill-opacity: 60%; stroke: #FFFFFF60; color: red; } .y-axis-line:hover text { stroke: white; stroke-width: 0.20em; fill: #1A1C1F; } </style><line x1="22.5" y1="115.0" x2="627.5" y2="115.0" stroke="#BFBFBF" stroke-width="4"></line><rect x="30.0" y="106.66666666666666" width="40" height="8.333333333333343" stroke="#3290CC" stroke-width="4" fill="#3FB5FF"></rect><rect x="85.0" y="114.0" width="40" height="2" stroke="#808080" stroke-width="4" fill="#808080"></rect><rect x="140.0" y="52.5" width="40" height="62.5" stroke="#3290CC" stroke-width="4" fill="#3FB5FF"></rect><rect x="195.00000000000003" y="85.83333333333333" width="40" height="29.16666666666667" stroke="#3290CC" stroke-width="4" fill="#3FB5FF"></rect><rect x="250.0" y="81.66666666666667" width="40" height="33.33333333333333" stroke="#3290CC" stroke-width="4" fill="#3FB5FF"></rect><rect x="305.0" y="73.33333333333333" width="40" height="41.66666666666667" stroke="#3290CC" stroke-width="4" fill="#3FB5FF"></rect><rect x="360.00000000000006" y="110.83333333333334" width="40" height="4.166666666666657" stroke="#3290CC" stroke-width="4" fill="#3FB5FF"></rect><rect x="415.00000000000006" y="15.0" width="40" height="100.0" stroke="#3290CC" stroke-width="4" fill="#3FB5FF"></rect><rect x="470.0" y="44.166666666666664" width="40" height="70.83333333333334" stroke="#3290CC" stroke-width="4" fill="#3FB5FF"></rect><rect x="525.0" y="60.833333333333336" width="40" height="54.166666666666664" stroke="#3290CC" stroke-width="4" fill="#3FB5FF"></rect><rect x="580.0" y="90.0" width="40" height="25.0" stroke="#3290CC" stroke-width="4" fill="#3FB5FF"></rect><g class="y-axis-line"><rect x="0" y="0" width="65" height="130" stroke="transparent" stroke-width="0" fill="transparent"></rect><text x="0" y="19.0" fill="transparent" stroke="transparent" font-size="25">24</text><text x="0" y="126.0" fill="transparent" stroke="transparent" font-size="25">0</text></g><g class="vert-line"><rect x="40.0" y="0" width="20" height="130" stroke="transparent" stroke-width="12" fill="transparent"></rect><text x="60.0" y="20" fill="transparent" stroke="transparent" font-size="30px">2</text></g><g class="vert-line"><rect x="95.0" y="0" width="20" height="130" stroke="transparent" stroke-width="12" fill="transparent"></rect><text x="115.0" y="20" fill="transparent" stroke="transparent" font-size="30px">0</text></g><g class="vert-line"><rect x="150.0" y="0" width="20" height="130" stroke="transparent" stroke-width="12" fill="transparent"></rect><text x="170.0" y="20" fill="transparent" stroke="transparent" font-size="30px">15</text></g><g class="vert-line"><rect x="205.00000000000003" y="0" width="20" height="130" stroke="transparent" stroke-width="12" fill="transparent"></rect><text x="225.00000000000003" y="20" fill="transparent" stroke="transparent" font-size="30px">7</text></g><g class="vert-line"><rect x="260.0" y="0" width="20" height="130" stroke="transparent" stroke-width="12" fill="transparent"></rect><text x="280.0" y="20" fill="transparent" stroke="transparent" font-size="30px">8</text></g><g class="vert-line"><rect x="315.0" y="0" width="20" height="130" stroke="transparent" stroke-width="12" fill="transparent"></rect><text x="335.0" y="20" fill="transparent" stroke="transparent" font-size="30px">10</text></g><g class="vert-line"><rect x="370.00000000000006" y="0" width="20" height="130" stroke="transparent" stroke-width="12" fill="transparent"></rect><text x="390.00000000000006" y="20" fill="transparent" stroke="transparent" font-size="30px">1</text></g><g class="vert-line"><rect x="425.00000000000006" y="0" width="20" height="130" stroke="transparent" stroke-width="12" fill="transparent"></rect><text x="445.00000000000006" y="20" fill="transparent" stroke="transparent" font-size="30px">24</text></g><g class="vert-line"><rect x="480.0" y="0" width="20" height="130" stroke="transparent" stroke-width="12" fill="transparent"></rect><text x="500.0" y="20" fill="transparent" stroke="transparent" font-size="30px">17</text></g><g class="vert-line"><rect x="535.0" y="0" width="20" height="130" stroke="transparent" stroke-width="12" fill="transparent"></rect><text x="555.0" y="20" fill="transparent" stroke="transparent" font-size="30px">13</text></g><g class="vert-line"><rect x="590.0" y="0" width="20" height="130" stroke="transparent" stroke-width="12" fill="transparent"></rect><text x="610.0" y="20" fill="transparent" stroke="transparent" font-size="30px">6</text></g></svg></div></td>
  </tr>
</tbody>

</table>

</div>