Animated Data Bar Chart & Graph

animated-data-bar-chart-graph.markdown

Animated Data Bar Chart & Graph

An interactive bar graph packed with animations and information. Built with CSS and jQuery.

A Pen by Aranganathan on CodePen.

License.

index.html

<main class="stats">
  <header class="stats__header">
    <div class="stats__header-num">
      <p>8</p>
    </div>
    <div class="stats__header-name">
      <p>Alex<span>Ovechkin</span></p>
    </div>
  </header>
  <ul class="stats__list">
    <li class="stats__item">
      <p class="stats__item-num">65</p>
      <div class="stats__item-bar"></div>
    </li>
    <li class="stats__item">
      <p class="stats__item-num">56</p>
      <div class="stats__item-bar"></div>
    </li>
    <li class="stats__item">
      <p class="stats__item-num">50</p>
      <div class="stats__item-bar"></div>
    </li>
    <li class="stats__item">
      <p class="stats__item-num">32</p>
      <div class="stats__item-bar"></div>
    </li>
    <li class="stats__item">
      <p class="stats__item-num">38</p>
      <div class="stats__item-bar"></div>
    </li>
    <li class="stats__item">
      <p class="stats__item-num">32</p>
      <div class="stats__item-bar"></div>
    </li>
    <li class="stats__item">
      <p class="stats__item-num">51</p>
      <div class="stats__item-bar"></div>
    </li>
    <li class="stats__item">
      <p class="stats__item-num">50</p>
      <div class="stats__item-bar"></div>
    </li>
  </ul>
  <div class="stats__overlay">
    <div class="stats__overlay-back">
      <svg fill="white" xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36"><path d="M30 16.5H11.74l8.38-8.38L18 6 6 18l12 12 2.12-2.12-8.38-8.38H30v-3z"></path></svg>
      <p id="year">2009-2010</p>
    </div>
    <div class="stats__overlay-avg">
      <p class="avg" id="avg">0.69</p>
      <p>Goals per game</p>
    </div>
    <div class="stats__overlay-info">
      <div class="stats__overlay-info-half">
        <p id="goals">50</p>
        <p>Goals</p>
      </div>
      <div class="stats__overlay-info-half">
        <p id="games">72</p>
        <p>Games</p>
      </div>
    </div>
  </div>
</main>

script.js

var header = $('.stats__header');
var bar  = $('.stats__item-bar');
var nums = $('.stats__item-num');
var overlay = $('.stats__overlay');
var back = $('.stats__overlay-back');
var isOpen = false;

var vYear = $('#year');
var vAvg = $('#avg');
var vGames = $('#games');
var vGoal = $('#goals');

$(document).on('ready', function() {
  entrance();
});

bar.on('click', showOverlay);
back.on('click', showOverlay);

function entrance() {
  bar.addClass('active');
  header.addClass('active');
  header.on('transitionend webkitTransitionend', function() {
    nums.css('opacity', '1');
    bar.css('transition-delay', '0');
    header.off('transitionend webkitTransitionend');
  });
}

function showOverlay() {
  if (!isOpen) {
    overlay.addClass('active').removeAttr('style');
    bar.css('transition', 'all 0.4s cubic-bezier(0.86, 0, 0.07, 1)')
    .removeClass('active');
    header.removeClass('active');
    nums.css('opacity', '0');
    isOpen = true;
    
   updateInfo($(this).parent().index());
  } else {
    overlay.css('transition', 'all 0.4s cubic-bezier(0.755, 0.05, 0.855, 0.06)').removeClass('active');
    bar.addClass('active').removeAttr('style');
    header.addClass('active');
    nums.css('opacity', '1');
    isOpen = false;
  }
}

var data = [
  {
    year: '2007-2008',
    goals: '65',
    games: '82',
    avg: '0.79'
    
  },
  {
    year: '2008-2009',
    goals: '56',
    games: '79',
    avg: '0.7'
    
  },
  {
    year: '2009-2010',
    goals: '50',
    games: '72',
    avg: '0.69'
    
  },
  {
    year: '2010-2011',
    goals: '32',
    games: '79',
    avg: '0.40'
    
  },
  {
    year: '2011-2012',
    goals: '38',
    games: '78',
    avg: '0.48'
    
  },
  {
    year: '2012-2013',
    goals: '32',
    games: '48',
    avg: '0.66'
    
  },
  {
    year: '2013-2014',
    goals: '51',
    games: '78',
    avg: '0.65'
    
  },
  {
    year: '2014-2015',
    goals: '50',
    games: '76',
    avg: '0.66'
    
  }
];

