Skip to content

Instantly share code, notes, and snippets.

@zbryikt

zbryikt/README.md

Created December 11, 2012 15:54
Show Gist options
  • Save zbryikt/4259579 to your computer and use it in GitHub Desktop.
Save zbryikt/4259579 to your computer and use it in GitHub Desktop.
Download ZIP
D3js Circle Timer
Raw
README.md
Raw
index.css
html, body {
width: 100%;
height: 100%;
}
Raw
index.html
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width"><title>Circle Timer in D3js</title><link rel="shortcut icon" href="favicon.ico"><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script><script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script><link rel="stylesheet" type="text/css" href="index.css"><script type="text/javascript" src="timer.js"></script></head><body></body></html>
Raw
index.jade
!!! 5
html(lang="en")
head
meta(charset='utf-8')
meta(http-equiv="X-UA-Compatible", content="IE=edge,chrome=1")
meta(name='viewport', content='width=device-width')
title Circle Timer in D3js
link(rel="shortcut icon",href="favicon.ico")
script(type="text/javascript",src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js")
script(type="text/javascript",src="http://d3js.org/d3.v3.min.js")
link(rel="stylesheet",type="text/css",href="index.css")
script(type="text/javascript",src="timer.js")
body
Raw
makefile
all:
jade index.jade
livescript -cp timer.ls > timer.js
Raw
timer.js
(function(){
$(document).ready(function(){
var svg, pts, data, i, groups, order, cc;
svg = d3.select('body').append('svg').attr('width', '100%').attr('height', '100%');
pts = [[[-50, -80], [-50, -40], [-50, -0], [50, -80], [50, -40], [50, -0], [-50, 80], [-50, 40], [-50, 0], [50, 80], [50, 40], [50, 0], [-16, 100], [16, 100], [-16, 20], [16, -20], [-16, -100], [16, -100]], [[-25, -100], [0, -100], [0, -75], [0, -75], [0, -50], [0, -50], [0, -25], [0, -25], [0, 0], [0, 0], [0, 25], [0, 25], [0, 50], [0, 50], [0, 75], [0, 75], [0, 100], [0, 100]], [[-50, -100], [-20, -100], [10, -100], [37, -100], [-60, -75], [50, -75], [35, -50], [20, -25], [-20, 25], [-35, 50], [-50, 75], [-65, 100], [-37, 100], [-10, 100], [20, 100], [50, 100], [0, 0], [0, 0]], [[-50, -100], [-20, -100], [10, -100], [37, -100], [-60, -75], [50, -75], [45, -50], [30, -25], [10, 0], [-50, 100], [-20, 100], [10, 100], [37, 100], [-60, 75], [50, 75], [45, 50], [30, 25], [10, 0]], [[25, -100], [25, -75], [25, -50], [25, -25], [25, 0], [25, 25], [25, 50], [25, 75], [25, 100], [5, -70], [-15, -40], [-35, -10], [-55, 20], [-70, 50], [-38, 50], [-6, 50], [25, 50], [55, 50]], [[50, -100], [25, -100], [0, -100], [-25, -100], [-50, -100], [-50, -66], [-50, -33], [-50, 0], [-16, 0], [16, 0], [50, 0], [50, 33], [50, 66], [50, 100], [25, 100], [0, 100], [-25, 100], [-50, 100]], [[-50, -100], [-50, -66], [-50, -33], [-50, 0], [-25, 0], [0, 0], [25, 0], [50, 0], [50, 33], [50, 66], [50, 100], [25, 100], [0, 100], [-25, 100], [-50, 100], [-50, 33], [-50, 66], [0, 0]], [[-50, -100], [-25, -100], [0, -100], [25, -100], [50, -100], [30, -75], [15, -50], [5, -25], [0, 0], [0, 25], [0, 50], [0, 75], [0, 100], [0, 0], [0, 0], [0, 0], [0, 0], [-55, -75]], [[-50, -80], [-50, -50], [-50, -20], [50, -80], [50, -50], [50, -20], [-50, 80], [-50, 50], [-50, 20], [50, 80], [50, 50], [50, 20], [-16, 100], [16, 100], [-16, 0], [16, 0], [-16, -100], [16, -100]], [[50, 100], [50, 66], [50, 33], [50, 0], [25, 0], [0, 0], [-25, 0], [-50, 0], [-50, -33], [-50, -66], [-50, -100], [-25, -100], [0, -100], [25, -100], [50, -100], [50, -33], [50, -66], [0, 0]]];
data = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99, 100, 101, 102, 103, 104, 105, 106, 107];
i = 0;
groups = svg.selectAll('g').data(data).enter().append('g');
groups.append('circle').attr('r', 10).attr('fill', function(it){
if (it < 36) {
return d3.rgb("rgb(" + (parseInt(Math.random() * 150) + 105) + ",0,0)");
} else if (it < 72) {
return d3.rgb("rgb(0," + (parseInt(Math.random() * 150) + 105) + ",0)");
} else {
return d3.rgb("rgb(0,0," + (parseInt(Math.random() * 150) + 105) + ")");
}
});
order = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99, 100, 101, 102, 103, 104, 105, 106, 107];
cc = 0;
return setInterval(function(it){
var d, i$, jt, j$, i, t, hr, min, sec, v;
d = new Date();
if (cc % 3 === 0) {
for (i$ = 0; i$ < 3; ++i$) {
jt = i$;
for (j$ = 0; j$ < 36; ++j$) {
it = j$;
i = jt * 36 + it + parseInt(Math.random() * (36 - it));
t = order[i];
order[i] = order[it + jt * 36];
order[it + jt * 36] = t;
}
}
}
cc = (cc + 1) % 60;
hr = d.getHours();
min = d.getMinutes();
sec = d.getSeconds();
v = [parseInt(hr / 10), hr % 10, parseInt(min / 10), min % 10, parseInt(sec / 10), sec % 10];
return groups.transition().duration(400).attr('transform', function(it){
var i, x, y;
it = order[it];
i = parseInt(it / 18);
x = i * 160 + 90 + pts[v[i]][it % 18][0];
y = 190 + pts[v[i]][it % 18][1];
return "translate(" + x + "," + y + ")";
});
}, 1000);
});
}).call(this);
Raw
timer.ls
<- $ document .ready
svg = d3.select \body .append \svg
.attr \width \100%
.attr \height \100%
pts = [
[
[-50,-80],[-50,-40],[-50,-0],
[50,-80],[50,-40],[50,-0],
[-50,80],[-50,40],[-50,0],
[50,80],[50,40],[50,0],
[-16,100],[16,100],
[-16,20],[16,-20],
[-16,-100],[16,-100]
],
[[-25,-100],[0,-100],[0,-75],[0,-75],[0,-50],[0,-50],[0,-25],[0,-25],[0,0],
[0,0],[0,25],[0,25],[0,50],[0,50],[0,75],[0,75],[0,100],[0,100]],
[[-50,-100],[-20,-100],[10,-100],[37,-100],[-60,-75],[50,-75],[35,-50],[20,-25],
[-20,25],[-35,50],[-50,75],[-65,100],[-37,100],[-10,100],[20,100],[50,100],[0,0],[0,0]],
[[-50,-100],[-20,-100],[10,-100],[37,-100],[-60,-75],[50,-75],[45,-50],[30,-25],[10,0],
[-50,100],[-20,100],[10,100],[37,100],[-60,75],[50,75],[45,50],[30,25],[10,0]],
[ [25,-100],[25,-75],[25,-50],[25,-25],[25,0],[25,25],[25,50],[25,75],[25,100],
[5,-70],[-15,-40],[-35,-10],[-55,20],[-70,50],[-38,50],[-6,50],[25,50],[55,50] ],
[
[50,-100],[25,-100],[0,-100],[-25,-100],[-50,-100],
[-50,-66],[-50,-33],[-50,0],[-16,0],[16,0],[50,0],
[50,33],[50,66],[50,100], [25,100],[0,100],[-25,100],[-50,100]
],
[
[-50,-100],
[-50,-66],[-50,-33],[-50,0],[-25,0],[0,0],[25,0],[50,0],
[50,33],[50,66],[50,100], [25,100],[0,100],[-25,100],[-50,100],
[-50,33],[-50,66],[0,0]
],
[
[-50,-100],[-25,-100],[0,-100],[25,-100],[50,-100],
[30,-75],[15,-50],[5,-25],[0,0],[0,25],[0,50],[0,75],[0,100],
[0,0],[0,0],[0,0],[0,0],[-55,-75],
],
[
[-50,-80],[-50,-50],[-50,-20],
[50,-80],[50,-50],[50,-20],
[-50,80],[-50,50],[-50,20],
[50,80],[50,50],[50,20],
[-16,100],[16,100],
[-16,0],[16,0],
[-16,-100],[16,-100]
],
[
[50,100],
[50,66],[50,33],[50,0],[25,0],[0,0],[-25,0],[-50,0],
[-50,-33],[-50,-66],[-50,-100], [-25,-100],[0,-100],[25,-100],[50,-100],
[50,-33],[50,-66],[0,0]
]
]
data = [0 til 108]
i = 0
groups = svg.selectAll \g .data data .enter! .append \g
#.attr \transform -> "translate(#{200+pts[i][it][0]},#{200+pts[i][it][1]})"
groups.append \circle
.attr \r 10
.attr \fill ->
if it<36 then d3.rgb("rgb(#{parseInt(Math.random! * 150)+105},0,0)")
else if it<72 then d3.rgb("rgb(0,#{parseInt(Math.random! * 150)+105},0)")
else d3.rgb("rgb(0,0,#{parseInt(Math.random! * 150)+105})")
order = [0 til 108]
cc = 0
<- setInterval _, 1000
d = new Date();
#if cc==0
# for it til 108
# i = it + parseInt Math.random! * (108 - it)
# t = order[i]
# order[i] := order[it]
# order[it] := t
if cc%3==0
for jt from 0 til 3
for it from 0 til 36
i = (jt*36) + it + parseInt(Math.random!*(36 - it))
t = order[i]
order[i] := order[it + (jt*36)]
order[it + (jt*36)] := t
cc := (cc+1)%60
hr = d.getHours();
min = d.getMinutes();
sec = d.getSeconds();
v = [parseInt(hr/10),hr%10,parseInt(min/10),min%10,parseInt(sec/10),sec%10]
groups .transition! .duration 400 .attr \transform ->
it = order[it]
i = parseInt it/18
x = i*160 + 90 + pts[v[i]][it%18][0]
y = 190 + pts[v[i]][it%18][1]
"translate(#{x},#{y})"
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment