Data Visualization-평균 습도 api 시각화

let url = 'https://apis.data.go.kr/1360000/AsosDalyInfoService/getWthrDataList?ServiceKey=uI9Eh2uCRQ5d4yiCfYHDkPT2Q5tTjFHDtsU97urJGCyCeeHaj4PMEsxlxLkm4gh8C%2BBXAcKXY8vARefQpLn6iA%3D%3D&dataCd=ASOS&dateCd=DAY&startDt=20100101&endDt=20100630&stnIds=108&dataType=JSON&pageNo=1&numOfRows=360';

​

let temp = [];

let humidity = []; // 온도, 습도만 따로 빼서 어레이 만들겠단 뜻 

​

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  background(0); // 데이터를 받아서 그리면 계속 드로우가 실행되기 때문에 set up에 하는 것

  // console.log(data.response.body.items.item[20]); // 배열 20 = 20번째 > 1월 21일 데이터

  loadJSON(url, gotData);

}

​

function gotData(data){

  // console.log(data);

      let weather = data.response.body.items.item; // 어레이이다.(180 몇개의 데이터가 들어있는)

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

      temp.push(weather[i].avgTa);//평균 온도 

      humidity.push(weather[i].avgRhm); // 평균 습도 등 필요한거만 뽑아서 쓴거임 

      }

​

​

      let interval = width/temp.length; // temp.lenght = 간격 500을 100으로 나누며 ㄴ5 

    fill(255, 0, 0, 120);

      noStroke();

​

      beginShape();

      curveVertex(0, height/2);

      curveVertex(0, height/2); // 첫번째 점은 두번 

​

      for (let i = 0; i < temp.length; i++){ // 온도의 length

        // let x1 = i*interval; // x의 길이 즉, 가로는 '간격'이 된다 / interval 나누기 선의 개수(Length)

        // let y1 = height/2; 

        let x2 = i*interval; 

        let y2 = height/2 - temp[i]*10; // 온도 temp 곱하기 10 한 값 = y이다 

        curveVertex(x2, y2);

      }

      curveVertex(width, height/2);

      curveVertex(width, height/2); // 끝점도 두번 

​

​

​

        // 먼저 인터벌을 구한다. interval(간격) = width(화면의 가로) 나누기 temp.length(템프라는 온도의 갯수)

        // 선을 그리기 위해선 시작점과 끝점이 필요하다, 시작점(x1, y2) / 끝점(x2, y2)이다.

        // 시작점 x1은 0, y1은 h/2 ____ 끝점은 x2는 0, y2는 h/2 - temp*10(안보이니까 10을 곱해서 약간 키워주는 것) teamp.length로 i번째 있는 녀석들 시작점 y좌표는  

        // 끝 점 y좌표는 온도의 10배를 빼준다. 

        // stroke(0);

        // strokeWeight(4);

        // line(x1, y1, x2, y2);

        endShape(CLOSE);

      }

​

​

​

function draw() { //그림을 여기다가 그리면 그 데이터를 계속 draw해서 지우기 때문에 여기다가 아무것도 그리면 안됨 

  // background(220);

}