JSFiddle - React, Tailwind, and code Playground

by evanemolo

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<div class="span12">
<button class='btn' id="startBtn">Start</button>
<button class='btn' id="pauseBtn">Pause</button>
<button class='btn' id="resumeBtn">Resume</button>
</div>

JavaScript

$(document).ready(function () {

  var duration = 10;
  durationMillis = duration * 1000;

  $("#startBtn").click(function() {
      playHead.transition()
      .ease('linear')
      .duration(durationMillis)
      .attr('x', width-5);
  });

  $("#pauseBtn").click(function() {
    playHead.transition().duration( 0 );
  });

  $("#resumeBtn").click(function() {
    var e = d3.select("#time");
    e.attr("T",0);
    console.log(e)
    playHead.transition()
        .duration( durationMillis )
        .ease( "linear" )
        .attr("T",1);
  });

  // Formatters for counts and times (converting numbers to Dates).
  var formatCount = d3.format(",.0f"),
      formatTime = d3.time.format(":%M"),
      formatMinutes = function(d) { return formatTime(new Date(2012, 0, 1, 0, d)); };

  var margin = {top: 10, right: 20, bottom: 30, left: 50},
      width = 400;
      height = 200;

  var x = d3.scale.linear()
      .domain([0, duration])
      .range([0, width]);

  var xAxis = d3.svg.axis()
      .scale(x)
      .orient("bottom")
      .tickFormat(formatMinutes);

  var svg = d3.select('body').append('svg')
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

  var playHead = svg.append("rect")
    .attr('x', -5)
    .attr('y', height-60)
    .attr('width', 10)
    .attr('height', 60)
    .style('fill', '#1ABC9C');

});