cultofmetatron/gist:5400125

## gistfile1.txt

<!doctype html>
<html>
  <head>
    <title>clock</title>
  <style type="text/css" media="screen">
		.container {
			width: 800px;
			margin: auto;
		}
	</style>
	<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.0.8/d3.min.js" type="text/javascript" charset="utf-8"></script>

  </head>
  <body>
	<h1>hAlp</h1>
	<div class='container'>
		<div class='chart'>

		</div>
		<script type="text/javascript" language="javascript" charset="utf-8">

    		timeFields = function() {
    		  var dateObject = new Date();
    		  var second = dateObject.getSeconds();
    		  var minute = dateObject.getMinutes();
    		  var hour   = dateObject.getHours() + (minute/60);
    		  var data = [
    		      {
    		       'unit'     : 'seconds',
    		       'numeric'  : second
    		      },
    		      {
    		       'unit'     : 'minutes',
    		       'numeric'  : minute
    		      },
    		      {
    		       'unit'     : 'hours',
    		       'numeric'  : hour
    		      }
    		  ];
    		  return data;
    		};

    		var width, height, offsetX, offsetY, pi, scaleSecs, scaleMins, scaleHours;
    		width   = 400;
    		height  = 200;
    		offsetX = 150;
    		offsetY = 100;

    		pi = Math.PI;
    		scaleSecs  = d3.scale.linear().domain([0, 59 + 999/1000]).range([0, 2 * pi]);
    		scaleMins  = d3.scale.linear().domain([0, 59 + 59/60]).range([0, 2*pi]);
    		scaleHours = d3.scale.linear().domain([0, 11 + 59/60]).range([0, 2*pi]);

    		window.vis
    		window.clockGroup;

    		vis = d3.selectAll('.chart')
    		    .append('svg:svg')
    		    .attr('width', width)
    		    .attr('height', height);


    		clockGroup = vis.append('svg:g')
    		    .attr('transform', 'translate(' + offsetX + ', ' + offsetY + ') ');

    		clockGroup.append('svg:circle')
    		    .attr("r", 80).attr('fill', 'none')
    		    .attr('class', 'clock outercircle')

    		    .attr('stroke', 'black')
    		    .attr('stroke-width', 2)


    		clockGroup.append('svg:circle')
    		    .attr('r', 4)
    		    .attr('fill', 'black')
    		    .attr('class', 'clock innercircle')


    		render = function(data) {
    			var hourArc, minuteArc, secondArc;
    			clockGroup.selectAll('.clockhand').remove();

    			secondArc = d3.svg.arc()
    			  .innerRadius(0)
    			  .outerRadius(70)
    			  .startAngle(function(d) {
    				return scaleSecs(d.numeric)
    			  })
    			  .endAngle(function(d) {
                      return scaleSecs(d.numeric);
                  });


    			minuteArc = d3.svg.arc()
    			  .innerRadius(0)
    			  .outerRadius(70)
    			  .startAngle(function(d) {
    				return scaleMins(d.numeric);
    			  })
    			  .endAngle(function(d) {
                      return scaleMins(d.numeric);
                  });

    			hourArc = d3.svg.arc()
    			  .innerRadius(0)
    			  .outerRadius(50)
    			  .startAngle(function(d) {
    				return scaleHours(d.numeric % 12);
    			})
    			  .endAngle(function(d) {
    			    return scaleHours(d.numeric % 12);
    			});

    			clockGroup.selectAll('.clockhand')
    			  .data(data)
    			  .enter()
    			  .append('svg:path')
    			  .attr('d', function(d) {
    				if (d.unit === 'seconds') {
    					return secondArc(d)
    				}
    				if (d.unit === 'minutes') {
    				    return minuteArc(d);
    				}
    				if (d.unit === 'hours') {
    				    return hourArc(d);
    				}
    			  })
    			  .attr('class', 'clockhand')
    			  .attr('stroke', 'black')
    			  .attr('stroke-width', function(d) {
    			      if (d.unit === 'seconds') {
    			          return 2;
    			      }
    			      if (d.unit === 'minutes') {
    			          return 2;
    			      }
    			      if (d.unit === 'hours') {
    			          return 3;
    			      }
    			  })
    			  .attr('fill', 'none');
            }

            setInterval(function() {
              var data = timeFields();
              render(timeFields);
            }, 600);


        </script>
	</div>
  </body>
