docs/images/quickstart_sample.svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="plt-container" width="705.0" height="453.0">
  <style type="text/css">
  .plt-container {
   font-family: Lucida Grande, sans-serif;
   user-select: none;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
}
text {
   text-rendering: optimizeLegibility;
}
#xXxprefixXx0 .plot-title {
   fill: #474747;
   font-family: Lucida Grande, sans-serif;
   font-size: 16.0px;
   font-weight: normal;
   font-style: normal;   
}
#xXxprefixXx0 .plot-subtitle {
   fill: #474747;
   font-family: Lucida Grande, sans-serif;
   font-size: 15.0px;
   font-weight: normal;
   font-style: normal;   
}
#xXxprefixXx0 .plot-caption {
   fill: #474747;
   font-family: Lucida Grande, sans-serif;
   font-size: 13.0px;
   font-weight: normal;
   font-style: normal;   
}
#xXxprefixXx0 .legend-title {
   fill: #474747;
   font-family: Lucida Grande, sans-serif;
   font-size: 15.0px;
   font-weight: normal;
   font-style: normal;   
}
#xXxprefixXx0 .legend-item {
   fill: #474747;
   font-family: Lucida Grande, sans-serif;
   font-size: 13.0px;
   font-weight: normal;
   font-style: normal;   
}
#xXxprefixXx0 .axis-title-x {
   fill: #474747;
   font-family: Lucida Grande, sans-serif;
   font-size: 15.0px;
   font-weight: normal;
   font-style: normal;   
}
#xXxprefixXx0 .axis-text-x {
   fill: #474747;
   font-family: Lucida Grande, sans-serif;
   font-size: 13.0px;
   font-weight: normal;
   font-style: normal;   
}
#xXxprefixXx3 .axis-tooltip-text-x {
   fill: #ffffff;
   font-family: Lucida Grande, sans-serif;
   font-size: 13.0px;
   font-weight: normal;
   font-style: normal;   
}
#xXxprefixXx0 .axis-title-y {
   fill: #474747;
   font-family: Lucida Grande, sans-serif;
   font-size: 15.0px;
   font-weight: normal;
   font-style: normal;   
}
#xXxprefixXx0 .axis-text-y {
   fill: #474747;
   font-family: Lucida Grande, sans-serif;
   font-size: 13.0px;
   font-weight: normal;
   font-style: normal;   
}
#xXxprefixXx3 .axis-tooltip-text-y {
   fill: #ffffff;
   font-family: Lucida Grande, sans-serif;
   font-size: 13.0px;
   font-weight: normal;
   font-style: normal;   
}
#xXxprefixXx0 .facet-strip-text-x {
   fill: #474747;
   font-family: Lucida Grande, sans-serif;
   font-size: 13.0px;
   font-weight: normal;
   font-style: normal;   
}
#xXxprefixXx0 .facet-strip-text-y {
   fill: #474747;
   font-family: Lucida Grande, sans-serif;
   font-size: 13.0px;
   font-weight: normal;
   font-style: normal;   
}
#xXxprefixXx3 .tooltip-text {
   fill: #474747;
   font-family: Lucida Grande, sans-serif;
   font-size: 13.0px;
   font-weight: normal;
   font-style: normal;   
}
#xXxprefixXx3 .tooltip-title {
   fill: #474747;
   font-family: Lucida Grande, sans-serif;
   font-size: 13.0px;
   font-weight: bold;
   font-style: normal;   
}
#xXxprefixXx3 .tooltip-label {
   fill: #474747;
   font-family: Lucida Grande, sans-serif;
   font-size: 13.0px;
   font-weight: bold;
   font-style: normal;   
}

  </style>
  <g id="xXxprefixXx0">
    <path fill-rule="evenodd" fill="rgb(255,255,255)" fill-opacity="1.0" d="M0.0 0.0 L0.0 453.0 L705.0 453.0 L705.0 0.0 Z">
    </path>
    <g transform="translate(23.0 34.0 ) ">
      <g transform="translate(21.961210910936405 0.0 ) ">
        <line x1="48.81451117919998" y1="339.0" x2="48.81451117919998" y2="0.0" stroke="rgb(233,233,233)" stroke-opacity="1.0" stroke-width="1.0" fill="none">
        </line>
        <line x1="100.47007856459679" y1="339.0" x2="100.47007856459679" y2="0.0" stroke="rgb(233,233,233)" stroke-opacity="1.0" stroke-width="1.0" fill="none">
        </line>
        <line x1="152.1256459499936" y1="339.0" x2="152.1256459499936" y2="0.0" stroke="rgb(233,233,233)" stroke-opacity="1.0" stroke-width="1.0" fill="none">
        </line>
        <line x1="203.78121333539042" y1="339.0" x2="203.78121333539042" y2="0.0" stroke="rgb(233,233,233)" stroke-opacity="1.0" stroke-width="1.0" fill="none">
        </line>
        <line x1="255.43678072078723" y1="339.0" x2="255.43678072078723" y2="0.0" stroke="rgb(233,233,233)" stroke-opacity="1.0" stroke-width="1.0" fill="none">
        </line>
        <line x1="307.09234810618403" y1="339.0" x2="307.09234810618403" y2="0.0" stroke="rgb(233,233,233)" stroke-opacity="1.0" stroke-width="1.0" fill="none">
        </line>
        <line x1="358.74791549158084" y1="339.0" x2="358.74791549158084" y2="0.0" stroke="rgb(233,233,233)" stroke-opacity="1.0" stroke-width="1.0" fill="none">
        </line>
        <line x1="410.40348287697765" y1="339.0" x2="410.40348287697765" y2="0.0" stroke="rgb(233,233,233)" stroke-opacity="1.0" stroke-width="1.0" fill="none">
        </line>
        <line x1="462.05905026237446" y1="339.0" x2="462.05905026237446" y2="0.0" stroke="rgb(233,233,233)" stroke-opacity="1.0" stroke-width="1.0" fill="none">
        </line>
        <line x1="513.7146176477712" y1="339.0" x2="513.7146176477712" y2="0.0" stroke="rgb(233,233,233)" stroke-opacity="1.0" stroke-width="1.0" fill="none">
        </line>
      </g>
      <g transform="translate(21.961210910936405 339.0 ) ">
        <g transform="translate(48.81451117919998 0.0 ) ">
          <line stroke-width="1.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" x2="0.0" y2="4.0">
          </line>
          <g transform="translate(0.0 7.0 ) ">
            <text class="axis-text-x" text-anchor="middle" dy="0.7em">
              <tspan>0</tspan>
            </text>
          </g>
        </g>
        <g transform="translate(100.47007856459679 0.0 ) ">
          <line stroke-width="1.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" x2="0.0" y2="4.0">
          </line>
          <g transform="translate(0.0 7.0 ) ">
            <text class="axis-text-x" text-anchor="middle" dy="0.7em">
              <tspan>1</tspan>
            </text>
          </g>
        </g>
        <g transform="translate(152.1256459499936 0.0 ) ">
          <line stroke-width="1.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" x2="0.0" y2="4.0">
          </line>
          <g transform="translate(0.0 7.0 ) ">
            <text class="axis-text-x" text-anchor="middle" dy="0.7em">
              <tspan>2</tspan>
            </text>
          </g>
        </g>
        <g transform="translate(203.78121333539042 0.0 ) ">
          <line stroke-width="1.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" x2="0.0" y2="4.0">
          </line>
          <g transform="translate(0.0 7.0 ) ">
            <text class="axis-text-x" text-anchor="middle" dy="0.7em">
              <tspan>3</tspan>
            </text>
          </g>
        </g>
        <g transform="translate(255.43678072078723 0.0 ) ">
          <line stroke-width="1.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" x2="0.0" y2="4.0">
          </line>
          <g transform="translate(0.0 7.0 ) ">
            <text class="axis-text-x" text-anchor="middle" dy="0.7em">
              <tspan>4</tspan>
            </text>
          </g>
        </g>
        <g transform="translate(307.09234810618403 0.0 ) ">
          <line stroke-width="1.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" x2="0.0" y2="4.0">
          </line>
          <g transform="translate(0.0 7.0 ) ">
            <text class="axis-text-x" text-anchor="middle" dy="0.7em">
              <tspan>5</tspan>
            </text>
          </g>
        </g>
        <g transform="translate(358.74791549158084 0.0 ) ">
          <line stroke-width="1.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" x2="0.0" y2="4.0">
          </line>
          <g transform="translate(0.0 7.0 ) ">
            <text class="axis-text-x" text-anchor="middle" dy="0.7em">
              <tspan>6</tspan>
            </text>
          </g>
        </g>
        <g transform="translate(410.40348287697765 0.0 ) ">
          <line stroke-width="1.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" x2="0.0" y2="4.0">
          </line>
          <g transform="translate(0.0 7.0 ) ">
            <text class="axis-text-x" text-anchor="middle" dy="0.7em">
              <tspan>7</tspan>
            </text>
          </g>
        </g>
        <g transform="translate(462.05905026237446 0.0 ) ">
          <line stroke-width="1.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" x2="0.0" y2="4.0">
          </line>
          <g transform="translate(0.0 7.0 ) ">
            <text class="axis-text-x" text-anchor="middle" dy="0.7em">
              <tspan>8</tspan>
            </text>
          </g>
        </g>
        <g transform="translate(513.7146176477712 0.0 ) ">
          <line stroke-width="1.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" x2="0.0" y2="4.0">
          </line>
          <g transform="translate(0.0 7.0 ) ">
            <text class="axis-text-x" text-anchor="middle" dy="0.7em">
              <tspan>9</tspan>
            </text>
          </g>
        </g>
        <line x1="0.0" y1="0.0" x2="562.5291288269711" y2="0.0" stroke-width="1.0" stroke="rgb(71,71,71)" stroke-opacity="1.0">
        </line>
      </g>
      <g transform="translate(21.961210910936405 0.0 ) ">
        <line x1="0.0" y1="275.69467787114843" x2="562.5291288269711" y2="275.69467787114843" stroke="rgb(233,233,233)" stroke-opacity="1.0" stroke-width="1.0" fill="none">
        </line>
        <line x1="0.0" y1="212.3893557422969" x2="562.5291288269711" y2="212.3893557422969" stroke="rgb(233,233,233)" stroke-opacity="1.0" stroke-width="1.0" fill="none">
        </line>
        <line x1="0.0" y1="149.08403361344537" x2="562.5291288269711" y2="149.08403361344537" stroke="rgb(233,233,233)" stroke-opacity="1.0" stroke-width="1.0" fill="none">
        </line>
        <line x1="0.0" y1="85.77871148459383" x2="562.5291288269711" y2="85.77871148459383" stroke="rgb(233,233,233)" stroke-opacity="1.0" stroke-width="1.0" fill="none">
        </line>
        <line x1="0.0" y1="22.473389355742256" x2="562.5291288269711" y2="22.473389355742256" stroke="rgb(233,233,233)" stroke-opacity="1.0" stroke-width="1.0" fill="none">
        </line>
      </g>
      <g transform="translate(21.961210910936405 0.0 ) ">
        <g transform="translate(0.0 339.0 ) ">
          <g transform="translate(-3.0 0.0 ) ">
            <text class="axis-text-y" text-anchor="end" dy="0.35em">
              <tspan>0</tspan>
            </text>
          </g>
        </g>
        <g transform="translate(0.0 275.69467787114843 ) ">
          <g transform="translate(-3.0 0.0 ) ">
            <text class="axis-text-y" text-anchor="end" dy="0.35em">
              <tspan>5</tspan>
            </text>
          </g>
        </g>
        <g transform="translate(0.0 212.3893557422969 ) ">
          <g transform="translate(-3.0 0.0 ) ">
            <text class="axis-text-y" text-anchor="end" dy="0.35em">
              <tspan>10</tspan>
            </text>
          </g>
        </g>
        <g transform="translate(0.0 149.08403361344537 ) ">
          <g transform="translate(-3.0 0.0 ) ">
            <text class="axis-text-y" text-anchor="end" dy="0.35em">
              <tspan>15</tspan>
            </text>
          </g>
        </g>
        <g transform="translate(0.0 85.77871148459383 ) ">
          <g transform="translate(-3.0 0.0 ) ">
            <text class="axis-text-y" text-anchor="end" dy="0.35em">
              <tspan>20</tspan>
            </text>
          </g>
        </g>
        <g transform="translate(0.0 22.473389355742256 ) ">
          <g transform="translate(-3.0 0.0 ) ">
            <text class="axis-text-y" text-anchor="end" dy="0.35em">
              <tspan>25</tspan>
            </text>
          </g>
        </g>
      </g>
      <g transform="translate(21.961210910936405 0.0 ) " clip-path="url(#xXxprefixXx1)" clip-bounds-jfx="[rect (0.0, 0.0), (562.5291288269711, 339.0)]">
        <defs>
          <clipPath id="xXxprefixXx1">
            <rect x="0.0" y="0.0" width="562.5291288269711" height="339.0">
            </rect>
          </clipPath>
        </defs>
        <rect x="490.46961232434273" y="31.336134453781483" height="307.6638655462185" width="46.49001064685717" stroke="rgb(255,255,255)" stroke-opacity="1.0" fill="rgb(246,153,97)" fill-opacity="1.0" stroke-width="0.0">
        </rect>
        <rect x="438.81404493894587" y="159.2128851540616" height="179.7871148459384" width="46.490010646857115" stroke="rgb(255,255,255)" stroke-opacity="1.0" fill="rgb(245,146,98)" fill-opacity="1.0" stroke-width="0.0">
        </rect>
        <rect x="387.15847755354906" y="141.48739495798318" height="197.51260504201682" width="46.49001064685717" stroke="rgb(255,255,255)" stroke-opacity="1.0" fill="rgb(245,145,98)" fill-opacity="1.0" stroke-width="0.0">
        </rect>
        <rect x="283.84734278275545" y="112.36694677871148" height="226.63305322128852" width="46.49001064685717" stroke="rgb(255,255,255)" stroke-opacity="1.0" fill="rgb(243,131,100)" fill-opacity="1.0" stroke-width="0.0">
        </rect>
        <rect x="232.19177539735864" y="137.6890756302521" height="201.3109243697479" width="46.49001064685717" stroke="rgb(255,255,255)" stroke-opacity="1.0" fill="rgb(238,102,102)" fill-opacity="1.0" stroke-width="0.0">
        </rect>
        <rect x="128.88064062656503" y="147.81792717086833" height="191.18207282913167" width="46.490010646857144" stroke="rgb(255,255,255)" stroke-opacity="1.0" fill="rgb(250,200,88)" fill-opacity="1.0" stroke-width="0.0">
        </rect>
        <rect x="77.22507324116823" y="159.2128851540616" height="179.7871148459384" width="46.49001064685713" stroke="rgb(255,255,255)" stroke-opacity="1.0" fill="rgb(248,175,93)" fill-opacity="1.0" stroke-width="0.0">
        </rect>
        <rect x="25.569505855771418" y="187.06722689075627" height="151.93277310924373" width="46.49001064685714" stroke="rgb(255,255,255)" stroke-opacity="1.0" fill="rgb(246,153,97)" fill-opacity="1.0" stroke-width="0.0">
        </rect>
      </g>
      <g transform="translate(21.961210910936405 0.0 ) " clip-path="url(#xXxprefixXx2)" clip-bounds-jfx="[rect (0.0, 0.0), (562.5291288269711, 339.0)]">
        <defs>
          <clipPath id="xXxprefixXx2">
            <rect x="0.0" y="0.0" width="562.5291288269711" height="339.0">
            </rect>
          </clipPath>
        </defs>
        <g>
          <path d="M48.81451117919998 187.06722689075627 L48.81451117919998 187.06722689075627 L100.47007856459679 159.2128851540616 L152.1256459499936 147.81792717086833 L255.43678072078723 137.6890756302521 L307.09234810618403 112.36694677871148 L410.40348287697765 141.48739495798318 L462.05905026237446 159.2128851540616 L513.7146176477712 31.336134453781483 " fill="none" stroke-width="6.6000000000000005" stroke="rgb(110,85,150)" stroke-opacity="1.0" stroke-dasharray="6.6000000000000005,21.120000000000005,28.380000000000003,21.120000000000005">
          </path>
        </g>
      </g>
    </g>
    <g transform="translate(44.9612109109364 15.2 ) ">
      <text class="plot-title" y="0.0">
        <tspan>Simple plot with kandy-lets-plot</tspan>
      </text>
    </g>
    <g transform="translate(14.5 203.5 ) rotate(-90.0 ) ">
      <text class="axis-title-y" y="0.0" text-anchor="middle">
        <tspan>temperature</tspan>
      </text>
    </g>
    <g transform="translate(326.225775324422 410.5 ) ">
      <text class="axis-title-x" y="0.0" text-anchor="middle">
        <tspan>time</tspan>
      </text>
    </g>
    <g transform="translate(617.4903397379076 124.75 ) ">
      <rect x="5.0" y="5.0" height="147.5" width="77.5096602620925" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" fill="rgb(255,255,255)" fill-opacity="1.0">
      </rect>
      <g transform="translate(10.0 10.0 ) ">
        <g transform="translate(0.0 10.5 ) ">
          <text class="legend-title" y="0.0">
            <tspan>humidity</tspan>
          </text>
        </g>
        <g transform="translate(0.0 22.5 ) ">
          <g>
            <rect x="0.0" y="0.0" height="115.0" width="23.0" stroke-width="0.0" fill="rgb(238,105,102)" fill-opacity="1.0">
            </rect>
            <rect x="0.0" y="7.55" height="107.45" width="23.0" stroke-width="0.0" fill="rgb(239,110,101)" fill-opacity="1.0">
            </rect>
            <rect x="0.0" y="13.1" height="101.9" width="23.0" stroke-width="0.0" fill="rgb(240,116,101)" fill-opacity="1.0">
            </rect>
            <rect x="0.0" y="18.65" height="96.35" width="23.0" stroke-width="0.0" fill="rgb(241,121,101)" fill-opacity="1.0">
            </rect>
            <rect x="0.0" y="24.2" height="90.8" width="23.0" stroke-width="0.0" fill="rgb(242,126,100)" fill-opacity="1.0">
            </rect>
            <rect x="0.0" y="29.75" height="85.25" width="23.0" stroke-width="0.0" fill="rgb(243,131,100)" fill-opacity="1.0">
            </rect>
            <rect x="0.0" y="35.3" height="79.7" width="23.0" stroke-width="0.0" fill="rgb(243,136,99)" fill-opacity="1.0">
            </rect>
            <rect x="0.0" y="40.849999999999994" height="74.15" width="23.0" stroke-width="0.0" fill="rgb(244,141,98)" fill-opacity="1.0">
            </rect>
            <rect x="0.0" y="46.39999999999999" height="68.60000000000001" width="23.0" stroke-width="0.0" fill="rgb(245,146,98)" fill-opacity="1.0">
            </rect>
            <rect x="0.0" y="51.94999999999999" height="63.05000000000001" width="23.0" stroke-width="0.0" fill="rgb(245,151,97)" fill-opacity="1.0">
            </rect>
            <rect x="0.0" y="57.499999999999986" height="57.500000000000014" width="23.0" stroke-width="0.0" fill="rgb(246,156,96)" fill-opacity="1.0">
            </rect>
            <rect x="0.0" y="63.04999999999998" height="51.95000000000002" width="23.0" stroke-width="0.0" fill="rgb(247,161,96)" fill-opacity="1.0">
            </rect>
            <rect x="0.0" y="68.59999999999998" height="46.40000000000002" width="23.0" stroke-width="0.0" fill="rgb(247,165,95)" fill-opacity="1.0">
            </rect>
            <rect x="0.0" y="74.14999999999998" height="40.85000000000002" width="23.0" stroke-width="0.0" fill="rgb(248,170,94)" fill-opacity="1.0">
            </rect>
            <rect x="0.0" y="79.69999999999997" height="35.300000000000026" width="23.0" stroke-width="0.0" fill="rgb(248,175,93)" fill-opacity="1.0">
            </rect>
            <rect x="0.0" y="85.24999999999997" height="29.75000000000003" width="23.0" stroke-width="0.0" fill="rgb(249,179,93)" fill-opacity="1.0">
            </rect>
            <rect x="0.0" y="90.79999999999997" height="24.20000000000003" width="23.0" stroke-width="0.0" fill="rgb(249,184,92)" fill-opacity="1.0">
            </rect>
            <rect x="0.0" y="96.34999999999997" height="18.650000000000034" width="23.0" stroke-width="0.0" fill="rgb(249,189,91)" fill-opacity="1.0">
            </rect>
            <rect x="0.0" y="101.89999999999996" height="13.100000000000037" width="23.0" stroke-width="0.0" fill="rgb(250,193,90)" fill-opacity="1.0">
            </rect>
            <rect x="0.0" y="107.44999999999996" height="7.55000000000004" width="23.0" stroke-width="0.0" fill="rgb(250,198,89)" fill-opacity="1.0">
            </rect>
            <line x1="0.0" y1="100.19230769230771" x2="4.6" y2="100.19230769230771" stroke-width="1.0" stroke="rgb(255,255,255)" stroke-opacity="1.0">
            </line>
            <line x1="18.4" y1="100.19230769230771" x2="23.0" y2="100.19230769230771" stroke-width="1.0" stroke="rgb(255,255,255)" stroke-opacity="1.0">
            </line>
            <g transform="translate(26.9903027277341 104.7423076923077 ) ">
              <text class="legend-item" y="0.0">
                <tspan>0.2</tspan>
              </text>
            </g>
            <line x1="0.0" y1="71.73076923076924" x2="4.6" y2="71.73076923076924" stroke-width="1.0" stroke="rgb(255,255,255)" stroke-opacity="1.0">
            </line>
            <line x1="18.4" y1="71.73076923076924" x2="23.0" y2="71.73076923076924" stroke-width="1.0" stroke="rgb(255,255,255)" stroke-opacity="1.0">
            </line>
            <g transform="translate(26.9903027277341 76.28076923076924 ) ">
              <text class="legend-item" y="0.0">
                <tspan>0.4</tspan>
              </text>
            </g>
            <line x1="0.0" y1="43.269230769230774" x2="4.6" y2="43.269230769230774" stroke-width="1.0" stroke="rgb(255,255,255)" stroke-opacity="1.0">
            </line>
            <line x1="18.4" y1="43.269230769230774" x2="23.0" y2="43.269230769230774" stroke-width="1.0" stroke="rgb(255,255,255)" stroke-opacity="1.0">
            </line>
            <g transform="translate(26.9903027277341 47.81923076923077 ) ">
              <text class="legend-item" y="0.0">
                <tspan>0.6</tspan>
              </text>
            </g>
            <line x1="0.0" y1="14.80769230769232" x2="4.6" y2="14.80769230769232" stroke-width="1.0" stroke="rgb(255,255,255)" stroke-opacity="1.0">
            </line>
            <line x1="18.4" y1="14.80769230769232" x2="23.0" y2="14.80769230769232" stroke-width="1.0" stroke="rgb(255,255,255)" stroke-opacity="1.0">
            </line>
            <g transform="translate(26.9903027277341 19.357692307692318 ) ">
              <text class="legend-item" y="0.0">
                <tspan>0.8</tspan>
              </text>
            </g>
          </g>
        </g>
      </g>
    </g>
    <g transform="translate(607.4903397379076 432.1 ) ">
      <text class="plot-caption" y="0.0" text-anchor="end">
        <tspan>See `examples` section for more</tspan>
      </text>
      <text class="plot-caption" y="13.0" text-anchor="end">
        <tspan>complicated and interesting examples!</tspan>
      </text>
    </g>
    <path fill="rgb(0,0,0)" fill-opacity="0.0" stroke="rgb(71,71,71)" stroke-opacity="1.0" stroke-width="0.0" d="M0.0 0.0 L0.0 453.0 L705.0 453.0 L705.0 0.0 Z">
    </path>
  </g>
  <g id="xXxprefixXx3">
  </g>
</svg>