# HG changeset patch
# User paulo
# Date 1412148636 25200
# Node ID e3bbdec7e12a824661a71dcd480d1df5382ce2ca
# Parent  1913f36338b4e487de7b8650057de0c11b248071
refactor clock to use d3 style routines

diff -r 1913f36338b4 -r e3bbdec7e12a clock/index.html
--- a/clock/index.html	Thu Aug 21 01:33:14 2014 -0700
+++ b/clock/index.html	Wed Oct 01 00:30:36 2014 -0700
@@ -81,92 +81,51 @@
 			.attr("width", svg_width)
 			.attr("height", svg_height);
 
-	svg.selectAll("g").remove();
+	svg = svg.selectAll("g").data([[margin.left, margin.top]]);
+	svg.enter().append("g");
+	svg.attr("transform", function(d) { return "translate(" + d[0] + "," + d[1] + ")"; });
 
-	svg = svg.append("g")
-			.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+	// DEBUG
+	//var ts = svg.selectAll("text").data([ct]);
+	//ts.enter().append("text")
+	//ts.text(function(d) { return d3.time.format("%X")(d); });
 
-	//svg.append("text")
-	//	.text(d3.time.format("%X")(ct));
+	var c = svg.selectAll("g").data([[c_x, c_y]]);
+	c.enter().append("g");
+	c.attr("transform", function(d) { return "translate(" + d[0] + "," + d[1] + ")"; });
 
-	var c = svg.append("g")
-			.attr("transform", "translate(" + c_x + "," + c_y + ")");
+	var cp = c.selectAll("path").data([
+		// class, outer radius, inner radius, start angle, end angle
+		[ "analog seconds", or_seconds, ir_seconds, 0, minutes_seconds_scale(seconds) ],
+		[ "analog seconds past", or_seconds, ir_seconds, minutes_seconds_scale(seconds), TAU ],
+		[ "analog minutes", or_minutes, ir_minutes, 0, minutes_seconds_scale(minutes) ],
+		[ "analog minutes past", or_minutes, ir_minutes, minutes_seconds_scale(minutes), TAU ],
+		[ "analog hours", or_hours, ir_hours, 0, hours_scale(hours) ],
+		[ "analog hours past", or_hours, ir_hours, hours_scale(hours), TAU ],
+	]);
+	cp.enter().append("path")
+		.attr("class", function(d) { return d[0]; });
+	cp
+		.attr("d", d3.svg.arc()
+			.outerRadius(function(d) { return d[1]; })
+			.innerRadius(function(d) { return d[2]; })
+			.startAngle(function(d) { return d[3]; })
+			.endAngle(function(d) { return d[4]; })
+		);
 
-	c.append("path")
-		.attr("class", "analog seconds")
-		.attr("d", d3.svg.arc()
-			.outerRadius(or_seconds)
-			.innerRadius(ir_seconds)
-			.startAngle(0)
-			.endAngle(minutes_seconds_scale(seconds))
-		);
-	c.append("path")
-		.attr("class", "analog seconds past")
-		.attr("d", d3.svg.arc()
-			.outerRadius(or_seconds)
-			.innerRadius(ir_seconds)
-			.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 seconds")
-		.attr("x", ir_seconds)
-		.attr("y", dt_y_seconds)
-		.attr("font-size", dt_sz_seconds + "px")
-		.text(tf(seconds));
-
-	c.append("path")
-		.attr("class", "analog minutes")
-		.attr("d", d3.svg.arc()
-			.outerRadius(or_minutes)
-			.innerRadius(ir_minutes)
-			.startAngle(0)
-			.endAngle(minutes_seconds_scale(minutes))
-		);
-	c.append("path")
-		.attr("class", "analog minutes past")
-		.attr("d", d3.svg.arc()
-			.outerRadius(or_minutes)
-			.innerRadius(ir_minutes)
-			.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 hours")
-		.attr("x", ir_minutes)
-		.attr("y", dt_y_minutes)
-		.attr("font-size", dt_sz_minutes + "px")
-		.text(tf(minutes));
-
-	c.append("path")
-		.attr("class", "analog hours")
-		.attr("d", d3.svg.arc()
-			.outerRadius(or_hours)
-			.innerRadius(ir_hours)
-			.startAngle(0)
-			.endAngle(hours_scale(hours))
-		);
-	c.append("path")
-		.attr("class", "analog hours past")
-		.attr("d", d3.svg.arc()
-			.outerRadius(or_hours)
-			.innerRadius(ir_hours)
-			.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 hours")
-		.attr("x", ir_hours)
-		.attr("y", dt_y_hours)
-		.attr("font-size", dt_sz_hours + "px")
-		.text(tf(hours));
-
+	var ctxt = c.selectAll("text").data([
+		// class, x, size, val
+		[ "digital seconds", ir_seconds, or_seconds - ir_seconds, seconds ],
+		[ "digital minutes", ir_minutes, or_minutes - ir_minutes, minutes ],
+		[ "digital hours", ir_hours, or_hours - ir_hours, hours ],
+   ]);
+	ctxt.enter().append("text")
+		.attr("class", function(d) { return d[0]; })
+   ctxt
+		.attr("x", function(d) { return d[1]; })
+		.attr("y", function(d) { return d[2]*digital_text_scale/3.0; })
+		.attr("font-size", function(d) { return d[2]*digital_text_scale + "px"; })
+		.text(function(d) { return tf(d[3]); });
 
 }