Skip to content

Instantly share code, notes, and snippets.

@osoken

osoken/README.md

Last active February 6, 2016 10:10
Show Gist options
  • Save osoken/9e5ec69346e972c54884 to your computer and use it in GitHub Desktop.
Save osoken/9e5ec69346e972c54884 to your computer and use it in GitHub Desktop.
Download ZIP
Simple clock
Raw
README.md

日本標準時のアナログ時計。

Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<script src="//d3js.org/d3.v3.min.js"></script>
<body>
<script>
var width = 960;
var height = 500;
var radius = 200;
var nums = d3.range(0,12,1);nums[0] = 12;
var hands = [{w:10,l:radius*0.6,n:0},{w:6,l:radius*0.8,n:0},{w:2,l:radius*0.88,n:0}];
var x = d3.scale.linear().range([0,2*Math.PI]).domain([0,12]);
var y = d3.scale.linear().range([0,2*Math.PI]).domain([0,12]);
var x_coord = d3.scale.linear().range([-radius,radius]).domain([-1,1]);
var y_coord = d3.scale.linear().range([radius,-radius]).domain([-1,1]);
function update_clock_data()
{
var dt = new Date().getTime() + (9*60*60*1000);
hands[0].n = (dt%(12*60*60*1000)) / (12*60*60*1000.0) * 360;
hands[1].n = (dt%(60*60*1000)) / (60*60*1000.0) * 360;
hands[2].n = (dt%(60*1000)) / (60*1000.0) * 360;
}
var svg = d3.select('body').append('svg')
.attr('width',width)
.attr('height',height);
var clock = svg.append('g')
.attr('transform', 'translate(' + (width/2) + ',' + (height/2) + ')');
clock.selectAll('text')
.data(nums)
.enter()
.append('text')
.text(function(d){return ''+d;})
.attr('text-anchor', 'middle')
.attr('dominant-baseline', 'middle')
.attr('x',function(d,i){return x_coord(Math.sin(x(i)));})
.attr('y',function(d,i){return y_coord(Math.cos(y(i)));});
clock.selectAll('rect')
.data(hands)
.enter()
.append('rect')
.attr('x',function(d){return -d.w/2;})
.attr('y',function(d){return -d.l;})
.attr('width',function(d){return d.w;})
.attr('height',function(d){return d.l;})
.attr('transform',function(d){return 'rotate(' + d.n + ')';});
function update_clock()
{
update_clock_data();
clock.selectAll('rect').attr('transform',function(d){return 'rotate(' + d.n + ')';});
}
setInterval(update_clock,100);
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment