# HG changeset patch
# User paulo
# Date 1408609994 25200
# Node ID 1913f36338b4e487de7b8650057de0c11b248071
# Parent  a1b1713cbda2dd6c5caf9fb10512cbbaa61446fd
center clock circle and digital text

diff -r a1b1713cbda2 -r 1913f36338b4 clock/index.html
--- a/clock/index.html	Thu Aug 21 00:18:52 2014 -0700
+++ b/clock/index.html	Thu Aug 21 01:33:14 2014 -0700
@@ -41,7 +41,7 @@
 <script>
 
 var TAU = 2*Math.PI;
-var margin = 10;
+var margin = {top: 10, right: 5, bottom: 5, left: 10};
 
 var minutes_seconds_scale = d3.scale.linear()
 	.domain([0, 60])
@@ -60,7 +60,11 @@
 	var minutes = ct.getMinutes() + (seconds/60.0);
 	var hours = ct.getHours() + (minutes/60.0);
 	
-	var r = (Math.min(window.innerWidth, window.innerHeight)/2) - margin;
+	var svg_width = window.innerWidth - 20;
+	var svg_height = window.innerHeight - 20;
+	var c_x = (svg_width - margin.left - margin.right)/2;
+	var c_y = (svg_height - margin.top - margin.bottom)/2;
+	var r = Math.min(c_x, c_y);
 	
 	var or_seconds = r;
 	var ir_seconds = r*0.75;
@@ -74,19 +78,19 @@
 	var digital_text_scale = 0.75;
 	
 	var svg = d3.select("svg")
-			.attr("width", 2*(r + margin))
-			.attr("height", 2*(r + margin));
+			.attr("width", svg_width)
+			.attr("height", svg_height);
 
 	svg.selectAll("g").remove();
 
 	svg = svg.append("g")
-			.attr("transform", "translate(" + margin + "," + margin + ")");
+			.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
 
 	//svg.append("text")
 	//	.text(d3.time.format("%X")(ct));
 
 	var c = svg.append("g")
-			.attr("transform", "translate(" + r + "," + r + ")");
+			.attr("transform", "translate(" + c_x + "," + c_y + ")");
 
 	c.append("path")
 		.attr("class", "analog seconds")
@@ -104,10 +108,13 @@
 			.startAngle(minutes_seconds_scale(seconds))
 			.endAngle(TAU)
 		);
+	var dt_sz_seconds = (or_seconds - ir_seconds)*digital_text_scale;
+	var dt_y_seconds = dt_sz_seconds/3;
 	c.append("text")
-		.attr("class", "digital")
+		.attr("class", "digital seconds")
 		.attr("x", ir_seconds)
-		.attr("font-size", (or_seconds - ir_seconds)*digital_text_scale + "px")
+		.attr("y", dt_y_seconds)
+		.attr("font-size", dt_sz_seconds + "px")
 		.text(tf(seconds));
 
 	c.append("path")
@@ -126,10 +133,13 @@
 			.startAngle(minutes_seconds_scale(minutes))
 			.endAngle(TAU)
 		);
+	var dt_sz_minutes = (or_minutes - ir_minutes)*digital_text_scale;
+	var dt_y_minutes = dt_sz_minutes/3;
 	c.append("text")
-		.attr("class", "digital")
+		.attr("class", "digital hours")
 		.attr("x", ir_minutes)
-		.attr("font-size", (or_minutes - ir_minutes)*digital_text_scale + "px")
+		.attr("y", dt_y_minutes)
+		.attr("font-size", dt_sz_minutes + "px")
 		.text(tf(minutes));
 
 	c.append("path")
@@ -148,10 +158,13 @@
 			.startAngle(hours_scale(hours))
 			.endAngle(TAU)
 		);
+	var dt_sz_hours = (or_hours - ir_hours)*digital_text_scale;
+	var dt_y_hours = dt_sz_hours/3;
 	c.append("text")
-		.attr("class", "digital")
+		.attr("class", "digital hours")
 		.attr("x", ir_hours)
-		.attr("font-size", (or_hours - ir_hours)*digital_text_scale + "px")
+		.attr("y", dt_y_hours)
+		.attr("font-size", dt_sz_hours + "px")
 		.text(tf(hours));