dhornbein · September 11, 2013 14:15
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
 <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
 <!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
 <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
 <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <title>Phenological Clock</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <script>

 		Date.prototype.getDOY = function() {
 			var onejan = new Date(this.getFullYear(),0,1);
 			return Math.ceil((this - onejan) / 86400000);
 		}

    	function trim (str) {
    		if (str instanceof Array) {
 				for(i = 0; i < str.length; i++){
 					str[i] = str[i].replace(/^\s\s*/, '').replace(/\s\s*$/, '');
 				}

 			} else {
 		    	str = str.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
 			}

 			return str;
 		}

    	function GDimport(json){
    		console.dir( json );

    		var out = [];

    		for(i = 0; i < json.feed.entry.length; i++){
 		        entry = json.feed.entry[i];

 		        out[i] = {
 		        	'id': entry.gsx$id.$t,
 		        	'categories': entry.gsx$category.$t.split(','),
 		        	'category': entry.gsx$category.$t,
 		        	'name': entry.gsx$name.$t,
 		        	'events': [
 		        		{
 		        			'start': entry.gsx$eventstart.$t,
 		        			'end': entry.gsx$eventend.$t
 		        		}
 		        	],
 		        	'description': entry.gsx$description.$t,
 		        	'color': entry.gsx$color.$t.replace('#','')
 		        };
 		    }

 		    dataset = out;
 		    console.log(dataset);
    	}

    	var dataset = {};


    </script>
    <script src="http://spreadsheets.google.com/feeds/list/0AgeC4_lD2gMbdHQyZEVhRS1tcmJRS21kTnYtOUR6bUE/1/public/values?alt=json-in-script&amp;callback=GDimport"></script>
    <style>
 @import url(http://fonts.googleapis.com/css?family=Varela+Round);

 * { margin:0;
 	padding:0; }

 html, body { width:100%; height:100%; font-family: 'Varela Round', sans-serif;}

 canvas { display:block; margin:0 auto; }

 h3 { font-weight: normal; text-align: center; margin-top:1em; }
 h3 a { color: #E32726;}


    </style>
    
 </head>
 <body>
 	<h3>Phenological Clock Test</h3>
 	<canvas id="myCanvas" width="500" height="500">
 		<!-- Insert fallback content here -->
 	</canvas>
 	<script>

 	var canvas = document.getElementById('myCanvas');
 	var context = canvas.getContext('2d');
 	var x = canvas.width / 2;
 	var y = canvas.height / 2;
 	var radius = 25;
 	var startAngle = 1.1 * Math.PI;
 	var endAngle = 1.9 * Math.PI;
 	var counterClockwise = false;
 	var c = 0 //number of entries

 	for (var s=0; s<dataset.length; s++)
 	{
 		for (var i=0; i<dataset[i].events.length; i++)
 		{
 			var start = dataset[s].events[i].start;
 			var end = dataset[s].events[i].end;

 			console.log('context.arc(x, y, radius + (14.5 * '+s+'), '+date_to_radial(start)+', '+date_to_radial(end)+', '+counterClockwise+')');

 			context.beginPath();
 			context.arc(x, y, radius + (14.5 * s), date_to_radial(start), date_to_radial(end), counterClockwise); // Draw a circle
 			context.lineWidth = 15;

 			// line color
 			context.strokeStyle = dataset[s]['color'];
 			context.stroke();
 			c++;
 		}
 	}

 	function date_to_radial(date) {
 		var date = new Date(date);
 		var dayOfYear = date.getDOY();
 		var ratio = dayOfYear / 365; // do we really need to worry about leap years?
 		var degrees = ratio * 360;
 		var radians = degrees * ( Math.PI / 180);

 		return radians;
 	}
      </script>
      <p style="text-align:center">This data is being pulled <em>live</em> from a <a href="https://docs.google.com/spreadsheet/ccc?key=0AgeC4_lD2gMbdHQyZEVhRS1tcmJRS21kTnYtOUR6bUE">Google Spreadsheet</a>.</p>
 </body>
 </html>
	<!DOCTYPE html>
	<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
	<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
	<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
	<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<title>Phenological Clock</title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width">
	<script>

	Date.prototype.getDOY = function() {
	var onejan = new Date(this.getFullYear(),0,1);
	return Math.ceil((this - onejan) / 86400000);
	}

	function trim (str) {
	if (str instanceof Array) {
	for(i = 0; i < str.length; i++){
	str[i] = str[i].replace(/^\s\s/, '').replace(/\s\s$/, '');
	}

	} else {
	str = str.replace(/^\s\s/, '').replace(/\s\s$/, '');
	}

	return str;
	}

	function GDimport(json){
	console.dir( json );

	var out = [];

	for(i = 0; i < json.feed.entry.length; i++){
	entry = json.feed.entry[i];

	out[i] = {
	'id': entry.gsx$id.$t,
	'categories': entry.gsx$category.$t.split(','),
	'category': entry.gsx$category.$t,
	'name': entry.gsx$name.$t,
	'events': [
	{
	'start': entry.gsx$eventstart.$t,
	'end': entry.gsx$eventend.$t
	}
	],
	'description': entry.gsx$description.$t,
	'color': entry.gsx$color.$t.replace('#','')
	};
	}

	dataset = out;
	console.log(dataset);
	}

	var dataset = {};


	</script>
	<script src="http://spreadsheets.google.com/feeds/list/0AgeC4_lD2gMbdHQyZEVhRS1tcmJRS21kTnYtOUR6bUE/1/public/values?alt=json-in-script&callback=GDimport"></script>
	<style>
	@import url(http://fonts.googleapis.com/css?family=Varela+Round);

	* { margin:0;
	padding:0; }

	html, body { width:100%; height:100%; font-family: 'Varela Round', sans-serif;}

	canvas { display:block; margin:0 auto; }

	h3 { font-weight: normal; text-align: center; margin-top:1em; }
	h3 a { color: #E32726;}


	</style>

	</head>
	<body>
	<h3>Phenological Clock Test</h3>
	<canvas id="myCanvas" width="500" height="500">
	<!-- Insert fallback content here -->
	</canvas>
	<script>

	var canvas = document.getElementById('myCanvas');
	var context = canvas.getContext('2d');
	var x = canvas.width / 2;
	var y = canvas.height / 2;
	var radius = 25;
	var startAngle = 1.1 * Math.PI;
	var endAngle = 1.9 * Math.PI;
	var counterClockwise = false;
	var c = 0 //number of entries

	for (var s=0; s<dataset.length; s++)
	{
	for (var i=0; i<dataset[i].events.length; i++)
	{
	var start = dataset[s].events[i].start;
	var end = dataset[s].events[i].end;

	console.log('context.arc(x, y, radius + (14.5 * '+s+'), '+date_to_radial(start)+', '+date_to_radial(end)+', '+counterClockwise+')');

	context.beginPath();
	context.arc(x, y, radius + (14.5 * s), date_to_radial(start), date_to_radial(end), counterClockwise); // Draw a circle
	context.lineWidth = 15;

	// line color
	context.strokeStyle = dataset[s]['color'];
	context.stroke();
	c++;
	}
	}

	function date_to_radial(date) {
	var date = new Date(date);
	var dayOfYear = date.getDOY();
	var ratio = dayOfYear / 365; // do we really need to worry about leap years?
	var degrees = ratio * 360;
	var radians = degrees * ( Math.PI / 180);

	return radians;
	}
	</script>
	<p style="text-align:center">This data is being pulled <em>live</em> from a <a href="https://docs.google.com/spreadsheet/ccc?key=0AgeC4_lD2gMbdHQyZEVhRS1tcmJRS21kTnYtOUR6bUE">Google Spreadsheet</a>.</p>
	</body>
	</html>