//source for json file:// source>: https://endhomelessness.org/homelessness-in-america/homelessness-statistics/state-of-homelessness-report/new-york/ 

​

const TRIAL_URL = 'https://data.cityofnewyork.us/resource/k46n-sa2m.json?$limit=50000'

​

//create an array to store new object because api data is too large

const nyData = {};

let mapValue=0

let rectangleData=[];

​

​

function preload() {

  loadJSON(TRIAL_URL, gotData);

  loadJSON('/JSON/cocdata.json', gotCOCData);

}

function setup() {

  createCanvas(600, 600);

​

​

}

​

function gotCOCData(data){

  COCData = data;

  console.log(COCData);

}

​

function gotData(data) {

​

  for(let i = 0; i < data.length; i++) {

    const dataPoint = data[i];

    // create new date objecthttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/Date

    //translate from string to date object

    //year is the new key

    const year = new Date(dataPoint.date_of_census).getFullYear();

​

    // Create data point in the start so that we can add numbers onto it later on, else the code will not be able to add in an empty state

    if (!nyData[year]) {

      nyData[year] = {

        dataPointCount: 0,

        dataPointSum: 0

      }

    }

    // nyData[year].dataPointCount = nyData[year].dataPointCount + 1 - below is the shortened version. Below I am creating new values (in an object) for each key

    nyData[year].dataPointCount += 1;

    //parseInt because it was a string 

    nyData[year].dataPointSum += parseInt(dataPoint.total_individuals_in_shelter);

    //calculation by using fields created 

    nyData[year].average = nyData[year].dataPointSum / nyData[year].dataPointCount;

  }

​

  console.log(nyData);

​

}

​

​

  function draw() {

    // noLoop();

    background(220);

    push();

    noStroke();

    rect(20,70,560,480);

    pop();

​

    // NYData is in objects, this way it turns into an array for you to siphon through

    const years = Object.keys(nyData);

    //since COC data is only provided till 2018, loop through DHS data (NYDATA) 6 times from 13-18

    let xStartCOC1 =120

    let diffX = 100

    let xStartValue = 100

​

    for (let yearIndex = 0; yearIndex < 6; yearIndex++) {

      // console.log(nyData[years[yearIndex]].average);

      // map the value,max height of chart is 600-200=400

      mapValue = map((nyData[years[yearIndex]].average),0,88000,0,height-200);

      // newArray =map((nyData[years[yearIndex]].average),0,60000,0,height-200);

      // console.log(mapValue)

      rectangleData.push({

        x: xStartValue,

        y: height-100-mapValue,

        width: 20,

        height: mapValue,

        tooltipData:nyData[years[yearIndex]].average

      })

      /*** yStart + mapValue = y end : you want the end point to always be the same spot, so you have to start at different y start points, so y start = heigth -100 - mapvalue 

      ***/ 

      push();

      fill(255, 194, 248)

      rect(xStartValue,height - 100 - mapValue,20,mapValue);

      xStartValue = xStartValue + 80

      pop();

      //console.log(mapValue)

//  }

      //Creating COC data below for sheltered

​

    // for (let i =0; i <COCData.length; i++){

      mapValC = map((COCData[yearIndex].Sheltered),0,88000,0,height-200);

      //console.log(mapValC);

      push();

      fill(255, 138, 181)

      rect(xStartCOC1,height-100-mapValC,20,mapValC);

       rectangleData.push({

        x: xStartCOC1,

        y: height-100-mapValC,

        width: 20,

        height: mapValC,

        tooltipData:COCData[yearIndex].Sheltered

      })

​

      xStartCOC1 = xStartCOC1 + 80

      pop();

      //finding difference between DHS and COC sheletered data

      shelteredDiff = mapValC-mapValue

      push();

      fill(51, 13, 92)

      // console.log(shelteredDiff)

      rect(diffX,height-100-(mapValue+shelteredDiff),20,shelteredDiff);

       rectangleData.push({

        x: diffX,

        y: height-100-(mapValue+shelteredDiff),

        width: 20,

        height: shelteredDiff,

        tooltipData:COCData[yearIndex].Sheltered-nyData[years[yearIndex]].average

      })

      diffX = diffX + 80

      // console.log(diffX)

      pop();

​

    }

    let xStartCOC2= 140

    //Creating COC data below for unsheltered

     for (let i =0; i <COCData.length; i++){

      mapValC2 = map((COCData[i].Unsheltered),0,88000,0,height-200);

      // console.log(mapValC);

      push();

      fill(250, 218, 115)

      COCSheltered = rect(xStartCOC2,height-100-mapValC2,20,mapValC2);

       rectangleData.push({

        x: xStartCOC2,

        y: height-100-mapValC2,

        width: 20,

        height: mapValC2,

        tooltipData:COCData[i].Unsheltered

      })

      xStartCOC2 = xStartCOC2+80 

      pop();

     }

​

    //design y axis 

    let yStartValue = height -500

    let yAxisNumbers =['88000','79200','70400','61600','52800','44000','35200','26400','17600','8800','0']

    yIncrements = 88000/10 //want 10 ticks

    yTickIncrements = map(yIncrements,0,88000,0,height-200);

    for (let i =0; i<yAxisNumbers.length; i++){

      textAlign(RIGHT)

      text(yAxisNumbers[i],70,yStartValue)

      yStartValue = yStartValue + yTickIncrements;

    }

    let xAxis = 140

    //creating the X axis value

      for (let i =0; i <COCData.length; i++){

      text(COCData[i].Year,xAxis,530);

      xAxis = xAxis+80;

     }

     for(let i = 0; i < rectangleData.length; i++) {

      const rectangle = rectangleData[i];

      if (mouseX < rectangle.x + rectangle.width && mouseX > rectangle.x && mouseY > rectangle.y && mouseY < rectangle.y + rectangle.height ) {

        tooltip(rectangle.tooltipData);

​

      }

    }

         decorativeElement();

  }

​

function tooltip(dataPassed){

  console.log('YES', dataPassed)

  if (dataPassed) {

    // measure the width of the tooltip

    let w = textWidth(round(dataPassed),1);

​

    // save the current fill/stroke/textAlign state

    push();

​

    // draw a lightgray rectangle with a dimgray border

    fill('lightgray');

    stroke('dimgray');

    strokeWeight(1);

    // draw this rectangle slightly below and to the

    // right of the mouse

    rect(mouseX + 10, mouseY + 10, w + 30, 24, 4);

    textAlign(LEFT, TOP);

    noStroke();

    fill('black');

    text(round((dataPassed),1), mouseX + 20, mouseY + 16);

​

    // restore the previous fill/stroke/textAlign state

    pop();

  }

}

​

function decorativeElement(){

  //title

  push();

  textAlign(CENTER)

  textSize(20);

  text('New York State Homelessness Data',300,50)

  pop();

  push();

  fill(255, 194, 248)

  rect(20,565,15,15);

  pop();

  text('DHS Sheltered', 120,577);

  push();

  fill(255, 138, 181)

  rect(130,565,15,15);

  pop();

  text('COC Sheltered', 230,577);

  push();

  fill(250, 218, 115)

  rect(240,565,15,15);

  pop();

  text('COC Unsheltered', 355,577);

  push();

  fill(51, 13, 92)

  rect(360,565,15,15);

  pop();

  text('DHS & COC Sheltered Difference', 560,577);

}

​