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

▶ d3.js 튜토리얼 ⑨ :: d3.nest() API 활용하기 d3를 공부하다보면, 이 d3.nest() API를 자주보게 되는데, 아마 그만큼 이 API가 유용하고, 효율적이기 때문일것이라고 생각한다. mike bostock의 예제 중 트리맵, 덴드로그램 예제, 그리고 이 외에 네트워크 시각화 관련예제에서도 이 d3.nest() API가 자주 사용되기때문에, 이 API가 다른 경우보다 조금 복잡하게 느껴지는 감이 있더라도, 마음먹고 꼼꼼하게 살펴보아야 한다. d3.nest() : 데이터를 트리구조로 변환하고자할 때 유용한 APId3.nest()는 .key() method를 이용하여 '데이터의 무엇을 key로 해서 데이터를 수집할 지' 를 지정할 수 있다. 수집할 데이터를 전달하고 결과를 배열이나 맵..

▶d3.js 튜토리얼 :: leaflet map 라이브러리 활용하기 ② leaflet map with GeoJSON지난 글에서 [▶d3.js 튜토리얼 :: Leaflet map 라이브러리 활용하기 ① 기본설정] 을 통해 기본적으로 html안에서 leaflet map을 어떻게 셋팅하는지에 대해서 살펴보았다. 이글에서는 이 leaflet map레이어위에 다른 데이터(여기서는 GeoJSON)를 엮는 과정을 살펴보려고한다. leaflet with GeoJSON이번에는 leaflet map에 GeoJSON을 활용하여 매핑하는 과정에 대해서 살펴보려고한다. GeoJSON은 d3에서도 많이 활용되는 지오데이터 형식이다. 이 형식은 매우 유연해서, leaflet 맵을 처리하는데 있어서도 유연하게 작동하고있다. GeoJ..

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

▶d3.js 튜토리얼 :: shp파일을 GeoJSON으로 변환하기이번 글에서는 d3에서 지오데이터를 활용하기위하여 geojson파일로 변환하는 과정에 대해서 소개하고자 한다. 개인적으로 이 과정이 매우 중요한 작업이라고 생각하고 있다. 기본적으로 shp파일은 GIS툴에서 다루는 데이터 형식으로, 인간의 눈도그렇지만 웹브라우저에서도 이를 처리할 방법이 없다. 그럼에도 불구하고, 대부분의 지오데이터들은 shp파일형태로 만들어져 제공되고있기때문에 d3에서 맵핑을 하고자하는 사람이라면 반드시 이해하고 넘어가야할 부분인 것 같다. shp파일을 GeoJSON형태로 변환하기위해서는 다음의 라이브러리가 필요하다. - GDAL(Geospatial Data Abstraction Library, http://gdal.org..

▶프로세싱 활용노트⑥ :: 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()관련 함수..

▶프로세싱 활용노트④ :: 시간관련 함수들 - time, day, hour 등이번글에서는 프로세싱의 함수 중에서 시간과 관련된 함수에 대해서 살펴보려고 한다. 시간 관련함수 "들"이라고 적어놨지만, 우리가 이미 알고있듯이 기본적으로 시간은 '년, 월, 일, 시, 분, 초", 그리고 조금 더 세부적으로 들어가 "밀리세컨드"라고 불리는 천분의 일초까지만 사용한다. (여기서 살펴볼 함수는 그리 많지 않다는 것이다.) 프로세싱에서제공하고 있는 시간관련 함수종류day()hour()millis()minute()month()second()year()종류는 위와 같으며, 각각의 함수들은 심플하게 자신의 이름에 걸맞는 값들만 반환한다. day() 작업을 처리하는 컴퓨터의 시계를 기준으로 하며, 1부터 31까지의 값을 반..

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

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

▶ d3.js 튜토리얼 :: ⑧ clipPath로 문서요소 다루기이번에 살펴볼 것은 clipPath()기능이다. "클립패스"라는 이름에서 포토샵이나 일러스트에서 활용하는 "클리핑 마스크"를 떠올린 사람이있을 것이다. 그렇다. 이 clipPath는 포토샵이나 일러스트레이터에서 클리핑마스크라고 불리는 기능과 동일하게 기능하는 메서드이다. D3에서 clipPath는 SVG문서요소이며, 이 메서드를 적용하면, 메서드가 적용된 부분(영역)만 화면에 출력되게 된다.포토샵이나 일러스트를 몰라도 상관없다. 용어가 복잡해 이해가 어렵다면 아래에서 clipPath 전&후 비교사진을통해 다룰 내용을 어렵지않게 추측해볼 수 있을것이다. 여기서 중요한 것 "clipPath가 적용되면, clipPath로 덮인 픽셀만(부분만) 화..