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

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

▶Educaton:: 운동이 신체에 미치는 효과 ① 주관적효과&요통완화에 대하여 바쁜 현대인들에게 운동은 쉬고싶은 시간에 몸을 움직여야하는 '일'로 여겨지지고 있다. 그럼에도 불구하고, 건강관리를 위해서, 또는 외모 관리를 위해서 운동을 이어나가는 사람들이 있다. 사람마다 운동의 강도나, 종류도 다양하겠지만 이렇게 운동을 규칙적으로 한다는 것 자체가 쉬운일이 아니다. 일정기준 이상의 운동을 한다는 것 자체가 인간의 기본적인 욕구에 반하는 일이기 때문이다. 귀찮고, 쉬고싶음에도 불구하고 우리가 규칙적인 운동을 하기위해서는 명확한 동기부여가 되야 하는데, 운동이 우리몸에 어떤 영향을 미치는지 이해하는 것도 좋은 방법이 될 수 있다. 여기서 말하고자하는 내용은 "유산소+무산소운동"과 같이 일반사람들도 익히들었..

▶프로세싱 활용노트⑥ :: 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까지의 값을 반..

▶ICT노트 :: SSD이해하기 - SSD와 HDD의 차이를 바탕으로 SDD[Solid State Drive]란?요즘에는 주변에서 "너 SSD달았어?"라는 말을 주변에서 듣는 것이 이상한일도아니다. 자꾸 SSD, SSD하는데 'SSD??????'라고 대답하기가 민망하다면, SSD에대한 기본적인 개념만이라도 훑고 가보는 것이 좋다. 사진 : 삼성온라인스토어에서 판매되는 SSD를 인기상품순으로정렬했다. 사진 : 다나와에서 같은방법(인기상품순)으로 정렬하니 이 제품이 가장많이나간다고한다. SSD에대한 정의를 간략히 보기SSD는 1980에 등장한 것으로, 사전에서는 "낸드플래시나 DRAM등 초고속 반도체 메모리를 저장매체로 사용하는 대용량 저장장치"라고 정의하고 있다. SSD에 대한 설명으로 가장 많이 언급되는..

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

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