시각화를 배우고 정리합니다

▶d3.js 튜토리얼 :: 오픈소스 자바스크립트 라이브러리 leaflet map 제작 ① 기본설정 이번 글에서는 오픈소스 자바스크립트 라이브러리인 'leaflet map'을 정리해보고자한다. leaflet 라이브러리를 활용하면 간단한 코드로 네이버지도나, 구글 지도와같이 식상해진(?)지도레이어가 아닌, 독특한 콘셉을 갖고있는 레이어테마를 활용하거나 직접템플릿을 만들어 적용해볼 수 있다. d3카테고리에서 'leaflet map'을 다루는 이유. D3글을 읽으러 들어온사람이라면, '갑자기 d3 이야기하다가 왠 leaflet map?'싶을 수도 있다. 이 글을 굳이 정리하려고하는 것은 단지 leaflet map이 '오픈소스 자바스크립트 라이브러리'이기 때문만은 아니다. 실제로 bostock역시 leafletm..

▶프로세싱 활용노트⑥ :: JSONArray()이 글에서는 D3에서도 많이 사용되는 JSON형태의 파일을 프로세싱에서 어떻게 다루는지 살펴보려고 한다.프로세싱 레퍼런스에서도 [Composite]하위문서로 array나 HashMap등의 함수들과 함께 JSON고 관련된 함수인JSONObject와 JSONArray를 다루고 있다. 프로세싱 공식홈페이지 내에서도 JSON관련 함수를 레퍼런스를 통해 제공하고있다. JSON[JavaScript Object Notation]개발관련 지식이 있는 사람이라면 그리 낯선 개념도 아니겠지만, 그게 아닌 경우도 있기때문에 한번 살펴보고 가려고 한다. JSON은 데이터를 다루는 데 있어 컴퓨터에게도, 사람에게도 효율적인 구조를 갖추고 있다.이러한 JSON의 특징으로, 서울시열린..

▶프로세싱 활용노트⑤ :: rectMode()이번에 살펴볼 것은 rect()함수와 관련 된 rectMode()이다. 이름 그대로 사각형을 그리는 방법을 설정하는 함수라고 할 수 있는데, 간단하지만 분명하게 짚고넘어가야 할 부분이 있어서 정리해보려고 했다. rectMode()별 차이를 알아보기위한 간단한 예제코드주석처리한부분을 하나씩 해제하면서 실행보는 것을 추천한다. 더 좋은 방법은 직접 타이핑하고, 값을 조절하면서 결과를 확인하는 것이다. 그러나 직접 타이핑하기가 번거롭다면, 아래에 첨부해놓은 메모장파일을 프로세싱에 집어넣어 실행버튼만 눌러보자. rectMode(CORNER)와 rectMode(CORNERS)의 차이이 둘 사이의 차이는 분명하게 기억해두어야 한다. 기본적으로 rectMode()관련 함수..

▶함께배우는 프로세싱 :: KEY의 활용이번글에서는 프로세싱에서 KEY를 활용하는 방법에 대해 살펴보려고 한다. 프로세싱에서는 사용자의 key입력신호를 바탕으로 시각화하는데 사용할 수 있도록, 여러가지 관련함수를 제공하고 있다. 프로세싱 시각화 콘텐츠에서 key값은 여러가지 용도로 사용된다. 1. 시각화결과물에 사용자가 탐색을 할 수 있도록 하는 경우2. 콘텐츠 제작중에 제작자가 여러가지 형태나, 범위를 보고자 할 경우 1번의 경우는 최종적인 결과물에 사용자가 조작가능하도록 key 기능을 포함시키는 것이다. 예를들어 키보드 화살표 '↑↓→←'를 통해 전체적인 구조를 살펴볼 수 있도록 하거나, 특정 키 값('+', '-'등)을 직접 지정하여 줌인아웃하는 경우등이 있다. 다른 글에서 살펴봤던 kepler시각..

▶함께 배우는 프로세싱 :: Processing - bezierVertex이번 글에서 살펴볼 내용은 프로세싱으 도형관련 함수 중 bezierVertex()이다. 이 bezierVertex()는 인자로 앵커포인트와 제어점, 시작점등의 인자를 포함하고 있어야 한다는 점에서 다른 도형함수들보다 활용하기 어려운 함수로 꼽힌다. rect()등의 기본함수의 경우 굳이더 설명할 필요가 없겠지만, bezierVertex()함수라면, 꼼꼼하게 정리해둘 필요가 있겠다는 생각이 들었다. bezierVertex()vertex Bezier 곡선 좌표를 지정한다.이 bezierVertex()를 호출 할 때마다 선 또는 모양에 새로운 선분을 추가하는데 추가되는 내용은 다음과 같다. bezierVertex()함수를 호출 할 때 추가..

