chrono

_.md

[ Launch: chrono ] 6041181 by roundrobin
[ Launch: sin waves ] 6040640 by roundrobin

See Previous Inlet [ Gist ]

config.json

{"editor_editor":{"coffee":false,"vim":false,"emacs":false,"width":600,"height":300,"hide":false},"description":"chrono","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.svg":{"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/rJfT6Mb.png","ajax-caching":true}

inlet.js

var r = 117,                           
    color = d3.scale.category20c();   
 

var x = 334;
var y= 200;
var data_month = d3.range(11);
var data_day = d3.range(31);
var data_hours = d3.range(24);
var data_minutes = d3.range(60);
var svg = d3.select("svg").append("g")
  .attr({
    transform: "translate("+[-466,-189]+")scale("+(2.2)+")",
    "class": "clock"
  });
var year = 2012;
var month = 0; // 1 - 12
var day = 1; // 1 - 31
var hour = 1; // 0 - 23
var minute = 1; // 0 - 59

var date = new Date(year,month,day,hour,minute);
console.log(date,date.getMonth());

makePie(data_month,22,0, -35, date.getMonth());
makePie(data_day,44,22, 182, date.getDate());
makePie(data_hours,65,44,177, date.getHours());
makePie(data_minutes,75,65, 178,date.getMinutes());

function makePie(data, outerRaf ,innerRaf, rotate, segment){
  var vis = svg
  .attr('id','month')
  .data([data])              
  .append("svg:g")               
  .attr("transform", "translate(" + x + "," + y + ")rotate("+(rotate)+")")   

  var arc = d3.svg.arc()
  .innerRadius(innerRaf)
  .outerRadius(outerRaf);

  var pie = d3.layout.pie()          
  .value(function(d) { return 1; });  

  console.log(data);
  
  var arcs = vis.selectAll("g.slice")    
  .data(pie)                  
  .enter()                    
  .append("svg:g")            
  .attr("class", function(d,i){
    return "slice-"+i;
  });  

  arcs.append("svg:path")
  .attr("fill", function(d, i) {
    if(i == segment){
      return "#BF0D18";
    }
    return "white";
   })
  .attr("stroke", "grey")
  .attr("stroke-width", 0.1)  
  .attr("d", arc);

  return vis;
  
}