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

▶SITE :: 웹콘텐츠 기획사례 - 뉴욕타임즈의 네일샵 관련 기사 분석이 글에서 살펴보려고하는 웹콘텐츠는, 이번에 뉴욕타임즈에서 보도된 기사이다. 이 기사에 대해 중앙SUNDAY는 "상식파괴한 디지털퍼스트전략 화제"라고 언급했을 정도로, 이번 뉴욕타임즈의 기사는 기존에 우리가 보던 것들과는 형태가 많이 다르다. [사진 : www.nytimes.com/2015/05/10/nyregion/at-nail-salons-in-nyc-manicurists-are-underpaid-and-unprotected.htm] 이 기사를 접하게된 것은 '중앙SUNDAY'신문을 통해서 였다. 각 나라마다 '어두운삶'을 주제로 다룰 수 있는이야기는 많기때문에, 주제만 놓고보았을 때 특별하게 느껴지지는 않았다. 이 기사가 흥미로..

제주도 유동인구 데이터 시각화[진행중]사용데이터: 지번단위 유동인구

▶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 튜토리얼 :: projection과 path의 활용D3를 활용하여 웹에서 시각화를 구현하고자 할 때, Topojson 또는 GeoJSON파일 등을 활용하면 보다 효과적인 시각화결과를 얻을 수 있다. d3.geo에 대한 기능은 지도를 활용한 데이터매핑을 하기전에 앞서 꼼꼼하게 살펴보아야할 API이다. 사진 : Geo Paths에 관한 기술문서 페이지 화면. 정말 다양하고 자세한 기술문서가 존재한다. d3.geo.path()의 기능d3.js의 한국어 API(부분적으로 제공중이다.)는 d3.geo.path()기능에 대해 다음과 같이 정리하고 있다. "지리 경로 제레네이터를 새로 생성한다. 기본값은 albersUsa 투영법과 반지름 4.5 픽셀의 포인트다."한국어로 된 설명이 있는것 자체가 굉장히 ..

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

▶d3.js 튜토리얼 :: 맵핑(Mapping)다양한 데이터시각화 방법들이 있지만, 개인적으로 맵핑(mapping)방식의 시각화에 많은 관심을 갖고 있다. 대부분의 사람들은 거주하고있는 지역 또는 인접 지역에 대한 지도, 또는 공간정보에 대해 기본적인 스키마를 가지고있다. 이러한 바탕위에 데이터를 표현한다면, 처음 시각화를 접하는 사람이라도, 추가적인 정보전달없이 상당부분을 직관적으로 이해할 수 있다. 결과물이 잘 나오기만 한다면 데이터 맵핑은 심미적인 면에서도 로도 좋은 결과를 얻을 수 있다. 이러한 시각화결과를 웹공간에 게시할 수 있게 된다면 더욱 좋다. 서론이 길었다. d3.js를 활용하면 이러한 맵핑도 어느정도의 노력만 기울인다면 전문개발자가 아니더라도 어느정도 연습을 거쳐 만들어낼 수 있다. 특..

▶d3.js 튜토리얼 :: 자바스크립트이해하기자바스크립트는 브러우저에 이미 떠 있는 페이지의 DOM을 조작해서 페이지를 동적으로 만들 수 있는 스크립트 언어다. 앞서 D3를 이해하는 건 자바스크립트를 이해하는 과정이라고 말했다. 앞으로 깊게 파헤쳐 보겠지만 여기서는 시작하는 의미로 조금만 맛보자. 자바스크립트는 보통 텍스트파일로 작성해서 저장하고 브라우저의 웹페이지에서 파일을 불러온다.+하지만, 웹페이지에서 직접 자바스크립트 파일을 입력하는 방법도 있다.*새로 일을 시작할 때는 이 방법으로 코드를 빠르고 쉽게 테스트해 볼 수 잇다.* 또한 디버깅하고 코드에서 무슨일이 일어나는지 보기위한 핵심도구로 자바스크립트 콘솔을 사용할 수도 있다. 크롬 : [설정 및 관리] - [도구]에서 자바스크립트 콘솔을 사용할..

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