Yeliz Simitci

Javascript code used for interactive map project.

​

var img;
var numberOfYears = 6;
var loaded = 0;
var slider;
var year = 2010;

function preload() {
    img = loadImage('map.png'); 
}

function setup(){
    createCanvas(1800, 1000);
    image(img, 100, 100, 2200, 1400);
    slider = createSlider(2010, 2015, 2010, 1);
    slider.position(400, 740);
    slider.style('width', '700px');

    $.ajax({url: "http://stats.oecd.org/sdmx-json/data/EDU_GRAD_AGE/AUS+CAN+DNK+FIN+DEU+HUN+ISR+MEX+NLD+NZL+TUR+GBR+USA+LTU+RUS.T+F+M.T.W0.L6.T/all?startTime=2010&endTime=2015",
           
           //if OECD is down, uncomment line 25
           //url: "OECDdata.json",

        dataType: "json",
        success: function(parsed_json) {
            for(i=0; i<countries.length; i++){
                for(y=0; y<numberOfYears; y++){
                    var countryNumber = countries[i].index;

                    //gets female data
                    var value = parsed_json['dataSets'][0]['series'][ countryNumber + ':1:0:0:0:0']['observations'][y][0];
                    countries[i].femaleData.push(value);
                    //gets male data
                    value = parsed_json['dataSets'][0]['series'][ countryNumber + ':2:0:0:0:0']['observations'][y][0];
                    countries[i].maleData.push(value);
                }
            }
            loaded =1;
            console.log("done");
         }
    });

}

function country (countryName, countryAbv, index, x, y){
  this.countryName= countryName;
  this.countryAbv = countryAbv;
  this.index = index;
  this.x= x;
  this.y= y;
  this.femaleData = new Array;
  this.maleData = new Array;
}

 

var countries= new Array;
countries.push(new country('Australia', 'AUS', 0, 1170, 590));
countries.push(new country('Canada', 'CAN', 1, 280, 270));
countries.push(new country('Denmark', 'DNK', 2, 710, 260));
countries.push(new country('Finland', 'FIN', 3, 760, 230));
countries.push(new country('Germany', 'DEU', 4, 730, 300));
countries.push(new country('Hungary', 'HUN', 5, 770, 310));
countries.push(new country('Mexico', 'MEX', 6, 280, 400));
countries.push(new country('Netherland', 'NLD', 7, 690, 290));
countries.push(new country('New Zealand', 'NZL', 8, 1310, 660));
countries.push(new country('Turkey', 'TUR', 9, 820, 340));
countries.push(new country('UK', 'GBR', 10, 630, 270));
countries.push(new country('USA', 'USA', 11, 290, 330));

countries.push(new country('Israel', 'ISR', 12, 800, 385));
countries.push(new country('Lithuania', 'LTU', 13, 750, 2500));
countries.push(new country('Russia', 'RUS', 14, 1000, 240));

function getCountryInfo(item, index){
    var yearIndex = year - 2010;

    //sets auto diameter if data isn't retrieved
    var fDiameter = 100;
    var mDiameter = 50;

    //if size adjusted by % rather than #
    //var fDiameter = 100 * (item.femaleData[yearIndex] / (item.femaleData[yearIndex]+ item.maleData[yearIndex]));
    //var mDiameter = 100 * (item.maleData[yearIndex] / (item.femaleData[yearIndex]+ item.maleData[yearIndex]));

    //changes diameter size
    if (loaded==1){

            fDiameter = Math.sqrt(item.femaleData[yearIndex]) / 10;

            mDiameter = Math.sqrt(item.maleData[yearIndex]) / 10;
    }

    //the if statements make it so that the larger group is always behind the smaller group
    if (fDiameter > mDiameter){
        fill(255, 0, 0);
        ellipse(item.x, item.y, fDiameter);
        fill(0, 0, 255);
        ellipse(item.x, item.y, mDiameter);
    }else{
        fill(0, 0, 255);
        ellipse(item.x, item.y, mDiameter);
        fill(255, 0, 0);
        ellipse(item.x, item.y, fDiameter);
    }

  fill(0);
  textSize(15);
  text(item.countryAbv, item.x - 15, item.y);         
}

function draw(){
    //clears screen every time slider is moved
    clear();
    image(img, 40, 80, 1350, 650);
    countries.forEach(getCountryInfo);

    //creates slider and writes the year on top of the slider
    fill(0);
    textSize(32);
    text (slider.value(), 700, 720);
    year = slider.value();
}