HTML
>
Canvas
>
Processing
>Tippeligaen
Visualisering av data
Tippeligaen |
Det er fire involverte processing-filer:
_tippeligaen.pde
/* Tippeligaen. Showing the points for all teams during the season */ // the day we are showing int currentDay; // the year we are showing int season=2011; Liga liga; PFont veryBigFont; PFont smallFont; void setup(){ size(700,500); setUpLiga(season); frameRate(20); veryBigFont=createFont("Arial Bold",70); smallFont=createFont("Arial",12); } void setUpLiga(int season){ liga=new Liga(season,"data/resultater"+season+".csv","data/teams"+season+".csv"); currentDay=60; // start of march } void draw(){ background(255); liga.draw(); currentDay++; if(currentDay < 365){ liga.reset(); liga.calculate(currentDay); } } void mouseClicked(){ currentDay=50; }
og
_Liga.pde
/* Describing a liga in a certain year Access to all teams and all matches */ class Liga{ int year; float maxPoints;// needed for scaled draw Team[] teams; Match[] matches; Liga(int year,String resultFile,String teamFile){ this.year=year; // read and set up teams // each line: // one teamname String[] T=loadStrings(teamFile); teams=new Team[T.length]; for(int i=0;i< T.length;i++) teams[i]=new Team(T[i]); // read and set up matches // each line: // yyyy:mm:dd;round;hometeamname;awayteamname;homegoals;awaygoals T=loadStrings(resultFile); matches=new Match[T.length]; for (int i=0;i < T.length;i++){ String line=T[i]; // while debugging:println(line); String[] parts=line.split(";"); String date=parts[0]; String hTeamName=parts[2]; String aTeamName=parts[3]; Team hTeam=null; Team aTeam=null; // find teams with matching names for(int j=0;j< teams.length;j++){ if(hTeamName.equals(teams[j].name)) hTeam=teams[j]; if(aTeamName.equals(teams[j].name)) aTeam=teams[j]; } if((hTeam==null ) || (aTeam==null)) println("trouble, cant fin teams:"+hTeamName+"-"+aTeamName); matches[i] =new Match(date,hTeam,aTeam,int(parts[4]),int(parts[5])); } maxPoints=findMaxPoints(); } // calculate point up to this day void calculate(int day){ for(int i=0;i< matches.length;i++){ if(matches[i].dayInYear < day) matches[i].calculate(); } } // take away all results void reset(){ for(int i=0;i< teams.length;i++){ teams[i].clearPoints(); } } void draw(){ // show year in center textFont(veryBigFont); fill(220); textAlign(CENTER); text(year,width/2,height/2); // let all teams display themselves // based at certain horizontal position Team bestTeam=getLeader(); for(int i=0;i < teams.length;i++){ float xpos= map(i,0,teams.length,30,width-30); teams[i].drawAtPos(xpos,maxPoints,bestTeam==teams[i]); } } Team getLeader(){ int maxValue=0; Team team=teams[0]; for(int i=0;i< teams.length;i++){ if(teams[i].points > maxValue){ maxValue=teams[i].points; team=teams[i]; } } if(maxValue > 0) return team; return null; } float findMaxPoints(){ calculate(365); Team t=getLeader(); float max=t.points; //println(max); reset(); return max; } }
og
_Match.pde
/* Describe a match between two teams at a certain date */ class Match{ String date; Team homeT; Team awayT; int homeGoals; int awayGoals; int dayInYear; Match(String date,Team H,Team A,int hg,int ag){ this.date=date; homeT=H; awayT=A; homeGoals=hg; awayGoals=ag; // calculate day in year from a yyyy.mm.dd format String[]parts=date.split(":"); int year=int(parts[0]); int month=int(parts[1]); int day=int(parts[2]); int days=0; // a little trick to avoid use of date-class switch(month){ case 12:days+=30; case 11:days+=31; case 10:days+=30; case 9:days+=31; case 8:days+=31; case 7:days+=30; case 6:days+=31; case 5:days+=30; case 4:days+=31; case 3:if((year % 4==0) && (year % 100 !=0)) days+=29; else days+=28; case 2:days+=31; break; default:days=0; } dayInYear=days+day; } // distribute point to the two teams from this match void calculate(){ if(homeGoals > awayGoals) homeT.addPoints(3); else if(awayGoals > homeGoals) awayT.addPoints(3); else{ homeT.addPoints(1); awayT.addPoints(1); } } }
og
_Team.pde
/* Describing a team, with name and updated points */ class Team{ String name; int points; Team(String name){ this.name=name; points=0; } void addPoints(int p){ points+=p; } int getPoints(){ return points; } void clearPoints(){ points=0; } void drawAtPos(float xpos,float maxPoints,boolean markedAsBest){ textFont(smallFont); textAlign(LEFT); fill(0); float H=height-80; // this is used to perform a temporary translate and rotation pushMatrix(); // show teamname, base it 500 pixels from top translate(xpos,H); pushMatrix(); translate(0,20); rotate(PI/4); text(name,0,0); strokeWeight(1); rotate(-PI/4); popMatrix(); // display a line up to a "baloon" with points stroke(255,0,0); float top=map(points,0,maxPoints,-10,-H+30); fill(255); line(0,0,0,top); ellipse(0,top,30,30); // show point within the baloon fill(0); textAlign(CENTER); text(points,0,top); // forget the translate and rotate if(markedAsBest){ stroke(200); line(-xpos,top-16,width,top-16); } popMatrix(); } }
Javascriptkoden er slik, med to funksjoner som kaller skissen:
_index.js
function setYear(){ // identify processing var pjs=Processing.getInstanceById("draw1"); var myselect = document.getElementById("year"); var season=myselect.options[myselect.selectedIndex].value; //alert(season); pjs.setUpLiga(season); }