<figure>

<ul class="sparklist">
      <li>
          <a href="http://www.example.com/fruits/apples/">Apples</a>
        <span class="sparkline">
          <span class="index"><span class="count" style="height: 27%;">(60,</span> </span>
          <span class="index"><span class="count" style="height: 97%;">220,</span> </span>
          <span class="index"><span class="count" style="height: 62%;">140,</span> </span>
          <span class="index"><span class="count" style="height: 35%;">80,</span> </span>
          <span class="index"><span class="count" style="height: 49%;">110,</span> </span>
          <span class="index"><span class="count" style="height: 40%;">90,</span> </span>
          <span class="index"><span class="count" style="height: 80%;">180,</span> </span>
          <span class="index"><span class="count" style="height: 62%;">140,</span> </span>
          <span class="index"><span class="count" style="height: 53%;">120,</span> </span>
          <span class="index"><span class="count" style="height: 71%;">160,</span> </span>
          <span class="index"><span class="count" style="height: 78%;">175,</span> </span>
          <span class="index"><span class="count" style="height: 100%;">225,</span> </span>
          <span class="index"><span class="count" style="height: 78%;">175,</span> </span>
          <span class="index"><span class="count" style="height: 56%;">125)</span> </span>
        </span>
      </li>
      <li>
        <a href="http://www.example.com/fruits/apples/">Bananas</a>
        <span class="sparkline">
          <span class="index"><span class="count" style="height: 40%;">(90,</span> </span>
          <span class="index"><span class="count" style="height: 49%;">110,</span> </span>
          <span class="index"><span class="count" style="height: 27%;">60,</span> </span>
          <span class="index"><span class="count" style="height: 33%;">75,</span> </span>
          <span class="index"><span class="count" style="height: 56%;">125,</span> </span>
          <span class="index"><span class="count" style="height: 67%;">150,</span> </span>
          <span class="index"><span class="count" style="height: 44%;">100,</span> </span>
          <span class="index"><span class="count" style="height: 18%;">40,</span> </span>
          <span class="index"><span class="count" style="height: 33%;">75,</span> </span>
          <span class="index"><span class="count" style="height: 40%;">90,</span> </span>
          <span class="index"><span class="count" style="height: 27%;">60,</span> </span>
          <span class="index"><span class="count" style="height: 78%;">175,</span> </span>
          <span class="index"><span class="count" style="height: 100%;">225,</span> </span>
          <span class="index"><span class="count" style="height: 56%;">125)</span> </span>
        </span>
      </li>
      <li>
        <a href="http://www.example.com/fruits/apples/">Cherries</a>
        <span class="sparkline">
          <span class="index"><span class="count" style="height: 22%;">(75,</span> </span>
          <span class="index"><span class="count" style="height: 44%;">100,</span> </span>
          <span class="index"><span class="count" style="height: 22%;">50,</span> </span>
          <span class="index"><span class="count" style="height: 35%;">80,</span> </span>
          <span class="index"><span class="count" style="height: 27%;">60,</span> </span>
          <span class="index"><span class="count" style="height: 40%;">90,</span> </span>
          <span class="index"><span class="count" style="height: 49%;">110,</span> </span>
          <span class="index"><span class="count" style="height: 18%;">40,</span> </span>
          <span class="index"><span class="count" style="height: 27%;">60,</span> </span>
          <span class="index"><span class="count" style="height: 33%;">75,</span> </span>
          <span class="index"><span class="count" style="height: 27%;">60,</span> </span>
          <span class="index"><span class="count" style="height: 18%;">40,</span> </span>
          <span class="index"><span class="count" style="height: 27%;">60,</span> </span>
          <span class="index"><span class="count" style="height: 44%;">100)</span></span>
        </span>
      </li>
      <li>
         <a href="http://www.example.com/fruits/apples/">Dates</a>
        <span class="sparkline">
          <span class="index"><span class="count" style="height: 11%;">(25,</span> </span>
          <span class="index"><span class="count" style="height: 22%;">50,</span> </span>
          <span class="index"><span class="count" style="height: 13%;">30,</span> </span>
          <span class="index"><span class="count" style="height: 8%;">20,</span> </span>
          <span class="index"><span class="count" style="height: 18%;">40,</span> </span>
          <span class="index"><span class="count" style="height: 11%;">25,</span> </span>
          <span class="index"><span class="count" style="height: 16%;">35,</span> </span>
          <span class="index"><span class="count" style="height: 22%;">50,</span> </span>
          <span class="index"><span class="count" style="height: 27%;">60,</span> </span>
          <span class="index"><span class="count" style="height: 13%;">30,</span> </span>
          <span class="index"><span class="count" style="height: 8%;">20,</span> </span>
          <span class="index"><span class="count" style="height: 18%;">40,</span> </span>
          <span class="index"><span class="count" style="height: 22%;">50,</span> </span>
          <span class="index"><span class="count" style="height: 11%;">25)</span> </span>
        </span>
      </li>
    </ul>
  <figcaption>Fruits eaten in the last 14 days by type</figcaption>
</figure>

.sparklist {
  overflow: visible;
  width: 100%;
  margin: 0;
  padding: 0;
  
    li {
      list-style: none;
      margin-right: 35px;
        &:hover, &:focus {
          .sparkline {
            transform: translate(200px) scale(6);
          }
          .index .count {
            background-color: #0074d9;
          }
        }
    }
}

.sparkline { 
  display: inline-block;
  height: 1em;
  margin: 0 0.5em;
  transition: all .5s ease;
}

.sparkline .index { 
    position: relative;
  float: left; 
  width: 2px; 
  height: 1em; 
}

.sparkline .index .count { 
  display: block; 
  position: absolute; 
  bottom: 0; 
  left: 0; 
  width: 100%; 
  height: 0; 
  background: #AAA;
  font: 0/0 a;
  text-shadow: none;
  color: transparent;
}

/* LAYOUT STYLES */
html, body {
  height: 100%;
}

body {
  font-family: "fira-sans-2",sans-serif;
  font-weight: bold;
  -webkit-font-smoothing: antialiased;
  max-width: 600px;
  padding: 20px;
}

figcaption {
  margin-top: 40px;
}

a {
  font-size: 15px;
  text-transform: uppercase;
  text-decoration: none;
  color: #aaa;
  transition: color .3s ease;
  
  &:hover,
  &:focus {
    color: #333;
  }
}