[ Launch: sin waves ] 6040640 by roundrobin
See Previous Inlet [ Gist ]
-
-
Save roundrobin/6040640 to your computer and use it in GitHub Desktop.
chrono
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{"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},"svg.css":{"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/asFGYpO.png"} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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= 293; | |
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" | |
]; | |
console.log(days[0]); | |
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 = 40; | |
var month_r = size; | |
var day_r = month_r + size; | |
var weekday_r = day_r + size; | |
var hour_r = weekday_r + size; | |
var minute_r = hour_r + size; | |
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 raddate; | |
var createRandomDate = function(){ | |
raddate = randomDate(new Date(2012, 0, 1), new Date()); | |
var newMonth = raddate.getMonth(); | |
var newDay = raddate.getDate()-1; | |
var newHour = raddate.getHours()-1; | |
var newMinute = raddate.getMinutes()-1; | |
var newDay = raddate.getDay()-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(raddate)); | |
}; | |
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); | |
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" | |
}); | |
} | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.btn{ | |
-webkit-touch-callout: none; | |
-webkit-user-select: none; | |
-khtml-user-select: none; | |
-moz-user-select: moz-none; | |
-ms-user-select: none; | |
user-select: none; | |
cursor: pointer; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment