<div class="m-col-l-10 m-push-l-1">
<h1>m.plots</h1>
<!-- content -->
-<div class="m-plot">
+<p>Note: the test uses DejaVu Sans instead of Source Sans Pro in order to have
+predictable rendering on the CIs.</p>
+<style>
+div.m-plot svg { font-family: DejaVu Sans; }
+</style><div class="m-plot">
<svg viewBox="0 0 576 113.76">
<defs>
<style type="text/css">
<g id="figure_1">
<g id="axes_1">
<g id="patch_1">
- <path d="M 53.31 70.705312 L 560.62 70.705312 L 560.62 27.136406 L 53.31 27.136406 z" class="m-background"/>
+ <path d="M 59.365156 69.588125 L 560.62 69.588125 L 560.62 27.757969 L 59.365156 27.757969 z" class="m-background"/>
</g>
<g id="plot1-value0"><title>15.0 meters, i guess?</title>
- <path clip-path="url(#p87df164df2)" d="M 53.31 29.116811 L 294.88619 29.116811 L 294.88619 46.72041 L 53.31 46.72041 z" class="m-bar m-success"/>
+ <path clip-path="url(#p2abd2612b1)" d="M 59.365156 29.659339 L 298.057939 29.659339 L 298.057939 46.560413 L 59.365156 46.560413 z" class="m-bar m-success"/>
</g>
<g id="plot1-value1"><title>30.0 meters, i guess?</title>
- <path clip-path="url(#p87df164df2)" d="M 53.31 51.121309 L 536.462381 51.121309 L 536.462381 68.724908 L 53.31 68.724908 z" class="m-bar m-success"/>
+ <path clip-path="url(#p2abd2612b1)" d="M 59.365156 50.785681 L 536.750722 50.785681 L 536.750722 67.686754 L 59.365156 67.686754 z" class="m-bar m-success"/>
</g>
<g id="matplotlib.axis_1">
<g id="xtick_1">
<path d="M 0 0 L 0 3.5" id="m15f0a304df" class="m-line"/>
</defs>
<g>
- <use x="53.31" xlink:href="#m15f0a304df" y="70.705312"/>
+ <use x="59.365156" xlink:href="#m15f0a304df" y="69.588125"/>
</g>
</g>
<g id="text_1">
- <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 53.31, 85.537656)" x="53.31" y="85.537656">0</text>
+ <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 59.365156, 84.946406)" x="59.365156" y="84.946406">0</text>
</g>
</g>
<g id="xtick_2">
<g id="line2d_2">
<g>
- <use x="133.835397" xlink:href="#m15f0a304df" y="70.705312"/>
+ <use x="138.929417" xlink:href="#m15f0a304df" y="69.588125"/>
</g>
</g>
<g id="text_2">
- <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 133.835397, 85.537656)" x="133.835397" y="85.537656">5</text>
+ <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 138.929417, 84.946406)" x="138.929417" y="84.946406">5</text>
</g>
</g>
<g id="xtick_3">
<g id="line2d_3">
<g>
- <use x="214.360794" xlink:href="#m15f0a304df" y="70.705312"/>
+ <use x="218.493678" xlink:href="#m15f0a304df" y="69.588125"/>
</g>
</g>
<g id="text_3">
- <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 214.360794, 85.537656)" x="214.360794" y="85.537656">10</text>
+ <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 218.493678, 84.946406)" x="218.493678" y="84.946406">10</text>
</g>
</g>
<g id="xtick_4">
<g id="line2d_4">
<g>
- <use x="294.88619" xlink:href="#m15f0a304df" y="70.705312"/>
+ <use x="298.057939" xlink:href="#m15f0a304df" y="69.588125"/>
</g>
</g>
<g id="text_4">
- <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 294.88619, 85.537656)" x="294.88619" y="85.537656">15</text>
+ <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 298.057939, 84.946406)" x="298.057939" y="84.946406">15</text>
</g>
</g>
<g id="xtick_5">
<g id="line2d_5">
<g>
- <use x="375.411587" xlink:href="#m15f0a304df" y="70.705312"/>
+ <use x="377.6222" xlink:href="#m15f0a304df" y="69.588125"/>
</g>
</g>
<g id="text_5">
- <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 375.411587, 85.537656)" x="375.411587" y="85.537656">20</text>
+ <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 377.6222, 84.946406)" x="377.6222" y="84.946406">20</text>
</g>
</g>
<g id="xtick_6">
<g id="line2d_6">
<g>
- <use x="455.936984" xlink:href="#m15f0a304df" y="70.705312"/>
+ <use x="457.186461" xlink:href="#m15f0a304df" y="69.588125"/>
</g>
</g>
<g id="text_6">
- <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 455.936984, 85.537656)" x="455.936984" y="85.537656">25</text>
+ <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 457.186461, 84.946406)" x="457.186461" y="84.946406">25</text>
</g>
</g>
<g id="xtick_7">
<g id="line2d_7">
<g>
- <use x="536.462381" xlink:href="#m15f0a304df" y="70.705312"/>
+ <use x="536.750722" xlink:href="#m15f0a304df" y="69.588125"/>
</g>
</g>
<g id="text_7">
- <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 536.462381, 85.537656)" x="536.462381" y="85.537656">30</text>
+ <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 536.750722, 84.946406)" x="536.750722" y="84.946406">30</text>
</g>
</g>
<g id="text_8">
- <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 306.965, 99.415312)" x="306.965" y="99.415312">meters, i guess?</text>
+ <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 309.992578, 99.592344)" x="309.992578" y="99.592344">meters, i guess?</text>
</g>
</g>
<g id="matplotlib.axis_2">
<path d="M 0 0 L -3.5 0" id="mba4ce04b6c" class="m-line"/>
</defs>
<g>
- <use x="53.31" xlink:href="#mba4ce04b6c" y="37.91861"/>
+ <use x="59.365156" xlink:href="#mba4ce04b6c" y="38.109876"/>
</g>
</g>
<g id="text_9">
- <text class="m-label" style="text-anchor:end;" transform="rotate(-0, 46.31, 41.834782)" x="46.31" y="41.834782">First</text>
+ <text class="m-label" style="text-anchor:end;" transform="rotate(-0, 52.365156, 42.289017)" x="52.365156" y="42.289017">First</text>
</g>
</g>
<g id="ytick_2">
<g id="line2d_9">
<g>
- <use x="53.31" xlink:href="#mba4ce04b6c" y="59.923108"/>
+ <use x="59.365156" xlink:href="#mba4ce04b6c" y="59.236218"/>
</g>
</g>
<g id="text_10">
- <text class="m-label" style="text-anchor:end;" transform="rotate(-0, 46.31, 63.83928)" x="46.31" y="63.83928">Second</text>
+ <text class="m-label" style="text-anchor:end;" transform="rotate(-0, 52.365156, 63.415358)" x="52.365156" y="63.415358">Second</text>
</g>
</g>
</g>
<g id="text_11">
- <text class="m-title" style="text-anchor:middle;" transform="rotate(-0, 306.965, 21.136406)" x="306.965" y="21.136406">A plot with a single color</text>
+ <text class="m-title" style="text-anchor:middle;" transform="rotate(-0, 309.992578, 21.757969)" x="309.992578" y="21.757969">A plot with a single color</text>
</g>
</g>
</g>
<defs>
- <clipPath id="p87df164df2">
- <rect height="43.568906" width="507.31" x="53.31" y="27.136406"/>
+ <clipPath id="p2abd2612b1">
+ <rect height="41.830156" width="501.254844" x="59.365156" y="27.757969"/>
</clipPath>
</defs>
</svg>
<g id="figure_1">
<g id="axes_1">
<g id="patch_1">
- <path d="M 60.154063 175.060625 L 560.62 175.060625 L 560.62 27.136406 L 60.154063 27.136406 z" class="m-background"/>
+ <path d="M 68.216719 173.988125 L 558.482422 173.988125 L 558.482422 27.757969 L 68.216719 27.757969 z" class="m-background"/>
</g>
<g id="plot2-value0"><title>3.0 ± 0.1 Mondays</title>
- <path clip-path="url(#p0d12d49cf2)" d="M 60.154063 33.860234 L 294.564338 33.860234 L 294.564338 72.282109 L 60.154063 72.282109 z" class="m-bar m-success"/>
+ <path clip-path="url(#p1198f4ed7e)" d="M 68.216719 34.404794 L 297.849367 34.404794 L 297.849367 72.386653 L 68.216719 72.386653 z" class="m-bar m-success"/>
</g>
<g id="plot2-value1"><title>4.0 ± 2.1 Mondays</title>
- <path clip-path="url(#p0d12d49cf2)" d="M 60.154063 81.887578 L 372.701096 81.887578 L 372.701096 120.309453 L 60.154063 120.309453 z" class="m-bar m-info"/>
+ <path clip-path="url(#p1198f4ed7e)" d="M 68.216719 81.882117 L 374.393583 81.882117 L 374.393583 119.863976 L 68.216719 119.863976 z" class="m-bar m-info"/>
</g>
<g id="plot2-value2"><title>5.0 ± 1.0 Mondays</title>
- <path clip-path="url(#p0d12d49cf2)" d="M 60.154063 129.914922 L 450.837854 129.914922 L 450.837854 168.336797 L 60.154063 168.336797 z" class="m-bar m-danger"/>
+ <path clip-path="url(#p1198f4ed7e)" d="M 68.216719 129.359441 L 450.937798 129.359441 L 450.937798 167.3413 L 68.216719 167.3413 z" class="m-bar m-danger"/>
</g>
<g id="matplotlib.axis_1">
<g id="xtick_1">
<path d="M 0 0 L 0 3.5" id="m7a9c636c50" class="m-line"/>
</defs>
<g>
- <use x="60.154063" xlink:href="#m7a9c636c50" y="175.060625"/>
+ <use x="68.216719" xlink:href="#m7a9c636c50" y="173.988125"/>
</g>
</g>
<g id="text_1">
- <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 60.154063, 189.892969)" x="60.154063" y="189.892969">0</text>
+ <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 68.216719, 189.346406)" x="68.216719" y="189.346406">0</text>
</g>
</g>
<g id="xtick_2">
<g id="line2d_2">
<g>
- <use x="138.290821" xlink:href="#m7a9c636c50" y="175.060625"/>
+ <use x="144.760935" xlink:href="#m7a9c636c50" y="173.988125"/>
</g>
</g>
<g id="text_2">
- <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 138.290821, 189.892969)" x="138.290821" y="189.892969">1</text>
+ <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 144.760935, 189.346406)" x="144.760935" y="189.346406">1</text>
</g>
</g>
<g id="xtick_3">
<g id="line2d_3">
<g>
- <use x="216.427579" xlink:href="#m7a9c636c50" y="175.060625"/>
+ <use x="221.305151" xlink:href="#m7a9c636c50" y="173.988125"/>
</g>
</g>
<g id="text_3">
- <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 216.427579, 189.892969)" x="216.427579" y="189.892969">2</text>
+ <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 221.305151, 189.346406)" x="221.305151" y="189.346406">2</text>
</g>
</g>
<g id="xtick_4">
<g id="line2d_4">
<g>
- <use x="294.564338" xlink:href="#m7a9c636c50" y="175.060625"/>
+ <use x="297.849367" xlink:href="#m7a9c636c50" y="173.988125"/>
</g>
</g>
<g id="text_4">
- <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 294.564338, 189.892969)" x="294.564338" y="189.892969">3</text>
+ <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 297.849367, 189.346406)" x="297.849367" y="189.346406">3</text>
</g>
</g>
<g id="xtick_5">
<g id="line2d_5">
<g>
- <use x="372.701096" xlink:href="#m7a9c636c50" y="175.060625"/>
+ <use x="374.393583" xlink:href="#m7a9c636c50" y="173.988125"/>
</g>
</g>
<g id="text_5">
- <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 372.701096, 189.892969)" x="372.701096" y="189.892969">4</text>
+ <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 374.393583, 189.346406)" x="374.393583" y="189.346406">4</text>
</g>
</g>
<g id="xtick_6">
<g id="line2d_6">
<g>
- <use x="450.837854" xlink:href="#m7a9c636c50" y="175.060625"/>
+ <use x="450.937798" xlink:href="#m7a9c636c50" y="173.988125"/>
</g>
</g>
<g id="text_6">
- <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 450.837854, 189.892969)" x="450.837854" y="189.892969">5</text>
+ <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 450.937798, 189.346406)" x="450.937798" y="189.346406">5</text>
</g>
</g>
<g id="xtick_7">
<g id="line2d_7">
<g>
- <use x="528.974613" xlink:href="#m7a9c636c50" y="175.060625"/>
+ <use x="527.482014" xlink:href="#m7a9c636c50" y="173.988125"/>
</g>
</g>
<g id="text_7">
- <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 528.974613, 189.892969)" x="528.974613" y="189.892969">6</text>
+ <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 527.482014, 189.346406)" x="527.482014" y="189.346406">6</text>
</g>
</g>
<g id="text_8">
- <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 310.387031, 203.980313)" x="310.387031" y="203.980313">Mondays</text>
+ <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 313.34957, 203.992344)" x="313.34957" y="203.992344">Mondays</text>
</g>
</g>
<g id="matplotlib.axis_2">
<path d="M 0 0 L -3.5 0" id="m03b20617ea" class="m-line"/>
</defs>
<g>
- <use x="60.154063" xlink:href="#m03b20617ea" y="53.071172"/>
+ <use x="68.216719" xlink:href="#m03b20617ea" y="53.395723"/>
</g>
</g>
<g id="text_9">
- <text class="m-label" transform="translate(15.827969 51.138094)">January</text>
- <text class="m-label" transform="translate(53.154063 62.836594)"/>
+ <text class="m-label" transform="translate(19.514688 51.416067)">January</text>
+ <text class="m-label" transform="translate(61.216719 63.733661)"/>
</g>
</g>
<g id="ytick_2">
<g id="line2d_9">
<g>
- <use x="60.154063" xlink:href="#m03b20617ea" y="101.098516"/>
+ <use x="68.216719" xlink:href="#m03b20617ea" y="100.873047"/>
</g>
</g>
<g id="text_10">
- <text class="m-label" transform="translate(11.88 99.210125)">February</text>
- <text class="m-label" transform="translate(53.154063 110.908625)"/>
+ <text class="m-label" transform="translate(11.88 98.893391)">February</text>
+ <text class="m-label" transform="translate(61.216719 111.210984)"/>
</g>
</g>
<g id="ytick_3">
<g id="line2d_10">
<g>
- <use x="60.154063" xlink:href="#m03b20617ea" y="149.125859"/>
+ <use x="68.216719" xlink:href="#m03b20617ea" y="148.35037"/>
</g>
</g>
<g id="text_11">
- <text class="m-label" transform="translate(24.794688 147.215125)">March</text>
- <text class="m-label" transform="translate(53.154063 158.868938)"/>
+ <text class="m-label" transform="translate(27.446719 146.370714)">March</text>
+ <text class="m-label" transform="translate(61.216719 158.688308)"/>
</g>
</g>
</g>
<g id="LineCollection_1">
- <path clip-path="url(#p0d12d49cf2)" d="M 286.750662 53.071172 L 302.378014 53.071172" class="m-error"/>
- <path clip-path="url(#p0d12d49cf2)" d="M 208.613903 101.098516 L 536.788289 101.098516" class="m-error"/>
- <path clip-path="url(#p0d12d49cf2)" d="M 372.701096 149.125859 L 528.974613 149.125859" class="m-error"/>
+ <path clip-path="url(#p1198f4ed7e)" d="M 290.194945 53.395723 L 305.503788 53.395723" class="m-error"/>
+ <path clip-path="url(#p1198f4ed7e)" d="M 213.650729 100.873047 L 535.136436 100.873047" class="m-error"/>
+ <path clip-path="url(#p1198f4ed7e)" d="M 374.393583 148.35037 L 527.482014 148.35037" class="m-error"/>
</g>
<g id="line2d_11">
<defs>
<path d="M 0 9.375 L 0 -9.375" id="m63fa77ade3" class="m-error"/>
</defs>
- <g clip-path="url(#p0d12d49cf2)">
- <use x="286.750662" xlink:href="#m63fa77ade3" y="53.071172"/>
- <use x="208.613903" xlink:href="#m63fa77ade3" y="101.098516"/>
- <use x="372.701096" xlink:href="#m63fa77ade3" y="149.125859"/>
+ <g clip-path="url(#p1198f4ed7e)">
+ <use x="290.194945" xlink:href="#m63fa77ade3" y="53.395723"/>
+ <use x="213.650729" xlink:href="#m63fa77ade3" y="100.873047"/>
+ <use x="374.393583" xlink:href="#m63fa77ade3" y="148.35037"/>
</g>
</g>
<g id="line2d_12">
- <g clip-path="url(#p0d12d49cf2)">
- <use x="302.378014" xlink:href="#m63fa77ade3" y="53.071172"/>
- <use x="536.788289" xlink:href="#m63fa77ade3" y="101.098516"/>
- <use x="528.974613" xlink:href="#m63fa77ade3" y="149.125859"/>
+ <g clip-path="url(#p1198f4ed7e)">
+ <use x="305.503788" xlink:href="#m63fa77ade3" y="53.395723"/>
+ <use x="535.136436" xlink:href="#m63fa77ade3" y="100.873047"/>
+ <use x="527.482014" xlink:href="#m63fa77ade3" y="148.35037"/>
</g>
</g>
<g id="text_12">
- <text class="m-label m-dim" transform="translate(53.154063 52.434305)"/>
- <text class="m-label m-dim" transform="translate(5.522344 64.088117)">a paradise</text>
+ <text class="m-label m-dim" transform="translate(61.216719 52.646105)"/>
+ <text class="m-label m-dim" transform="translate(3.454687 64.963699)">a paradise</text>
</g>
<g id="text_13">
- <text class="m-label m-dim" transform="translate(53.154063 100.416961)"/>
- <text class="m-label m-dim" transform="translate(31.064688 112.070773)">okay</text>
+ <text class="m-label m-dim" transform="translate(61.216719 100.123429)"/>
+ <text class="m-label m-dim" transform="translate(34.866563 112.441022)">okay</text>
</g>
<g id="text_14">
- <text class="m-label m-dim" transform="translate(53.154063 148.488992)"/>
- <text class="m-label m-dim" transform="translate(32.924375 160.142805)">hell!</text>
+ <text class="m-label m-dim" transform="translate(61.216719 147.600752)"/>
+ <text class="m-label m-dim" transform="translate(36.954844 159.918346)">hell!</text>
</g>
<g id="text_15">
- <text class="m-title" style="text-anchor:middle;" transform="rotate(-0, 310.387031, 21.136406)" x="310.387031" y="21.136406">A plot with separate colors, extra labels, error bars and custom height</text>
+ <text class="m-title" style="text-anchor:middle;" transform="rotate(-0, 313.34957, 21.757969)" x="313.34957" y="21.757969">A plot with separate colors, extra labels, error bars and custom height</text>
</g>
</g>
</g>
<defs>
- <clipPath id="p0d12d49cf2">
- <rect height="147.924219" width="500.465938" x="60.154063" y="27.136406"/>
+ <clipPath id="p1198f4ed7e">
+ <rect height="146.230156" width="490.265703" x="68.216719" y="27.757969"/>
</clipPath>
</defs>
</svg>