Horloge Ennio

_.md

[ Launch: Horloge Ennio ] 6098606 by biovisualize

config.json

{"description":"Horloge Ennio","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"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,"thumbnail":"http://i.imgur.com/5bkI31g.png"}

inlet.js

var w = h = 600;

var data = d3.range(360).map(function(d, i){
  var t = d/180*Math.PI;
  var x = w/16*Math.pow(Math.sin(t),3);
  var test = h/20;
  var test2 = test/5;
  var y = test*Math.cos(t)-(test/2.8)*Math.cos(2*t)-2*Math.cos(3*t)-Math.cos(4*t);
  return {x: x, y: y};
});

var x = d3.scale.linear().range([0, w/100]),
    y = d3.scale.linear().range([h/100, 0]);

var line = d3.svg.line()
.x(function(d) { return x(d.x); })
.y(function(d) { return y(d.y); })(data);

var svg = d3.select('svg')
.attr({width: w, height: h});

var now = new Date();
var birth = new Date('June 23 2008');
var sec = (Date.parse(now) - Date.parse(birth))/1000
var min = ~~(sec/60);
var hour = ~~(min/60);
var day = ~~(hour/24);

var g = svg.append('g')
.attr({transform: 'translate('+w/2+','+h/2+') scale(1)'});
g.append('path')
.attr({d: line});
var text = g.append('text').attr({transform: 'translate(-100,-50)'});
text.append('tspan')
.attr('class', 'name')
.text('Ennio');
text.append('tspan')
.attr('class', 'msg')
.attr({x: 0, dy: '30px'})
.text("Je t'aime depuis");
text.append('tspan')
.attr('class', 'day')
.attr({x: 0, dy: '40px'})
text.append('tspan')
.attr('class', 'hour')
.attr({x: 0, dy: '25px'})
text.append('tspan')
.attr('class', 'min')
.attr({x: 0, dy: '25px'})
text.append('tspan')
.attr('class', 'sec')
.attr({x: 0, dy: '25px'})
updateTime();

setInterval(function(){
  g.transition()
  .ease('bounce')
  .attr({transform: 'translate('+w/2+','+h/2+') scale(1)'})
  .transition()
  .duration(100)
  .attr({transform: 'translate('+w/2+','+h/2+') scale(0.8)'});
  
  updateTime();
  
},1000);

var now, birth, sec, min, hour, day;
function updateTime(d, i){
  now = new Date();
  birth = new Date('June 23 2008');
  sec = (Date.parse(now) - Date.parse(birth))/1000
  min = ~~(sec/60);
  hour = ~~(min/60);
  day = ~~(hour/24);
  
  text.select('.day').text(day  + ' jours');
  text.select('.hour').text(hour + ' heures');
  text.select('.min').text(min + ' minutes');
  text.select('.sec').text(sec + ' secondes');
}

style.css

path{
  fill: red;
  stroke: pink;
  stroke-width: 3px;
  stroke-linejoin': round
}
text{
  fill: pink;
  font-size: 20px
}
text tspan.name{
  font-size: 66px
}
text tspan.msg{
  font-size: 36px
}