</html>

	<!doctype html>
	<html>
	<head>
	<title>clock</title>
	<style type="text/css" media="screen">
	.container {
	width: 800px;
	margin: auto;
	}
	</style>
	<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.0.8/d3.min.js" type="text/javascript" charset="utf-8"></script>

	</head>
	<body>
	<h1>hAlp</h1>
	<div class='container'>
	<div class='chart'>

	</div>
	<script type="text/javascript" language="javascript" charset="utf-8">

	timeFields = function() {
	var dateObject = new Date();
	var second = dateObject.getSeconds();
	var minute = dateObject.getMinutes();
	var hour = dateObject.getHours() + (minute/60);
	var data = [
	{
	'unit' : 'seconds',
	'numeric' : second
	},
	{
	'unit' : 'minutes',
	'numeric' : minute
	},
	{
	'unit' : 'hours',
	'numeric' : hour
	}
	];
	return data;
	};

	var width, height, offsetX, offsetY, pi, scaleSecs, scaleMins, scaleHours;
	width = 400;
	height = 200;
	offsetX = 150;
	offsetY = 100;

	pi = Math.PI;
	scaleSecs = d3.scale.linear().domain([0, 59 + 999/1000]).range([0, 2 * pi]);
	scaleMins = d3.scale.linear().domain([0, 59 + 59/60]).range([0, 2*pi]);
	scaleHours = d3.scale.linear().domain([0, 11 + 59/60]).range([0, 2*pi]);

	window.vis
	window.clockGroup;

	vis = d3.selectAll('.chart')
	.append('svg:svg')
	.attr('width', width)
	.attr('height', height);


	clockGroup = vis.append('svg:g')
	.attr('transform', 'translate(' + offsetX + ', ' + offsetY + ') ');

	clockGroup.append('svg:circle')
	.attr("r", 80).attr('fill', 'none')
	.attr('class', 'clock outercircle')

	.attr('stroke', 'black')
	.attr('stroke-width', 2)


	clockGroup.append('svg:circle')
	.attr('r', 4)
	.attr('fill', 'black')
	.attr('class', 'clock innercircle')


	render = function(data) {
	var hourArc, minuteArc, secondArc;
	clockGroup.selectAll('.clockhand').remove();

	secondArc = d3.svg.arc()
	.innerRadius(0)
	.outerRadius(70)
	.startAngle(function(d) {
	return scaleSecs(d.numeric)
	})
	.endAngle(function(d) {
	return scaleSecs(d.numeric);
	});


	minuteArc = d3.svg.arc()
	.innerRadius(0)
	.outerRadius(70)
	.startAngle(function(d) {
	return scaleMins(d.numeric);
	})
	.endAngle(function(d) {
	return scaleMins(d.numeric);
	});

	hourArc = d3.svg.arc()
	.innerRadius(0)
	.outerRadius(50)
	.startAngle(function(d) {
	return scaleHours(d.numeric % 12);
	})
	.endAngle(function(d) {
	return scaleHours(d.numeric % 12);
	});

	clockGroup.selectAll('.clockhand')
	.data(data)
	.enter()
	.append('svg:path')
	.attr('d', function(d) {
	if (d.unit === 'seconds') {
	return secondArc(d)
	}
	if (d.unit === 'minutes') {
	return minuteArc(d);
	}
	if (d.unit === 'hours') {
	return hourArc(d);
	}
	})
	.attr('class', 'clockhand')
	.attr('stroke', 'black')
	.attr('stroke-width', function(d) {
	if (d.unit === 'seconds') {
	return 2;
	}
	if (d.unit === 'minutes') {
	return 2;
	}
	if (d.unit === 'hours') {
	return 3;
	}
	})
	.attr('fill', 'none');
	}

	setInterval(function() {
	var data = timeFields();
	render(timeFields);
	}, 600);


	</script>
	</div>
	</body>
	</html>