<div id="lineCont"> 
  <div id="line"></div>
  <div id="span">Date Placeholder</div>
</div>
<div id="mainCont">
</div>
* {
  box-sizing: border-box;
}

body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  background: #e97162;
  font-family: Arial;
  overflow: hidden;
}

#lineCont {
  width: 100%;
  height: 20%;
}

#line {
  height: 6px;
  width: 70%;
  background: white;
  border-radius: 5px;
  margin: auto;
  top: 50%;
  transform: translateY(-50%);
  position: relative;
}

#span {
  display: none;
  width: 70%;
  margin: auto;
  margin-top: 25%;
  text-align: center;
  color: white;
}

.circle {
  width: 20px;
  height: 20px;
  background: #e97162;
  border-radius: 15px;
  position: absolute;
  top: -7px;
  border: 3px solid white;
  cursor: pointer;
  &:before {
    content: '';
    width: 10px;
    height: 10px;
    background: white;
    position: absolute;
    border-radius: 100%;
    top: 2px;
    left: 2px;
    display: none;
  }
  .popupSpan {
    width: auto;
    height: auto;
    padding: 10px;
    white-space: nowrap;
    display: inline-block;
    color: white;
    position: absolute;
    top: 20px;
    left: -75px;
    display: none;
    transition: all 0.1s ease-out;
  }
  // &:nth-child(odd) .popupSpan {
  //   top: 20px;
  // }
  &.hover:before, &.active:before {
    display: block;
  }
  &.hover .popupSpan, &.active .popupSpan {
    display: block;
  }
  &.active .popupSpan {
    top: -40px;
  }
}

#mainCont {
  height: 80%;
  width: 100%;
  position: relative;
  color: white;
  font-size: 62px;
  text-align: center;
  transition: all 0.2s ease-out;
  span {
    display: inline-block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 30%;
    transition: all 0.2s ease-out;
    &.right {
      left: 200%;
    }
    &.center {
      left: 0% !important;
    }
    &.left {
      left: -100%;
    }
  }
}
View Compiled
//Sample dates
var dates = ["6/12/2015", "8/15/2015", "10/22/2015", "11/2/2015", "12/22/2015"];
//For the purpose of stringifying MM/DD/YYYY date format
var monthSpan = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

//Format MM/DD/YYYY into string
function dateSpan(date) {
  var month = date.split('/')[0];
  month = monthSpan[month - 1];
  var day = date.split('/')[1];
  if (day.charAt(0) == '0') {
    day = day.charAt(1);
  }
  var year = date.split('/')[2];

  //Spit it out!
  return month + " " + day + ", " + year;
}

//Main function. Draw your circles.
function makeCircles() {
  //Forget the timeline if there's only one date. Who needs it!?
  if (dates.length < 2) {
    $("#line").hide();
    $("#span").show().text(dateSpan(dates[0]));
    //This is what you really want.
  } else if (dates.length >= 2) {
    //Set day, month and year variables for the math
    var first = dates[0];
    var last = dates[dates.length - 1];

    var firstMonth = parseInt(first.split('/')[0]);
    var firstDay = parseInt(first.split('/')[1]);

    var lastMonth = parseInt(last.split('/')[0]);
    var lastDay = parseInt(last.split('/')[1]);

    //Integer representation of the last day. The first day is represnted as 0
    var lastInt = ((lastMonth - firstMonth) * 30) + (lastDay - firstDay);

    //Draw first date circle
    $("#line").append('<div class="circle" id="circle0" style="left: ' + 0 + '%;"><div class="popupSpan">' + dateSpan(dates[0]) + '</div></div>');
    
    $("#mainCont").append('<span id="span0" class="center">' + dateSpan(dates[0]) + '</span>');

    //Loop through middle dates
    for (i = 1; i < dates.length - 1; i++) {
      var thisMonth = parseInt(dates[i].split('/')[0]);
      var thisDay = parseInt(dates[i].split('/')[1]);

      //Integer representation of the date
      var thisInt = ((thisMonth - firstMonth) * 30) + (thisDay - firstDay);

      //Integer relative to the first and last dates
      var relativeInt = thisInt / lastInt;

      //Draw the date circle
      $("#line").append('<div class="circle" id="circle' + i + '" style="left: ' + relativeInt * 100 + '%;"><div class="popupSpan">' + dateSpan(dates[i]) + '</div></div>');
      
      $("#mainCont").append('<span id="span' + i + '" class="right">' + dateSpan(dates[i]) + '</span>');
    }

    //Draw the last date circle
    $("#line").append('<div class="circle" id="circle' + i + '" style="left: ' + 99 + '%;"><div class="popupSpan">' + dateSpan(dates[dates.length - 1]) + '</div></div>'); 
    
    $("#mainCont").append('<span id="span' + i + '" class="right">' + dateSpan(dates[i]) + '</span>');
  }

  $(".circle:first").addClass("active");
}

makeCircles();

$(".circle").mouseenter(function() {
  $(this).addClass("hover");
});

$(".circle").mouseleave(function() {
  $(this).removeClass("hover");
});

$(".circle").click(function() {
  var spanNum = $(this).attr("id");
  selectDate(spanNum);
});

function selectDate(selector) {
  $selector = "#" + selector;
  $spanSelector = $selector.replace("circle", "span");
  var current = $selector.replace("circle", "");
  
  $(".active").removeClass("active");
  $($selector).addClass("active");
  
  if ($($spanSelector).hasClass("right")) {
    $(".center").removeClass("center").addClass("left")
    $($spanSelector).addClass("center");
    $($spanSelector).removeClass("right")
  } else if ($($spanSelector).hasClass("left")) {
    $(".center").removeClass("center").addClass("right");
    $($spanSelector).addClass("center");
    $($spanSelector).removeClass("left");
  }; 
};

console.log()

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js