function updateInfo(index) {
  vYear.text(data[index].year);
  vAvg.text(data[index].avg);
  vGoal.text(data[index].goals);
  vGames.text(data[index].games);
}

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.scss

$spacing: 25px;
$heights: (65, 56, 50, 32, 38, 32.1, 51, 50.1);

* {
  box-sizing: border-box;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  line-height: 1.5;
  font-family: 'Lato';
  -webkit-font-smoothing: antialiased;
  color: white;
  background: tomato;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.stats {
  position: relative;
  padding: 0 $spacing;
  
  @media (max-width: 690px) {
    width: 100%;
  }
  
  &__header {
    display: flex;
    align-items: center;
    transform: translate3d(0, -150px, 0);
    opacity: 0;
    transform-origin: left center;
    transition: all .4s cubic-bezier(0.23, 1, 0.32, 1);
    
    &.active {
      transform: none;
      opacity: 1;
    }
  }
  
  &__header-num {
    margin-right: $spacing;
    
    p {
      font-size: 80px;
      margin: 0;
      font-weight: 700;
    }
  }
  
  &__header-name {
    
    p {
      color: mix(crimson, white, 20);
      margin: 0;
      font-size: 18px;
    }
    
    span {
      display: block;
      color: white;
      font-weight: 700;
      font-size: 36px;
      line-height: 0.8;
    }
  }
  
  &__item {
    height: 400px;
    display: flex;
    flex-direction: column-reverse;
    float: left;
    position: relative;
    text-align: center;
    margin-right: $spacing * 1.5;
    perspective: 1000px;
    transition: all .3s ease-in-out;
    
    @each $height in $heights {
      $i: index($heights, $height);
      &:nth-of-type(#{$i}) .stats__item-bar {
        height: ($height) * 4px;
        transition-delay: $i * 0.1s;
      }
    }
  
    &:last-child {
      margin-right: 0;
    }
  
    @media (max-width: 690px) {
      float: none;
      height: auto;
      width: 100%;
      
      @each $height in $heights {
        $i: index($heights, $height);
        &:nth-of-type(#{$i}) .stats__item-bar {
          width: ($height) * 1%;
          height: 30px;
          transition-delay: $i * 0.1s;
        }
      }
  
      flex-direction: row;
      align-items: center;
  
      .stats__item-num {
        margin-right: $spacing;
      }
    }

    &:hover {
      opacity: 0.7;
    }
  }
  
  &__item-bar {
    order: 0;
    width: 40px;
    background: white;
    transform: scaleY(0) translate3d(0, 0, 0);
    cursor: pointer;
    transform-origin: center bottom;
    transition: all .5s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow: 10px 15px rgba(black, 0.2);
    
    &.active {
      transform: none;
    }
  }

  &__item-num {
    margin-top: $spacing;
    opacity: 0;
    transition: all .4s cubic-bezier(0.23, 1, 0.32, 1);
  }

  &__overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: $spacing;
    transform: scale(1.5);
    visibility: hidden;
    opacity: 0;
    transition: all .6s cubic-bezier(0.23, 1, 0.32, 1);
    
    &.active {
      opacity: 1;
      visibility: visible;
      transform: none;
    }
    
    @media (max-width: 690px) {
      padding: $spacing/2;
    }
  }

  &__overlay-avg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    background: mix(crimson, lighten(black, 20), 15);
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    
    > p {
      margin: 0;
    }
    
    .avg {
      font-size: 100px;
      font-weight: 700;
    }
    
    @media (max-width: 690px) {
      width: 240px;
      height: 240px;
      
      .avg {
        font-size: 65px;
      }
    }
  }

  &__overlay-info {
    position: absolute;
    bottom: $spacing;
    left: $spacing * 2;
    display: flex;
    
    @media (max-width: 690px) {
      left: $spacing;
    }
  }

  &__overlay-info-half {
    margin-right: $spacing;
    
    p {
      margin: 0;
      line-height: 1.2;
      
      &:first-child {
        font-size: 50px;
        font-weight: 700;
      }
    }
    
    @media (max-width: 690px) {
      p:first-child {
        font-size: 24px;
      }
    }
  }

  &__overlay-back {
    display: flex;
    align-items: center;
    cursor: pointer;
    
    > svg {
      transition: all .5s cubic-bezier(0.23, 1, 0.32, 1);
    }
    
    &:hover {
      > svg {
        transform: translateX(-5px);
      }
    }
    
    p {
      font-weight: 700;
      font-size: 24px;
      margin: 0 0 0 $spacing/2;
    }
    
    @media (max-width: 690px) {
      p {
        font-size: 18px;
      }
    }
  }
}