Created

Embed URL

HTTPS clone URL

SSH clone URL

You can clone with HTTPS or SSH.

Download Gist

A concept for the Phenological clock web app. This page pulls JSON from a Google Spreadsheet then renders it with canvas

View index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.