Mercurial > hg > index.fcgi > www > www-1

comparison clock/index.html @ 65:e3bbdec7e12a

find changesets by author, revision, files, or words in the commit message
refactor clock to use d3 style routines
author paulo
date Wed, 01 Oct 2014 00:30:36 -0700
parents 1913f36338b4
children
comparison
equal deleted inserted replaced
1:cd27b79952e2 2:aa03781ad795
79 79
80 var svg = d3.select("svg") 80 var svg = d3.select("svg")
81 .attr("width", svg_width) 81 .attr("width", svg_width)
82 .attr("height", svg_height); 82 .attr("height", svg_height);
83 83
84 svg.selectAll("g").remove(); 84 svg = svg.selectAll("g").data([[margin.left, margin.top]]);
85 svg.enter().append("g");
86 svg.attr("transform", function(d) { return "translate(" + d[0] + "," + d[1] + ")"; });
85 87
86 svg = svg.append("g") 88 // DEBUG
87 .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 89 //var ts = svg.selectAll("text").data([ct]);
90 //ts.enter().append("text")
91 //ts.text(function(d) { return d3.time.format("%X")(d); });
88 92
89 //svg.append("text") 93 var c = svg.selectAll("g").data([[c_x, c_y]]);
90 // .text(d3.time.format("%X")(ct)); 94 c.enter().append("g");
95 c.attr("transform", function(d) { return "translate(" + d[0] + "," + d[1] + ")"; });
91 96
92 var c = svg.append("g") 97 var cp = c.selectAll("path").data([
93 .attr("transform", "translate(" + c_x + "," + c_y + ")"); 98 // class, outer radius, inner radius, start angle, end angle
99 [ "analog seconds", or_seconds, ir_seconds, 0, minutes_seconds_scale(seconds) ],
100 [ "analog seconds past", or_seconds, ir_seconds, minutes_seconds_scale(seconds), TAU ],
101 [ "analog minutes", or_minutes, ir_minutes, 0, minutes_seconds_scale(minutes) ],
102 [ "analog minutes past", or_minutes, ir_minutes, minutes_seconds_scale(minutes), TAU ],
103 [ "analog hours", or_hours, ir_hours, 0, hours_scale(hours) ],
104 [ "analog hours past", or_hours, ir_hours, hours_scale(hours), TAU ],
105 ]);
106 cp.enter().append("path")
107 .attr("class", function(d) { return d[0]; });
108 cp
109 .attr("d", d3.svg.arc()
110 .outerRadius(function(d) { return d[1]; })
111 .innerRadius(function(d) { return d[2]; })
112 .startAngle(function(d) { return d[3]; })
113 .endAngle(function(d) { return d[4]; })
114 );
94 115
95 c.append("path") 116 var ctxt = c.selectAll("text").data([
96 .attr("class", "analog seconds") 117 // class, x, size, val
97 .attr("d", d3.svg.arc() 118 [ "digital seconds", ir_seconds, or_seconds - ir_seconds, seconds ],
98 .outerRadius(or_seconds) 119 [ "digital minutes", ir_minutes, or_minutes - ir_minutes, minutes ],
99 .innerRadius(ir_seconds) 120 [ "digital hours", ir_hours, or_hours - ir_hours, hours ],
100 .startAngle(0) 121 ]);
101 .endAngle(minutes_seconds_scale(seconds)) 122 ctxt.enter().append("text")
102 ); 123 .attr("class", function(d) { return d[0]; })
103 c.append("path") 124 ctxt
104 .attr("class", "analog seconds past") 125 .attr("x", function(d) { return d[1]; })
105 .attr("d", d3.svg.arc() 126 .attr("y", function(d) { return d[2]*digital_text_scale/3.0; })
106 .outerRadius(or_seconds) 127 .attr("font-size", function(d) { return d[2]*digital_text_scale + "px"; })
107 .innerRadius(ir_seconds) 128 .text(function(d) { return tf(d[3]); });
108 .startAngle(minutes_seconds_scale(seconds))
109 .endAngle(TAU)
110 );
111 var dt_sz_seconds = (or_seconds - ir_seconds)*digital_text_scale;
112 var dt_y_seconds = dt_sz_seconds/3;
113 c.append("text")
114 .attr("class", "digital seconds")
115 .attr("x", ir_seconds)
116 .attr("y", dt_y_seconds)
117 .attr("font-size", dt_sz_seconds + "px")
118 .text(tf(seconds));
119
120 c.append("path")
121 .attr("class", "analog minutes")
122 .attr("d", d3.svg.arc()
123 .outerRadius(or_minutes)
124 .innerRadius(ir_minutes)
125 .startAngle(0)
126 .endAngle(minutes_seconds_scale(minutes))
127 );
128 c.append("path")
129 .attr("class", "analog minutes past")
130 .attr("d", d3.svg.arc()
131 .outerRadius(or_minutes)
132 .innerRadius(ir_minutes)
133 .startAngle(minutes_seconds_scale(minutes))
134 .endAngle(TAU)
135 );
136 var dt_sz_minutes = (or_minutes - ir_minutes)*digital_text_scale;
137 var dt_y_minutes = dt_sz_minutes/3;
138 c.append("text")
139 .attr("class", "digital hours")
140 .attr("x", ir_minutes)
141 .attr("y", dt_y_minutes)
142 .attr("font-size", dt_sz_minutes + "px")
143 .text(tf(minutes));
144
145 c.append("path")
146 .attr("class", "analog hours")
147 .attr("d", d3.svg.arc()
148 .outerRadius(or_hours)
149 .innerRadius(ir_hours)
150 .startAngle(0)
151 .endAngle(hours_scale(hours))
152 );
153 c.append("path")
154 .attr("class", "analog hours past")
155 .attr("d", d3.svg.arc()
156 .outerRadius(or_hours)
157 .innerRadius(ir_hours)
158 .startAngle(hours_scale(hours))
159 .endAngle(TAU)
160 );
161 var dt_sz_hours = (or_hours - ir_hours)*digital_text_scale;
162 var dt_y_hours = dt_sz_hours/3;
163 c.append("text")
164 .attr("class", "digital hours")
165 .attr("x", ir_hours)
166 .attr("y", dt_y_hours)
167 .attr("font-size", dt_sz_hours + "px")
168 .text(tf(hours));
169
170 129
171 } 130 }
172 131
173 window.setInterval(render, 1000); 132 window.setInterval(render, 1000);
174 133