* Name: Kelly De Naples

* Course: VCDS225_01FA17

* Assignment: Project 2 - Data Visualization

* Project: https://alpha.editor.p5js.org/full/HJ9FsAmyG

* Blog Post: https://kellydenaples.wordpress.com/2017/11/11/project-2-data-visualization/

* Description: 

*       The information in the white box displays data from the "condition" entry.

*       The bottom half of the canvas represents a weekly forecast. The numbers shown

*       are the "high" value from each day. This comes from the "forecast" entry.  

*       The line graph corresponds to the high values of each day. 

*/

​

var parisWeather; // the entire json file

var forecastArray; // the forecast array from the json file

var conditionArray; // the condition array from the json file

​

var dates = []; // an array to hold all dates from "forecast" entry

var days = []; // an array to hold all the days from "forecast" entry

var highs = []; // an array to hold all highs from "forecast" entry

​

var highsMap = []; // an array to hold mapped values of var highs

​

// values used in translate function

transX = 50; 

transY = 275;

​

// Offset of temperature text. Distance between circle and number

var tempOS = 55;

// Distance between number and day

var daysOS = tempOS + 20;

​

function preload(){

  parisWeather = loadJSON('paris-weather.json');

}

​

function setup() { 

  createCanvas(400, 400);

  background(220);

  forecastArray = parisWeather.query.results.channel.item.forecast;

  conditionArray = parisWeather.query.results.channel.item.condition;

  for (var i = 0; i < forecastArray.length; i++){

    dates[i] = forecastArray[i].date; // fills dates array with dates

    days[i] = forecastArray[i].day; // fills days array with days

    highs[i] = forecastArray[i].high; // fills highs array with highs

  }

} 

​

function draw() {  

  background(220);

  // Draws white rectangle and information about current condition in Paris

  var y1 = 55;

  rect(25, 25, 350, 150);

  textAlign(LEFT);

  textSize(15);

  text("Paris, France", 40, y1); 

  text(conditionArray.date, 40, y1 + 30); // displays "Fri, 27 Oct 2017..."

  text("Temp: " + conditionArray.temp + "°", 40, y1 + 60); // displays "Temp: 55°"

  text(conditionArray.text, 40, y1 + 90); // displays "Mostly Clear"

// Mapping "high" values as negative numbers. Range between 0-50.

// I did this because I want the line graph to plot the greater 

// numbers at the top and the lesser numbers at the bottom

  for (var i = 0; i < highs.length; i++){

    highsMap[i] = -map(highs[i], min(highs), max(highs), 0, 50);

  }

// A Weekly Forecast of high temps

  for (var j = 0; j < 7; j++){ 

    var x1 = j*50;          // x1 and x2 are used to evenly space the circles and lines.

    var x2 = (j+1)*50;  // x1 and x2 are the starting and ending points of each line

​

    textAlign(CENTER);

// Draws first 6 circles, lines, high temps, days

    if(j<6){

      push();

        translate(transX, transY);

        line(x1, highsMap[j], x2, highsMap[j+1]);

        push();

          fill('lightblue');    

          ellipse(x1, highsMap[j], 10, 10);

        pop();

        textSize(25);

        text(highs[j], x1, tempOS);

        textSize(15);

        text(days[j], x1, daysOS);

      pop();

    }

// Draws 7th circle, high temp, day (there is no 7th line)

    else{

      push();

        translate(transX, transY);

        push();

          fill('lightblue');    

          ellipse(x1, highsMap[j], 10, 10);

        pop();

        textSize(25);

        text(highs[j], x1, tempOS);

        textSize(15);

        text(days[j], x1, daysOS);

      pop();

    }

  }

}