dhornbein/index.html

## 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>