1.1 --- a/clock/index.html	Thu Aug 21 01:33:14 2014 -0700
     1.2 +++ b/clock/index.html	Wed Oct 01 00:30:36 2014 -0700
     1.3 @@ -81,92 +81,51 @@
     1.4  			.attr("width", svg_width)
     1.5  			.attr("height", svg_height);
     1.6  
     1.7 -	svg.selectAll("g").remove();
     1.8 +	svg = svg.selectAll("g").data([[margin.left, margin.top]]);
     1.9 +	svg.enter().append("g");
    1.10 +	svg.attr("transform", function(d) { return "translate(" + d[0] + "," + d[1] + ")"; });
    1.11  
    1.12 -	svg = svg.append("g")
    1.13 -			.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    1.14 +	// DEBUG
    1.15 +	//var ts = svg.selectAll("text").data([ct]);
    1.16 +	//ts.enter().append("text")
    1.17 +	//ts.text(function(d) { return d3.time.format("%X")(d); });
    1.18  
    1.19 -	//svg.append("text")
    1.20 -	//	.text(d3.time.format("%X")(ct));
    1.21 +	var c = svg.selectAll("g").data([[c_x, c_y]]);
    1.22 +	c.enter().append("g");
    1.23 +	c.attr("transform", function(d) { return "translate(" + d[0] + "," + d[1] + ")"; });
    1.24  
    1.25 -	var c = svg.append("g")
    1.26 -			.attr("transform", "translate(" + c_x + "," + c_y + ")");
    1.27 +	var cp = c.selectAll("path").data([
    1.28 +		// class, outer radius, inner radius, start angle, end angle
    1.29 +		[ "analog seconds", or_seconds, ir_seconds, 0, minutes_seconds_scale(seconds) ],
    1.30 +		[ "analog seconds past", or_seconds, ir_seconds, minutes_seconds_scale(seconds), TAU ],
    1.31 +		[ "analog minutes", or_minutes, ir_minutes, 0, minutes_seconds_scale(minutes) ],
    1.32 +		[ "analog minutes past", or_minutes, ir_minutes, minutes_seconds_scale(minutes), TAU ],
    1.33 +		[ "analog hours", or_hours, ir_hours, 0, hours_scale(hours) ],
    1.34 +		[ "analog hours past", or_hours, ir_hours, hours_scale(hours), TAU ],
    1.35 +	]);
    1.36 +	cp.enter().append("path")
    1.37 +		.attr("class", function(d) { return d[0]; });
    1.38 +	cp
    1.39 +		.attr("d", d3.svg.arc()
    1.40 +			.outerRadius(function(d) { return d[1]; })
    1.41 +			.innerRadius(function(d) { return d[2]; })
    1.42 +			.startAngle(function(d) { return d[3]; })
    1.43 +			.endAngle(function(d) { return d[4]; })
    1.44 +		);
    1.45  
    1.46 -	c.append("path")
    1.47 -		.attr("class", "analog seconds")
    1.48 -		.attr("d", d3.svg.arc()
    1.49 -			.outerRadius(or_seconds)
    1.50 -			.innerRadius(ir_seconds)
    1.51 -			.startAngle(0)
    1.52 -			.endAngle(minutes_seconds_scale(seconds))
    1.53 -		);
    1.54 -	c.append("path")
    1.55 -		.attr("class", "analog seconds past")
    1.56 -		.attr("d", d3.svg.arc()
    1.57 -			.outerRadius(or_seconds)
    1.58 -			.innerRadius(ir_seconds)
    1.59 -			.startAngle(minutes_seconds_scale(seconds))
    1.60 -			.endAngle(TAU)
    1.61 -		);
    1.62 -	var dt_sz_seconds = (or_seconds - ir_seconds)*digital_text_scale;
    1.63 -	var dt_y_seconds = dt_sz_seconds/3;
    1.64 -	c.append("text")
    1.65 -		.attr("class", "digital seconds")
    1.66 -		.attr("x", ir_seconds)
    1.67 -		.attr("y", dt_y_seconds)
    1.68 -		.attr("font-size", dt_sz_seconds + "px")
    1.69 -		.text(tf(seconds));
    1.70 -
    1.71 -	c.append("path")
    1.72 -		.attr("class", "analog minutes")
    1.73 -		.attr("d", d3.svg.arc()
    1.74 -			.outerRadius(or_minutes)
    1.75 -			.innerRadius(ir_minutes)
    1.76 -			.startAngle(0)
    1.77 -			.endAngle(minutes_seconds_scale(minutes))
    1.78 -		);
    1.79 -	c.append("path")
    1.80 -		.attr("class", "analog minutes past")
    1.81 -		.attr("d", d3.svg.arc()
    1.82 -			.outerRadius(or_minutes)
    1.83 -			.innerRadius(ir_minutes)
    1.84 -			.startAngle(minutes_seconds_scale(minutes))
    1.85 -			.endAngle(TAU)
    1.86 -		);
    1.87 -	var dt_sz_minutes = (or_minutes - ir_minutes)*digital_text_scale;
    1.88 -	var dt_y_minutes = dt_sz_minutes/3;
    1.89 -	c.append("text")
    1.90 -		.attr("class", "digital hours")
    1.91 -		.attr("x", ir_minutes)
    1.92 -		.attr("y", dt_y_minutes)
    1.93 -		.attr("font-size", dt_sz_minutes + "px")
    1.94 -		.text(tf(minutes));
    1.95 -
    1.96 -	c.append("path")
    1.97 -		.attr("class", "analog hours")
    1.98 -		.attr("d", d3.svg.arc()
    1.99 -			.outerRadius(or_hours)
   1.100 -			.innerRadius(ir_hours)
   1.101 -			.startAngle(0)
   1.102 -			.endAngle(hours_scale(hours))
   1.103 -		);
   1.104 -	c.append("path")
   1.105 -		.attr("class", "analog hours past")
   1.106 -		.attr("d", d3.svg.arc()
   1.107 -			.outerRadius(or_hours)
   1.108 -			.innerRadius(ir_hours)
   1.109 -			.startAngle(hours_scale(hours))
   1.110 -			.endAngle(TAU)
   1.111 -		);
   1.112 -	var dt_sz_hours = (or_hours - ir_hours)*digital_text_scale;
   1.113 -	var dt_y_hours = dt_sz_hours/3;
   1.114 -	c.append("text")
   1.115 -		.attr("class", "digital hours")
   1.116 -		.attr("x", ir_hours)
   1.117 -		.attr("y", dt_y_hours)
   1.118 -		.attr("font-size", dt_sz_hours + "px")
   1.119 -		.text(tf(hours));
   1.120 -
   1.121 +	var ctxt = c.selectAll("text").data([
   1.122 +		// class, x, size, val
   1.123 +		[ "digital seconds", ir_seconds, or_seconds - ir_seconds, seconds ],
   1.124 +		[ "digital minutes", ir_minutes, or_minutes - ir_minutes, minutes ],
   1.125 +		[ "digital hours", ir_hours, or_hours - ir_hours, hours ],
   1.126 +   ]);
   1.127 +	ctxt.enter().append("text")
   1.128 +		.attr("class", function(d) { return d[0]; })
   1.129 +   ctxt
   1.130 +		.attr("x", function(d) { return d[1]; })
   1.131 +		.attr("y", function(d) { return d[2]*digital_text_scale/3.0; })
   1.132 +		.attr("font-size", function(d) { return d[2]*digital_text_scale + "px"; })
   1.133 +		.text(function(d) { return tf(d[3]); });
   1.134  
   1.135  }
   1.136