Jess' Chronoglyph

_.md

[ Launch: Jess' Chronoglyph ] 6046954 by Jackreichert

config.json

{"description":"Jess' Chronoglyph","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

/* 
 * Conceived and developed http://byjess.net/
 * I'm just mucking around with it a bit
*/

var svg = d3.select("svg").append("g")
  .attr({
    transform: "translate("+[0,0]+")scale("+(1)+")",
    "class": "clock"
  });

var r = 76,                           
    color = "#BF0D18";   
 

var x = 311;
var y= 291;

var data_month = d3.range(12);
var data_day = d3.range(31);
var data_hours = d3.range(24);
var data_weekdays = d3.range(7);
var data_minutes = d3.range(60);
var data_seconds = d3.range(60);
var fullMonth = [
  "January",
  "February",
  "March",
  "April",
  "May",
  "June",
  "July",
  "August",
  "September",
  "October",
  "November",
  "December"	
];

var days = [
 "Monday",
  "Tuesday",
  "Wednesday",
  "Thursday",
  "Friday",
  "Saturday",
  "Sunday"  
];

var year = 2013;
var month = 1; // 1 - 12
var day = 1; // 1 - 31
var	hour = 	1; // 0 - 23
var minute = 59; // 0 - 59

var date = new Date(year, month-1, day, hour, minute);
var dayNr = date.getDay()-1;
if(dayNr == -1){
	dayNr = 6;
}


function printDate(date){
	var fullHour = date.getHours();
	var fullMinute = ('0' + (date.getMinutes())).slice(-2);
  var dayNr = date.getDay() - 1;
  if(dayNr == -1){
  	 dayNr = 6;
  }
	var fullDay = days[dayNr];
	return fullDay+" "+(date.getDate())+" "+fullMonth[date.getMonth()]+" "+date.getFullYear()+" - "+fullHour+":"+fullMinute+" o'clock";
}

var mainText = svg.append('text')
.text(printDate(date))
.attr({
  fill: "#000000",
  x : x,
  y: 68,
  "font-size": 31,
  "font-family": "Arial",
  "text-anchor": "middle"
});


var size = 52;

var month_r = size;
var day_r = month_r + size;
var weekday_r = day_r + 10;
var hour_r = weekday_r + size;
var minute_r = hour_r + 13;
var second_r = minute_r + size;


var month_selec = makePie(data_month, month_r, 0, date.getMonth());
var day_selec = makePie(data_day,day_r, month_r, date.getDate()-1);
var weekday_selec = makePie(data_weekdays,weekday_r, day_r, dayNr);

var hours_selec = makePie(data_hours,hour_r,weekday_r , date.getHours()-1);
var minutes_selec = makePie(data_minutes,minute_r,hour_r, date.getMinutes()-1);
//var seconds_selec = makePie(data_minutes,second_r,minute_r, date.getMinutes()-1);

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

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

  var pie = d3.layout.pie()
  .sort(d3.ascending)
  .value(function(d) { return 1; });  
  
  var arcs = vis.selectAll("g.slice")    
  .data(pie)                  
  .enter()                    
  .append("svg:g")            
  .attr("class", function(d,i){
    return "slice slice-"+i;
  });  

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

  return vis;
  
}

function randomDate(start, end) {
    return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()))
}
var setNowDate = function(){
	var nowDate = new Date();
  	new setGlyphDate(nowDate);
    window.setInterval(setNowDate, 500);
}
var createRandomDate = function(){
	var raddate = randomDate(new Date(2012, 0, 1), new Date());
	new setGlyphDate(raddate);
}
var setGlyphDate = function(newDate){
  var newMonth = newDate.getMonth();
  var newDay = newDate.getDate()-1;
  var newHour = newDate.getHours()-1;
  var newMinute = newDate.getMinutes()-1;
  if(newDay == -1){
    newDay = 6;
  }
  reColor(month_selec, newMonth);
  reColor(day_selec, newDay);
  reColor(hours_selec, newHour);
  reColor(minutes_selec, newMinute);
  reColor(weekday_selec, newDay);
  
  mainText.text(printDate(newDate));

};


function reColor(selection, index){

   selection.selectAll('.slice').selectAll('path')
	.attr('fill', "white");
  
   selection.select('.slice-' + index).select('path')
	.attr('fill', color);

}

var allSlices = d3.selectAll('.slice').selectAll('path');
var toggleGridBool = 1;
function toggleGrid(){
  
  toggleGridBool *= -1;
  
  if(toggleGridBool == -1){
	allSlices
    .attr('stroke-width', 2)
	.attr('stroke', "white");  
  } else {
	allSlices
    .attr('stroke-width', 0.1)
	.attr('stroke', "grey");    
  }
  

  
  
}


createButton("random date", createRandomDate, 80, 500);
createButton("toggle grid", toggleGrid, 180, 500);
createButton("now", setNowDate, 280, 500);

function createButton(text, callback, x, y){
  //------- Params -------
  var buttonWidth = 90;
  var buttonHeight = 30;
  var fontSize = 13;
  //-------- Function -------
  var random = svg.append("g")
    .attr({
      transform: "translate("+[x,y]+")",
      "class": "btn"
    })
    .on('click', callback);
  

    random.append("rect")
    .attr({
        width: buttonWidth,
        height: buttonHeight,
        fill: "#B8B8B8",
      rx: 5,
      ry: 5
    });
    
    random.append('text')
    .text(text)
    .attr({
      fill: "#666666",
      x : buttonWidth/2,
      y:(buttonHeight/2) + 4,
      "font-size": fontSize,
      "font-family": "Arial",
      "text-anchor": "middle"
    });

}