Application Program Interfaces - APIs - The Holy Grail

This is really what I've been waiting for. Finally being able to access the treasure trove of information at our fingertips is very exciting. I feel like this is the first time I can really get my hands dirty into what I came here to do - combining life sciences with computer science in some way... whatever way. 

One of the examples given was weather.com, saying it had plenty of APIs that were well documented and it was a popular site to use. I figured it must have something related to pollution, and lo and behold I was right. Their API for pollution is cool, and I figured out how to do something with it at least. I made a graph of the carbon monoxide mixing ration in New York City. Check it out! Looks like at least on the CO front we're safe for now :)

Oh and I had to figure out how to map the values using log(), that was actually kind of fun, even if it was a little bit tedious and involved a good amount of guess and check. But once figured out it looks so nice and neat! Still wondering how to stop the array at the end of the reading the values. I set it arbitrarily to end at a value I knew to be larger than the values present so when it gets to one beyond the available in the array - the code just stops.  Also, wanted to put more data on the page, and make it editable and responsive, but that task was a little offset by my Pcomp midterm - so perhaps it will happen this Friday at the ICM hackathon!

Source code:

var pollution;
var latANDlong = "10,74"

function setup() {
    createCanvas(400, 1200);
    background(180, 230, 255);
    textAlign(CENTER)
    var url = 'http://api.openweathermap.org/pollution/v1/co/' + latANDlong + '/current.json?appid=86b1f68187923c62492ece8193264951'

    loadJSON(url, gotData)

    textAlign(RIGHT)
    text("Carbon Monoxide mixing ratio\nof New York City", width / 1.01, 280)
    textSize(12)

    text("Levels of CO above\n12,800 ppm are deadly\n12,800ppm = 0.0128", width / 1.01, 330)
    pop()

}

function gotData(data) {
    pollution = data;
}

function draw() {
    fill(0)

    if (pollution) {
        for (var i = 0; i < 45; i++) {

            // syntax for .length of string?

            var pressure = pollution.data[i].pressure
            var COlevel = pollution.data[i].value
            var loggedP = log(pressure)
            var Ypos = map(loggedP, -12, 7, height - 50, 10)
            var Height = map(COlevel, 0, 0.0000003, 0, width / 1.5)
            line(180, Ypos, 180 + Height, Ypos);
            push()
            textSize(8)
            textAlign(LEFT)
            text("Pressure: " + pressure + "\nCO Level: " + COlevel, 20, Ypos)
            pop()

            // Find Sea Level

            if (pressure == 1) {
                push()
                fill(100, 200, 255)
                textSize(22)
                textAlign(CENTER)
                text("Sea Level", width - 70, Ypos - 5)
                strokeWeight(3)
                stroke(100, 200, 255)
                line(width, Ypos, width - 150, Ypos, 10);
                pop();

            }

        }
    }
}

Source: http://alpha.editor.p5js.org/samchasan/ske...