▶함께배우는 프로세싱 :: Kepler2012 이번글에서는 프로세싱을 이용하여 데이터시각화를 제작한 예인 "kepler2012"코드를 하나 하나 뜯어보고자한다. kepler2012 시각화소개데이터시각화 전문가 Jer Thorp이 미 항공우주국(NASA)의 케플러 프로젝트의 일환으로 제작한 것이다. 제작자는 2012년에 Kepler2012라는 이름으로 1,236개에 달하는 행성데이터를 바탕으로 인터랙티브한 시각화를 제작하였으며, 부지런(?)하게도, 이후 1,091개의 행성을 업데이트했다. 이번예제에서 다룰 것은 "kepelr2012"로, 2012년 버전이다. 제작자의 Github주소 : http://github.com/blprnt/Kepler-Visualization 위의 url에서 전체 코드를 다운로드받..

▶함께배우는 프로세싱 :: generative design P.2.2.3 Shape from agents 이번 글에서는 generative design에서 제공하고있는 예제를 살펴보려고합니다. 마우스를 클릭하면 그 지점을 기준으로 새롭게 agent들의 위치가 설정됩니다. (클릭위치에 도형생성) 이렇게 설정된 위치에 curveVertex()로 꼭짓점을그리게 되고, 각 꼭짓점은 유연한 곡선으로 이어지며 형태를 이룹니다. // 기본 세팅 부분int formResolution = 15; // 출력형태 해상도설정float[] x = new float[formResolution]; // formResolution에서 설정한 수 만큼 배열 생성float[] y = new float[formResolution]; //..

▶Processing :: 프로세싱의 오디오기능 - Minim라이브러리 이번에 살펴볼 것은 프로세싱에서의 오디오기능입니다. 어려운것은 아니고 가장 기초적인것인데, 어떤 메커니즘인지 정리해둘 필요가 있을 것 같았습니다. 먼저 이번 예제에서 사용할 audio샘플을 함께 첨부하겠습니다. 따르르릉하고 짧게 울리는 벨소리이며 wav형식이며, 프로세싱작업 파일 내 data폴더에 넣어두시면 됩니다. 프로세싱 실행후 가장 먼저, 이번예제에서 적용해볼 Minim라이브러리를 로드해줍니다. 그다음으로 살펴볼 것은 setup부분입니다. 뒤에서 볼 수 있겠지만, bell클래스는 bell(x, y, r, filename)의 형태로 이루어져있습니다.따라서 이번 예제에서 벨은 화면 중심에서(width/2, height/2) 반지름이..

▶함께배우는 프로세싱 :: 위치데이터로 원그리기 ① 이번 포스팅에서는 VisualizingData - chapter 3: mapping부분에 대해서 정리해보았습니다. - table class- location파일의 의미 red dot예제의 결과모습입니다.미국 각 주의 위치에 원이 그려져있는 모습입니다. 여기서는 '어떻게 각 주의 위치에 그렸는지'가 중요합니다. 프로세싱에서 원을그리기가 아무리 쉽다고 하지만, 일일이 모든 좌표를 입력하기에는 무리가 있습니다. ellipse(470, 300, 9, 9);ellipse(302, 200, 9, 9);ellipse(410, 202, 9, 9).........이건 무리! 저자는 tsv형식의 'locaion'이라는 파일에서 정보를 불러왔습니다. 예제폴더내의 'data..

▶프로세싱 연습노트 :: 2014 상반기 낙뢰지점 시각화이번에는 한국전력공사(KEPCO)에서 제공하는 자료를 바탕으로, 2014년 상반기 낙뢰지점을 시각화해 보았습니다. 언뜻, 일기예보에서 봤던 것 같은 느낌이 드는데요, 하얀색 마커는 낙뢰지점을 의미합니다. 정지화면으로 시각화 했을 경우에는 낙뢰지점의 분포를 제외하고 특별한 점을 보기는 어려웠습니다. 그런데 시간순서로 마커를 표시해보았더니 재미있는 점이 눈에 띄었습니다. 함께 올려드리는 영상을 잘 보시면 번개를 뿌리는 '뇌운'이 특정경로를 따라 이동하면서 뿌리는 모습까지 시각화에 나타납니다. 또한 광범위하게 일어나기도하고, 한 지역에 집중되서 일어나기도 합합니다.