▶함께배우는 프로세싱 :: 프로세싱에서 데이터활용하기① - Table()

▶함께배우는 프로세싱 :: 프로세싱에서 데이터활용하기① - Table()

이번 글에서는 Unfolding Maps 에서 제공하고 있는 기본 예제를 통해 데이터로드방법에 대해서 살펴보려고 합니다. 이 예제에서 사용하고 있는 방법은 Table()함수와 for()구문을 이용하는 것으로서, 이를통해 지도위에 마커(marker)를 표시하는것을 목적으로하는 예제입니다.

// Load CSV data Table bikeDataCSV = loadTable(bikeDataFile, "header, csv");

데이터를 로드하는 부분입니다. 데이터로드는 loadTable()함수를 사용하며, header(제목 유무), csv(형식)을 괄호안에 적어줍니다.

for (TableRow bikeStationRow : bikeDataCSV.rows()) { // Create new empty object to store data BikeStation bikeStation = new BikeStation(); // Read data from CSV bikeStation.id = bikeStationRow.getInt("ID"); bikeStation.name = bikeStationRow.getString("Name"); bikeStation.bikesAvailable = bikeStationRow.getInt("BikesAvailable"); float lat = bikeStationRow.getFloat("Latitude"); float lng = bikeStationRow.getFloat("Longitude"); bikeStation.location = new Location(lat, lng); // Add to list of all bike stations bikeStations.add(bikeStation); // Statistics (well, sort of) maxBikesAvailable = max(maxBikesAvailable, bikeStation.bikesAvailable); } println("Loaded " + bikeStations.size() + " bikeStations. Max bikes: " + maxBikesAvailable); }

그 다음살펴볼 것은 for 구문을 활용하여 데이터를 로드하는 방법을 설정하는 부분입니다.  for구문안에서 방금전에 loadTable()로 불러왔던 'bikeDAtaCSV.row()'를 볼 수 있는데 이것은 우리가 불러온 데이터파일의 행을의미하는 것입니다.

BikeStation bikeStation = new BikeStation(); 이것은 불러온 데이터를 저장할 빈 저장공간을 만들어주기위함입니다. 여기서 이 'bikeStation'을 만들었다면 다음 //Read data from CSV부분에서 본격적으로 원하는 데이터를 불러오게 됩니다. 

**

데이터를 불러올 때에는 데이터 형식에 맞는 함수기능을 사용해야합니다. id의 경우는 getInt("ID")로 불러오고 있고, 문자열 형태의 name의 경우에는 getString("Name")의 형태로 로드하고있는 모습입니다. 그 외에도 getFloat의 형태로 데이터내의 위도, 경도 값을 불러오는 모습입니다.

bikeStations.add(bikeStation); 이 부분을 통해 가져온 데이터를 자전거스테이션 목록에 추가하게 됩니다.(이것은 아래에서 살펴볼 draw()의 시각화 부분에서 활용됩니다.)

void draw() { // Draw map and darken it a bit map.draw(); fill(0, 200); rect(0, 0, width, height); noStroke(); // 모든 지점에 대해 반복합니다.Iterate over all bike stations for (BikeStation bikeStation : bikeStations) { // 위치정보를 스크린상의 위치값으로 변환합니다. Convert geo locations to screen positions ScreenPosition pos = map.getScreenPosition(bikeStation.location); // Map number of free bikes to radius of circle float s = map(bikeStation.bikesAvailable, 0, maxBikesAvailable, 1, 50); // 자전거 사용가능 여부에 따라 원을 그립니다.Draw circle according to available bikes fill(255, 0, 255, 50); ellipse(pos.x, pos.y, s, s); if (bikeStation.showLabel) { fill(200); text(bikeStation.name, pos.x - textWidth(bikeStation.name)/2, pos.y); } } }

draw()에서는 setup()에서 미리 로드하고, 분류/ 저장했던 데이터를 활용하게됩니다. 이 예제에서는 지도위에 불러온 데이터를 바탕으로 위치를 마커(marker)를 표시하는 것을 목적으로 하고 있습니다. 어떤 방식으로 불러온데이터를 사용하는 지 살펴볼까요?

for(BikeSTation bikestation : bikeStations) 형태의 for구문을 활용하여 시각화를 하고있습니다. 이를 통해 데이터로가져온 모든 지점에 대해 반복 수행하게 됩니다.

ScreenPosition pos = map.getScreenPosition(bikeStation.location) 이중 ScreensPostion<<이 부분은 Unfolding Maps라이브러리의 기능으로, 이전에 불러온 위도, 경도 값을 프로세싱 스크린상의 위치값으로 변환해주는 기능입니다. (우리는 이전에 위도, 경도 값을 bikeStation의 location에 저장했었습니다.)

그리고ellipse()기능을 통해 원을그리게 되며, 그 위치는 방금 ScreenPostion기능으로 변환한 pos.x, pos.y값을 활용합니다. 이렇게 Table()기능을 활용하여 시각화하는 과정에 대해서 살펴보았습니다. 

Unfolding Maps에 대한 자세한내용은 아래 사이트를 통해 확인하실 수 있습니다.

Unfolding Maps Libraries