countdown

_.md

[ Launch: countdown ] 5912569 by agent00tai

config.json

{"description":"countdown","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01}

inlet.js

var fields = [
  {name: "Days", value: 0, size: 17},
  {name: "Hours", value: 0, size: 24},
  {name: "Minutes", value: 0, size: 60},
  {name: "Seconds", value: 0, size: 60}
];

var countdownDate = Date.UTC(2013, 6, 18, 12, 0, 0);

var arc = d3.svg.arc()
    .innerRadius(70)
    .outerRadius(76)
    .startAngle(2 * Math.PI)
    .endAngle(function(d) {return ((d.size - d.value) / d.size) * 2 * Math.PI; });

var svg = d3.select("svg")
    .append("svg:g")
    .attr("transform", "translate(0," + (569 / 2) + ")");

setInterval(function() {
  
  var diff = get_time_difference();

  fields[0].previous = fields[0].value; fields[0].value = diff.days;
  fields[1].previous = fields[1].value; fields[1].value = diff.hours;
  fields[2].previous = fields[2].value; fields[2].value = diff.minutes;
  fields[3].previous = fields[3].value; fields[3].value = diff.seconds;

  // The nice round Clocks
  var path = svg.selectAll("path")
      .data(fields, function(d) { return d.name; });

  path.enter().append("svg:path")
      .attr("transform", function(d, i) { return "translate(" + ((239 * i) + 200) + ",0)"; })
	  .style("fill", "#3D9BDA")
    .transition()
      .ease("bounce")
      .duration(750)
      .attrTween("d", arcTween);

  path.transition()
      .ease("bounce")
      .duration(750)
      .attrTween("d", arcTween);

  path.exit().transition()
      .ease("bounce")
      .duration(750)
      .attrTween("d", arcTween)
      .remove();
  
  //The outer Text
  var text = svg.selectAll("text.outer")
      .data(fields, function(d) { return d.name; });

  text.enter().append("svg:text")
      .attr("class", "outer")
      .attr("transform", function(d, i) { return "translate(" + ((239 * i) + 200) + ",150)"; })
      .text(clock_name)
      .attr("font-family", "Raleway")
      .attr("font-size", "30px")
      .attr("text-anchor", "middle")
      .attr("font-weight", "200")
      .style("fill", "#3D9BDA");

  text
	.text(clock_name);
  
  text.exit().transition()
      .remove();
  
  //The inner Label
  var label = svg.selectAll("text.inner")
      .data(fields, function(d) { return d.name; });

  label.enter().append("svg:text")
      .attr("class", "inner")
      .attr("transform", function(d, i) { return "translate(" + ((239 * i) + 200) + ",8)"; })
      .text(countdown_label)
      .attr("font-family", "Raleway")
      .attr("font-size", "40px")
      .attr("text-anchor", "middle")
      .attr("font-weight", "200");

  label
      .text(countdown_label);
  
  label.exit().transition()
      .remove();
  

}, 1000);

function arcTween(b) {
  var interpol = d3.interpolate({value: b.previous}, b);
  return function(t) {
    return arc( interpol(t) );
  };
}

function get_time_difference()
{
       var nTotalDiff = countdownDate - new Date().getTime();
	   var oDiff = {};

       oDiff.days = Math.floor(nTotalDiff/1000/60/60/24);
       nTotalDiff -= oDiff.days*1000*60*60*24;

       oDiff.hours = Math.floor(nTotalDiff/1000/60/60);
       nTotalDiff -= oDiff.hours*1000*60*60;

       oDiff.minutes = Math.floor(nTotalDiff/1000/60);
       nTotalDiff -= oDiff.minutes*1000*60;

       oDiff.seconds = Math.floor(nTotalDiff/1000);

       return oDiff;

}

function countdown_label (d) {
  if(d.value > 9) {return d.value}
  else {return "0" + d.value}
}

function clock_name (d) {
  return d.name;
}