Skip to content

Instantly share code, notes, and snippets.

@krish85

krish85/index.html

Last active August 29, 2015 14:27
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save krish85/987fc19c850861c77f76 to your computer and use it in GitHub Desktop.
Save krish85/987fc19c850861c77f76 to your computer and use it in GitHub Desktop.
Download ZIP
Analog Clock
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Analog Clock</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
<script type="text/javascript">
var now,time; var data = [];var x = 0;
var width=300, height=300, r=100;
time = getTime();
//var angleScale = d3.scale.linear().domain(dataset).range([0,360]);
var scaleSec = d3.scale.linear().domain([0, 59 + 999/1000]).range([0, 2* Math.PI]);
var scaleMin = d3.scale.linear().domain([0, 59 + 59/60]).range([0, 2* Math.PI]);
var scaleHour = d3.scale.linear().domain([0, 11 + 59/60]).range([0, 2* Math.PI]);
var svg = d3.select("body").append("svg").attr("width", width).attr("height", height);
svg.append("circle").attr("cx", width/2).attr("cy", height/2).attr("r",r).attr("fill","orange");
svg.append("circle").attr("cx", width/2).attr("cy", height/2).attr("r",4);
svg.selectAll("text").data(d3.range(12)).enter().append("text")
.attr("x", function(d, i){return (width/2 - 5) + (r-10)*Math.cos(2*i*0.26-1.57) })
.attr("y", function(d, i){return (height/2 + 5) +(r-10)*Math.sin(2*i*0.26-1.57)})
.text(function(d){ if(d == 0) return 12; else return d;});
function draw(data){
time = getTime();
svg.selectAll(".hand").remove(); svg.selectAll(".time").remove();
svg.append("text").attr("x",width/2 - 30).attr("y",(height/2 - 125)).text(time).attr("class","time");
var secArc = d3.svg.arc().innerRadius(0).outerRadius(70).startAngle(scaleSec(data[0].value)).endAngle(scaleSec(data[0].value));
var minArc = d3.svg.arc().innerRadius(0).outerRadius(80).startAngle(scaleMin(data[1].value)).endAngle(scaleMin(data[1].value));
var hourArc = d3.svg.arc().innerRadius(0).outerRadius(50).startAngle(scaleHour(data[2].value)).endAngle(scaleHour(data[2].value));
svg.append("path").attr("d", secArc).attr("transform", "translate("+ width/2 +"," + height/2 +")").attr("stroke", "black").attr("stroke-width",1).attr("class","hand");
svg.append("path").attr("d", minArc).attr("transform", "translate("+ width/2 +"," + height/2 +")").attr("stroke", "black").attr("stroke-width",2).attr("class","hand");
svg.append("path").attr("d", hourArc).attr("transform", "translate("+ width/2 +"," + height/2 +")").attr("stroke", "black").attr("stroke-width",3).attr("class","hand");
}
setInterval(function(){
return draw(data);
},1000);
function getTime()
{
now = new Date();
var hour = now.getHours(), min = now.getMinutes(), sec = now.getSeconds();
data = [{"unit" : "seconds", "value" : sec},
{"unit" : "minutes", "value" : min},
{"unit" : "hours", "value" : hour}];
if( hour >= 12){ return pad(hour - 12) + ":" + pad(min) +" PM"; }
else { return pad(hour) + ":" + pad(min) +" AM"; }
}
function pad(number) {
if (number < 10) { number = "0"+number; }
return number;
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment