summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--test/when/when.js168
1 files changed, 107 insertions, 61 deletions
diff --git a/test/when/when.js b/test/when/when.js
index 4e0e6be..f2e3901 100644
--- a/test/when/when.js
+++ b/test/when/when.js
@@ -16,23 +16,45 @@ aim for today: have a few items that can be chosen
*/
var data,raphael,classOfRange,birthplaces,colleges,locations,fields;
-
var graphData;
-
var maxPaths;
-
+var graph,bgGraph;
+var graphs;
+var numYears,gutterX,gutterY,gridX,gridY;
+var startPath;
+
window.onload = function() {
loadData();
createMenu();
//alert(document.getElementById("holder").offsetWidth+","+document.getElementById("holder").offsetHeight);
//seems predictable, gives same result in chrome, firefox, mobile safari
- var graph=document.getElementById('graph');
- raphael = new Raphael(graph, graph.offsetWidth, graph.offsetHeight);
- drawGraph();
+ var graphDiv=document.getElementById('graph');
+ raphael = new Raphael(graphDiv, graphDiv.offsetWidth, graphDiv.offsetHeight);
+ gutterX=10,
+ gutterY=16;
+ gridX=(raphael.width-(gutterX*2))/numYears;
+ gridY=(raphael.height-(gutterY*2));
+ drawGrid();
+
+ var color = "hsl(" + [.6, .5, .5] + ")";
+ graph = raphael.path().attr({stroke: color, "stroke-width": 4, "stroke-linejoin": "round"});
+ bgGraph = raphael.path().attr({stroke: "none", opacity: .3, fill: color});
+
+ maxPaths=8;
+ graphs=[];
+ startPath=["M", gutterX , raphael.height - gutterY, "L", raphael.width-gutterX, raphael.height - gutterY];
+ for (var i=0;i<maxPaths;i++) {
+ graphs[i]=raphael.path().attr({stroke: Raphael.getColor(), "stroke-width": 4, "stroke-linejoin": "round"});
+ graphs[i].attr({path:startPath});
+ graphs[i].hide();
+ }
+
+ drawGraph(0,0);
}
function graphableData(name) {
//organises a range of data to graph against a variable value
+ //stores the count of instances for each value
this.name=name;
this.data={};
this.max=0;
@@ -50,6 +72,13 @@ function graphableData(name) {
this.getElement = function(element) {
if (element in this.data) return data[element]; //returns an associative array
}
+ this.getValue = function(element,value) {
+ if (element in this.data) {
+ if (value in this.data[element]) return this.data[element][value]; //returns a value
+ else return 0;
+ }
+ else return 0;
+ }
this.summary = function() {
var s= ""+name+": "+Object.keys(this.data).length+" elements, max "+this.max+"\n";
var k=Object.keys(this.data);
@@ -62,6 +91,9 @@ function graphableData(name) {
}
return s+"\n";
}
+ this.getKeys = function() {
+ return Object.keys(this.data);
+ }
}
@@ -87,28 +119,13 @@ function loadData() {
classOfRange={};
classOfRange.start=3000;
classOfRange.end=0;
- birthplaces={};
- colleges={};
- locations={};
- for (var i in data) {
- var year = parseInt(data[i].classOf);
- classOfRange.start=Math.min(classOfRange.start,year);
- classOfRange.end=Math.max(classOfRange.end,year);
- if (data[i].birthplace in birthplaces) birthplaces[data[i].birthplace]++;
- else birthplaces[data[i].birthplace]=1;
- if (data[i].college in colleges) colleges[data[i].college]++;
- else colleges[data[i].college]=1;
- if (data[i].location in locations) locations[data[i].location]++;
- else locations[data[i].location]=1;
- }
-
- var numYears=(classOfRange.end-classOfRange.start);
-
//prepare all data for graphing
graphData={};
for (i in fields) graphData[fields[i]]=new graphableData(fields[i]);
for (var i in data) {
- var yearField
+ var year = parseInt(data[i].classOf);
+ classOfRange.start=Math.min(classOfRange.start,year);
+ classOfRange.end=Math.max(classOfRange.end,year);
for (j in fields) {
if (fields[j]=="Class size") {
graphData[fields[j]].addElement("Class size",parseInt(data[i].classOf));
@@ -116,51 +133,53 @@ function loadData() {
else graphData[fields[j]].addElement(data[i][fieldNames[j]],parseInt(data[i].classOf));
}
}
-
- ///* test
+
+ numYears=(classOfRange.end-classOfRange.start);
+
+ /* test
var message="from "+classOfRange.start+" to "+classOfRange.end+"\n";
for (var i in graphData) message+=graphData[i].summary();
alert(message);
- //*/
+ */
}
-function drawGraph() {
- var color = "hsl(" + [.6, .5, .5] + ")";
- var numYears=(classOfRange.end-classOfRange.start);
- var gutterX=10,
- gutterY=16;
- //draw grid
- var gridX=(raphael.width-(gutterX*2))/numYears;
- var gridY=(raphael.height-(gutterY*2));
+function drawGrid() {
+
raphael.drawGrid(gutterX, gutterY, raphael.width-(gutterX*2), raphael.height -(gutterY*2), numYears, 10, "#000");
//label axis
var txt = {font: '12px Helvetica, Arial', fill: "#fff"};
for (var i=0;i<=numYears;i++) raphael.text(gutterX+(i*gridX),raphael.height-gutterY+8,classOfRange.start+i).attr(txt).toBack();
+
+}
+
+function createMenu() {
+ var menu="<select id='select' onchange='drawGraph(this.selectedIndex,1000)'>\n";
+ for (i in fields) menu+="<option>"+fields[i]+"</option>/n";
+ menu+="</select>\n";
+ document.getElementById("menus").innerHTML=menu;
+}
+
+function drawOneGraph(which,time){
+ var datum=fields[which];
+ var datelem=graphData[datum].getKeys()[0];
+
+ //draw 1 or multiple graphs. animate between items
+ //maximum number of graphs
//construct graph
- var graph = raphael.path().attr({stroke: color, "stroke-width": 4, "stroke-linejoin": "round"}),
- bgGraph = raphael.path().attr({stroke: "none", opacity: .3, fill: color});
- //default graph is 'Class size'
- //find largest class
- var classSize=[];
- for (var i=0;i<=numYears;i++) classSize[i]=0;
- for (var i in data) {
- classSize[parseInt(data[i].classOf)-classOfRange.start]++;
- }
- var classMax=0;
- for (var i in classSize) classMax=Math.max(classMax,classSize[i]);
+
var path,bgPath;
- var stepY=(gridY/classMax);
+ var stepY=(gridY/graphData[datum].max);
for (var i=0;i<=numYears;i++) {
var x=gutterX+(i*gridX),
- y=raphael.height-gutterY-(stepY*classSize[i]);
+ y=raphael.height-gutterY-(stepY*graphData[datum].getValue(datelem,i+classOfRange.start));
if (!i) {
path=["M",x,y,"C",x,y];
bgPath=["M", gutterX , raphael.height - gutterY, "L", x, y, "C", x, y];
}
if (i&&i<numYears-1) {
- var Y0 = Math.round(raphael.height - gutterY - (stepY*classSize[i-1])),
+ var Y0 = Math.round(raphael.height - gutterY - (stepY*graphData[datum].getValue(datelem,i+classOfRange.start-1))),
X0 = Math.round(gutterX + (gridX * (i - .5))),
- Y2 = Math.round(raphael.height - gutterY - (stepY*classSize[i+1])),
+ Y2 = Math.round(raphael.height - gutterY - (stepY*graphData[datum].getValue(datelem,i+classOfRange.start+1))),
X2 = Math.round(gutterX + (gridX * (i + 1.5)));
var a = getAnchors(X0, Y0, x, y, X2, Y2);
path = path.concat([a.x1, a.y1, x, y, a.x2, a.y2]);
@@ -169,19 +188,46 @@ function drawGraph() {
}
path = path.concat([x, y, x, y]);
bgPath = bgPath.concat([x, y, x, y, "L", x, raphael.height - gutterY, "z"]);
- graph.attr({path: path});
- bgGraph.attr({path: bgPath});
-}
-
-function createMenu() {
- var menu="<select id='select' onchange='doGraph(this.selectedIndex)'>\n";
- for (i in fields) menu+="<option>"+fields[i]+"</option>/n";
- menu+="</select>\n";
- document.getElementById("menus").innerHTML=menu;
+ graph.animate({path: path},time,'easeIn');
+ bgGraph.animate({path: bgPath},time,'easeIn');
}
-function doGraph(which){
+function drawGraph(which,time){
+ var datum=fields[which];
+ var keys=graphData[datum].getKeys();
+
//draw 1 or multiple graphs. animate between items
//maximum number of graphs
- alert(fields[which]);
+ //construct graph
+
+ var paths=[];
+ var stepY=(gridY/graphData[datum].max);
+ for (var k in keys) {
+ for (var i=0;i<=numYears;i++) {
+ var x=gutterX+(i*gridX),
+ y=raphael.height-gutterY-(stepY*graphData[datum].getValue(keys[k],i+classOfRange.start));
+ if (!i) {
+ paths[k]=["M",x,y,"C",x,y];
+ }
+ if (i&&i<numYears-1) {
+ var Y0 = Math.round(raphael.height - gutterY - (stepY*graphData[datum].getValue(keys[k],i+classOfRange.start-1))),
+ X0 = Math.round(gutterX + (gridX * (i - .5))),
+ Y2 = Math.round(raphael.height - gutterY - (stepY*graphData[datum].getValue(keys[k],i+classOfRange.start+1))),
+ X2 = Math.round(gutterX + (gridX * (i + 1.5)));
+ var a = getAnchors(X0, Y0, x, y, X2, Y2);
+ paths[k] = paths[k].concat([a.x1, a.y1, x, y, a.x2, a.y2]);
+ }
+ }
+ paths[k] = paths[k].concat([x, y, x, y]);
+ }
+ for (var i=0;i<maxPaths;i++) {
+ if (i<=k) {
+ graphs[i].show();
+ graphs[i].animate({path: paths[i]},time,'easeIn');
+ }
+ else {
+ graphs[i].hide();
+ graphs[i].attr({path:startPath});
+ }
+ }
}
generated by cgit v1.2.3 (git 2.39.1) at 2025-12-06 07:13:56 +0000