jinja-sample-plot.svg

<svg 
     xmlns="http://www.w3.org/2000/svg" 
     xml:lang="en" 
     xmlns:xlink="http://www.w3.org/1999/xlink" 
     viewBox="0 0 600 400" 
     width="600">
  <!-- Set the background color -->
  <rect id="background" x="0" y="0" width="600" height="400" fill="hsl(0,0%,95%)" />
  <!-- Create the Scatterplot -->
  <g id="plot-layer">
    <circle cx="160.83333333333331" cy="268.3333333333333" r="5" fill="hsl(0,0%,50%)" />
    <circle cx="241.66666666666666" cy="236.66666666666666" r="5" fill="hsl(0,0%,50%)" />
    <circle cx="322.5" cy="205.0" r="5" fill="hsl(230,70%,60%)" />
    <circle cx="403.3333333333333" cy="173.33333333333331" r="5" fill="hsl(230,70%,60%)" />
    <circle cx="484.16666666666663" cy="141.66666666666666" r="5" fill="hsl(0,0%,50%)" />
  </g>
  <!-- Draw the Axis, Ticks, & Labels -->
  <g id="axis-layer">
    <!-- Draw the axis -->
    <polyline points=" 80 110 80 300 565 300" stroke="hsl(0,0%,30%)" stroke-linecap="round" fill="transparent" />
    <!-- Draw the yaxis label (rotated) -->
       <g transform="translate(0,20)">
            <text x="30" y="176.5" fill="hsl(0,0%,30%)" font-family="helvetica" text-align="center" transform="rotate(-90,30,176.5)"> Price </text>
       </g>
    <!-- Draw the yticks -->
    <g id="yticks">
      <line x1="80" y1="300.0" x2="70" y2="300.0" stroke="hsl(0,0%,30%)" stroke-linecap="round" />
      <text x="80" y="300.0" fill="hsl(0,0%,30%)" font-family="helvetica" text-anchor="end" dx="-15" dy="5" font-weight="lighter"> $0 </text>
      <line x1="80" y1="268.3333333333333" x2="70" y2="268.3333333333333" stroke="hsl(0,0%,30%)" stroke-linecap="round" />
      <text x="80" y="268.3333333333333" fill="hsl(0,0%,30%)" font-family="helvetica" text-anchor="end" dx="-15" dy="5" font-weight="lighter"> $1 </text>
      <line x1="80" y1="236.66666666666666" x2="70" y2="236.66666666666666" stroke="hsl(0,0%,30%)" stroke-linecap="round" />
      <text x="80" y="236.66666666666666" fill="hsl(0,0%,30%)" font-family="helvetica" text-anchor="end" dx="-15" dy="5" font-weight="lighter"> $2 </text>
      <line x1="80" y1="205.0" x2="70" y2="205.0" stroke="hsl(0,0%,30%)" stroke-linecap="round" />
      <text x="80" y="205.0" fill="hsl(0,0%,30%)" font-family="helvetica" text-anchor="end" dx="-15" dy="5" font-weight="lighter"> $3 </text>
      <line x1="80" y1="173.33333333333331" x2="70" y2="173.33333333333331" stroke="hsl(0,0%,30%)" stroke-linecap="round" />
      <text x="80" y="173.33333333333331" fill="hsl(0,0%,30%)" font-family="helvetica" text-anchor="end" dx="-15" dy="5" font-weight="lighter"> $4 </text>
      <line x1="80" y1="141.66666666666666" x2="70" y2="141.66666666666666" stroke="hsl(0,0%,30%)" stroke-linecap="round" />
      <text x="80" y="141.66666666666666" fill="hsl(0,0%,30%)" font-family="helvetica" text-anchor="end" dx="-15" dy="5" font-weight="lighter"> $5 </text>
      <line x1="80" y1="110.0" x2="70" y2="110.0" stroke="hsl(0,0%,30%)" stroke-linecap="round" />
      <text x="80" y="110.0" fill="hsl(0,0%,30%)" font-family="helvetica" text-anchor="end" dx="-15" dy="5" font-weight="lighter"> $6 </text>
    </g>
    <!-- Draw the x axis label -->
    <text x="322.5" y="350" fill="hsl(0,0%,30%)" font-family="helvetica" text-anchor="middle"> Time (PM) </text>
    <!-- Draw the xticks -->
    <g id="xticks">
      <line x1="80.0" y1="300" x2="80.0" y2="310" stroke="hsl(0,0%,30%)" stroke-linecap="round" />
      <text x="80.0" y="300" fill="hsl(0,0%,30%)" font-family="helvetica" text-anchor="middle" dx="0" dy="25" font-weight="lighter"> 1:00 </text>
      <line x1="160.83333333333331" y1="300" x2="160.83333333333331" y2="310" stroke="hsl(0,0%,30%)" stroke-linecap="round" />
      <text x="160.83333333333331" y="300" fill="hsl(0,0%,30%)" font-family="helvetica" text-anchor="middle" dx="0" dy="25" font-weight="lighter"> 2:00 </text>
      <line x1="241.66666666666666" y1="300" x2="241.66666666666666" y2="310" stroke="hsl(0,0%,30%)" stroke-linecap="round" />
      <text x="241.66666666666666" y="300" fill="hsl(0,0%,30%)" font-family="helvetica" text-anchor="middle" dx="0" dy="25" font-weight="lighter"> 3:00 </text>
      <line x1="322.5" y1="300" x2="322.5" y2="310" stroke="hsl(0,0%,30%)" stroke-linecap="round" />
      <text x="322.5" y="300" fill="hsl(0,0%,30%)" font-family="helvetica" text-anchor="middle" dx="0" dy="25" font-weight="lighter"> 4:00 </text>
      <line x1="403.3333333333333" y1="300" x2="403.3333333333333" y2="310" stroke="hsl(0,0%,30%)" stroke-linecap="round" />
      <text x="403.3333333333333" y="300" fill="hsl(0,0%,30%)" font-family="helvetica" text-anchor="middle" dx="0" dy="25" font-weight="lighter"> 5:00 </text>
      <line x1="484.16666666666663" y1="300" x2="484.16666666666663" y2="310" stroke="hsl(0,0%,30%)" stroke-linecap="round" />
      <text x="484.16666666666663" y="300" fill="hsl(0,0%,30%)" font-family="helvetica" text-anchor="middle" dx="0" dy="25" font-weight="lighter"> 6:00 </text>
      <line x1="565.0" y1="300" x2="565.0" y2="310" stroke="hsl(0,0%,30%)" stroke-linecap="round" />
      <text x="565.0" y="300" fill="hsl(0,0%,30%)" font-family="helvetica" text-anchor="middle" dx="0" dy="25" font-weight="lighter"> 7:00 </text>
    </g>
  </g>
  <!-- Add the title, subtitle, & description -->
  <g id="text-layer">
    <text x="15" y="40" style="font-family: helvetica; font-size: 28px; font-weight: normal;" fill="hsl(0,0%,0%)"> Time-Price Comparison </text>
    <text x="15" y="70" style="font-family: helvetica; font-size: 18px; font-weight: normal;" fill="hsl(0,0%,50%)"> Scatter plot of time vs price. </text>
    <text x="15" y="385" style="font-family: helvetica; font-size: 10px; font-weight: normal;" fill="hsl(0,0%,50%)">
      Note: Data made up from my imagination and therefore not real. [2020]
    </text>
  </g>
</svg>